menu e sottomenu orizzontali

**stellina81** · 14-10-2007, 21:00

Ciao a tutti
devo creare un sottomenu orizzontale le cui voci siano allineate alla voce del menu principale anch'esso orizzontale
es:
voce1 | voce2 | voce3
...........| sottovoce1 | sottovoce2 | ....

ecco i dati:
[CODE]
#box_menu {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
background-color:#33CCCC;
PADDING-BOTTOM: 0px;
MARGIN-LEFT: auto;
WIDTH: 980px;
MARGIN-RIGHT: auto;
PADDING-TOP: 0px;
POSITION: relative;
TOP: 40px;
HEIGHT: 63px;
TEXT-ALIGN: left
}

.box_menu .module_menusx{
position:absolute;
top:0px;
left:0px;
width:auto;
}

.module_menusx ul.menusx0{
position:relative;
margin:0;
padding:0;
list-style:none;
width:980px;
height:35px;
font-size:10px;
font-weight:bold;
text-transform:uppercase;
color:#FFFFFF;
border-bottom:1px solid #000033;
}

.module_menusx ul.menusx0 li,
.module_menusx ul.menusx0 li.active{
margin:0;
padding:0;
float:left;
width:110px;
height:35px;
border-right:1px solid #171A1C;
}

.module_menusx ul.menusx0 li a,
.module_menusx ul.menusx0 li a:link,
.module_menusx ul.menusx0 li a:active,
.module_menusx ul.menusx0 li a:visited{
margin:0;
padding-top:5px;
padding-bottom:6px;
display:block;
color:#FFFFFF;
text-decoration:none;
text-align:center;
}

.module_menusx ul.menusx0 li a:hover{
COLOR: #053f64;
}

.module_menusx ul.menusx0 li.active a.active,
.module_menusx ul.menusx0 li.active a.active:link,
.module_menusx ul.menusx0 li.active a.active:active,
.module_menusx ul.menusx0 li.active a.active:visited{
COLOR: #ffffff;
background-color:#B7C8D0;
}

.module_menusx ul.menusx0 li.active a.active:hover,
.module_menusx ul.menusx0 li.active a.active#active{
COLOR: #053f64;
background-color:#B7C8D0
}

.module_menusx ul.menusx1{
margin:0;
padding:0;
position:absolute;
top:36px;
left:0px;
list-style:none;
width:900px;
height:27px;
font-size:0.9em;
}

.module_menusx ul.menusx1 li,
.module_menusx ul.menusx1 li#active{
margin:0;
padding:0;
float:left;
width:auto;
text-transform:lowercase;
color:#FFFFFF;
font-size:11px;
}

.module_menusx ul.menusx1 li#active a.sublevelactive,
.module_menusx ul.menusx1 li#active a.sublevelactive:link,
.module_menusx ul.menusx1 li#active a.sublevelactive:visited{
margin:0;
padding:6px 10px;
display:block;
color:#3E4B5B;
white-space:nowrap;
}

.module_menusx ul.menusx1 li#active a.sublevelactive:hover{
background-color:#CDDEE6;
}
.module_menusx ul.menusx1 li.sublevelactive#active a.sublevelactive#active{
background-color:#CDDEE6;
}

.module_menusx ul.menusx1 li a.sublevel,
.module_menusx ul.menusx1 li a.sublevel:link,
.module_menusx ul.menusx1 li a.sublevel:active,
.module_menusx ul.menusx1 li a.sublevel:visited{
margin:0;
padding:6px 12px;
display:block;
color:#3E4B5B;
white-space:nowrap;

}

</style>

<DIV id=box_menu>
<DIV class=module_menusx>
<DIV class=modulecontent>
<UL class=menusx0 id=menu_menusx0>
<LI class="" id=123_menuitem_37><A class="" id=123_menulink_37 title=""
href="#">Ristoranti
</A></LI>
<LI class=active id=123_menuitem_43>Servizi Catering
<UL class=menusx1 id=menu_menusx1>
<LI class=sublevel id=123_menuitem_52>Soluzioni su Misura </LI>
<LI class=sublevel id=123_menuitem_54><A class=sublevel id=123_menulink_54
title=""
href="">Novità
</A></LI>
<LI class=sublevel id=123_menuitem_55><A class=sublevel id=123_menulink_55
title=""
href="">Testimonianze
</A></LI>[/list]</LI>
<LI class="" id=123_menuitem_40><A class="" id=123_menulink_40 title=""
href="">Pasticceria
</A></LI>
<LI class="" id=123_menuitem_77><A class="" id=123_menulink_77 title=""
href="">Ice
Cream & gelati</A></LI>[/list]</DIV></DIV>
</DIV>

