menu con sottomenu in orizzontale

**progettisti** · 13-01-2006, 00:20

Ciao A tutti,
mi servirebbe un menu (in javascript)su due righe in orizzontale.dalla prima riga devo aprire un sottomenu sulla seconda riga.c'è qualcosa sicuramente in rete ma non so dove...quALCUNO MI AIUTA?
Grazie e ciao

Luisa

**Xinod** · 13-01-2006, 01:16

l' approccio moderno punta a fare il + possibile con i css,
ti posto un esempio che mi ritrovo sul mio HDD di cui purtroppo non ricordo la fonte online

codice:

<html><head>

	<style type="text/css" media="all">

	
	#nav {
		margin: 0;
		padding: 0;
	}

	#nav li.on ul, #nav li.off ul {
		margin: 0;
		padding: 0;
	}

	#nav a {
		text-decoration: none;
	}

	#nav li { /*float the main list items*/
		margin: 0;
		float: left;
		display: block;
		padding-right: 15px;
	}

	#nav li ul {
		display: none;
	}

	#nav li.off ul, #nav li.on ul { /*put the subnav below*/
		position: absolute;
		top: 33px;
		*top: 44px;
		left: 5px;
		padding-top: 10px;
		background: #d6e3b0;
		height: 28px;
		width: 640px;
	}

	#nav li a {
		color: #d6e3b0;
		font-weight: bold;
		display: block;
		height: 15px;
		width: 100px;
		border: 2px solid #d6e3b0;
		padding: 5px;
	}

	#nav li.on a {
		border: 2px solid #7a8566;
		color: #7a8566;
	}

	#nav li.on ul a, #nav li.off ul a {
		float: left; /*ie doesn't inherit the float*/
		border: 0;
		color: #7a8566;
		width: auto;
		margin-right: 15px;
	}

	#nav li.on ul {
		display: block;
	}

	#nav li.off:hover ul {
		display: block;
		z-index: 6000;
				}

	#nav li.off a:hover, #nav li:hover a {
		background: #d6e3b0;
		color: #7a8566;
	}

		
	</style></head><body>
	<ul id="nav">
	<li class="off">Renaissance
	<ul>
		[*]Brunelleschi
		[*]Alberti

		[*]Palladio
		[*]Michelangelo
		[*]Bramante
	[/list]
	<li class="off">Art Nouveau
	<ul>
		[*]Mackintosh

		[*]Guimard
		[*]Horta
		[*]van de Velde
	[/list]
	<li class="on">Modern
	<ul>
		[*]Sullivan

		[*]Le Corbusier
		[*]Mies
		[*]Gropius
		[*]Yamasaki
	[/list]
	<li class="off">Postmodern

	<ul>
		[*]Venturi
		[*]Eisenman
		[*]Stern
		[*]Graves
		[*]Gehry

	[/list]
	<li class="off">Digital
	<ul>
		[*]Xenakis
		[*]Lynn
		[*]Diller+Scofidio
		[*]Zellner

		[*]Hadid
	[/list][/list]
</body></html>

spero sia quello che cerchi
ciao

**progettisti** · 13-01-2006, 10:39

scusa, ho provato ma non funziona...
ciao luisa

Discussione: menu con sottomenu in orizzontale

Strumenti discussione

Ricerca discussione

Visualizza

menu con sottomenu in orizzontale

menu orizzontale

Permessi di invio