CODE]

**H5N1_Aviaria** · 15-10-2007, 00:03

Credo che questi link facciano al caso tuo:
http://www.htmldog.com/articles/suckerfish/dropdowns/
http://www.cssplay.co.uk/menus/index.html

**fcaldera** · 15-10-2007, 00:19

sperando di aver capito bene... copia e incolla

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it" xml:lang="it">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Menu</title>
        
        <style type="text/css">
					
		#menu, #menu ul  {
			list-style-type	: none;
			margin					: 0;
			padding					: 0;
			width						: 600px; 
		}
				
		#menu li { 
			float						: left; 
			display					: inline; 
			height					: 1.5em; 
			position				: relative; 
		}
					
		#menu ul { position: absolute; top: 1.2em;  /* modificato qui */left: -1px; display: none; z-index: 2;}
			
		#menu a:hover { direction: ltr; }
			
		#menu a:hover ul,
		#menu li:hover ul {
		  display	: block;
		}
					
	</style>

    </head>

<body>

	<ul id="menu">
		[*]Voce 1
			
			<ul>
				[*]sottovoce 1_1
				[*]sottovoce 1_2
				[*]sottovoce 1_3
				[*]sottovoce 1_4
				[*]sottovoce 1_5
			[/list]
			
	
	[*]Voce 2
			
			<ul>
				[*]sottovoce 2_1
				[*]sottovoce 3_2
				[*]sottovoce 2_3
			[/list]
			
	
	[*]Voce 3
			
			<ul>
				[*]sottovoce 3_1
				[*]sottovoce 3_2
				[*]sottovoce 3_3
			[/list]
			
	


		
		[/list]

</body>
</html>

testato solo con IE6 e FF2.0.0.7 linux

**H5N1_Aviaria** · 15-10-2007, 02:22

Su IE6 non funziona ed ecco spiegato il perchè:
#menu li:hover = IE6 riconosce :hover solo per i tag A
#menu a:hover ul = nessun UL è "figlio" di A.

Si può ovviare a questo inconveniente utilizzando uno script in javascript che aggiunge una classe in modo da farlo funzionare.
Il suddetto codice resta comunque valido per IE7 se si aggiunge a
#menu, #menu ul il background: si tratta di un bug di IE che non rileva il mouse event in assenza di un background impostato.
Come si può constatare, difatti, il sottomenu viene mostrato al passaggio del mouse, ma passando da una sottovoce all'altra quando il mouse raggiunge uno spazio senza caratteri il menu scompare.

**fcaldera** · 15-10-2007, 09:51

Originariamente inviato da H5N1_Aviaria
Su IE6 non funziona ed ecco spiegato il perchè:
#menu li:hover = IE6 riconosce :hover solo per i tag A
#menu a:hover ul = nessun UL è "figlio" di A.

Ho l'impressione che tu non abbia affatto guardato bene il codice. Se fosse per questo motivo il sottomenu non dovrebbe nemmeno aprirsi secondo la tua interpretazione.

In effetti le voci del menu non restavano aperte al passaggio su IE6, così ho modificato la proprietà top nel menu del secondo livello (vedi post precedente) in modo che su IE6 si crei un finto overlap delle voci.

Ciao

**H5N1_Aviaria** · 15-10-2007, 10:16

Chiedo venia....

Non mi ero accorto dell'inserimento di una tabella con operazioni condizionali per IE6

**fcaldera** · 15-10-2007, 10:30

no problem
però mi hai fatto notare un particolare importante, ovvero che così come avevo scritto il codice non era possibile distanziare i list-item: questo perchè IE6 ha diversi problemi, tra i quali uno è nel ridisegno errato dallo/allo stato hover

quindi suggerisco di usare questa versione: le uniche differenze sostanziali sono il position relative al link invece che al list-item e il background agli ul annidati.

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it" xml:lang="it">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Menu</title>
        
        <style type="text/css">
					
		#menu, #menu ul  {
			list-style-type	: none;
			margin			: 0;
			padding		       : 0;
			width			: 600px; 
		}
				
		#menu li { 
			float		: left; 
			display		: inline; 
			height		: 1.5em; 
			margin-left	: 10px;
		}
		
		#menu li:hover,
		#menu a:hover {
			position	: relative; 			
		}

		#menu li:hover li:hover,
		#menu a:hover a:hover{
			position	: static; 			
		}


		#menu ul { display: none;  }
			
		#menu a:hover { direction: ltr; }
			
		#menu a:hover ul, 
		#menu li:hover ul {
	  	       display		: block;
		        position	: absolute;
			background	: #fff; 
			height		: 1.5em;
			z-index		: 100;
			top		: 1.2em; 
			left		: -10px; 
		}
	</style>
    </head>

<body>

	<ul id="menu">
		[*]Voce 1
			
			<ul>
				[*]sottovoce 1_1
				[*]sottovoce 1_2
				[*]sottovoce 1_3
				[*]sottovoce 1_4
				[*]sottovoce 1_5
			[/list]
			
	
	[*]Voce 2
			
			<ul>
				[*]sottovoce 2_1
				[*]sottovoce 3_2
				[*]sottovoce 2_3
			[/list]
			
	
	[*]Voce 3
			
			<ul>
				[*]sottovoce 3_1
				[*]sottovoce 3_2
				[*]sottovoce 3_3
			[/list]
			
	


		
		[/list]

</body>
</html>

L'esempio è visibile su http://fabriziocalderan.it/code/test.html

**falconet** · 24-10-2007, 01:31

GRAZIE

bella soluzione, complimenti
mah....
è possibile spostare un sottomenu al centro della relativa voce del menu principale ?
esempio, anziche avere (metto i trattini ma non ci sono e solo per separare i menu

):

codice:

VOCE 1 - VOCE 2 - VOCE 3 - VOCE 4 - VOCE 5 - VOCE 6
                                             SOTTOMENU 1 - SOTTOMENU 2 - SOTTOMENU 3

ottenere questo :

codice:

VOCE 1 - VOCE 2 - VOCE 3 - VOCE 4 - VOCE 5 - VOCE 6
                   SOTTOMENU 1 - SOTTOMENU 2 - SOTTOMENU 3

ponendo che si stia aprendo il MENU 5 (e quindi visualizzando il relativo sottomenu) ?
ovvio che se cio fosse possibile bisognerebbe fare in modo che man mano che si aprono le voci precedenti il menu se non e possibile centrarlo debba iniziare dall'inizio (ad esempio non si potrebbe centrare VOCE 2 o VOCE 3 o VOCE 4 - quest'ultima forse ci entrerebbe)

un'altra domanda (visto che ci sono) e' possibile aggiungere un'immagine di 32x32 pixel di fianco ad ogni VOCE e sottomenu (come in questo menu' http://www.xs4all.nl/~peterned/examples/cssmenu.html) ?

**falconet** · 24-10-2007, 21:17

proprio non si possono applicare le 2 modifiche spiegate al precedente post ?

**fcaldera** · 24-10-2007, 23:44

per le immagini: le usi come background dei tag <a>
Questo implica assegnare diverse classi ai tag <a> e associare ad esse un immagine di sfondo e un padding destro.

per la centratura del menu, non si può fare in puro css, almeno non nel modo da te indicato. In javascript in modo non intrusivo puoi provare a calcolare l'effettiva larghezza del sottomenu aperto e poi spostarlo verso destra della metà (quando è possibile)

Se prendi questa strada apri un thread in javascript, questo non posso spostarlo se non per richiesta di stellina81.

Ciao

Discussione: menu e sottomenu orizzontali

Strumenti discussione

Ricerca discussione

Visualizza

menu e sottomenu orizzontali

niente ?!?

Permessi di invio