menu dropdown orrizontale

**manutebol** · 14-11-2007, 17:55

Ciao e grazie in anticipo. Stò cercando di realizzare (o piuttosto trovare già fatto

da modificare) un menu dropdown orizzontale con il sub-menu che si visualizzi sotto la voce del main-menu. Per chiarire meglio ho disegnato un esempio:

Ho cercato parecchio in rete ma ho trovato esclusivamente dropdown con le voci del sub-menu visualizzate in verticale. Spero qualcuno possa darmi una mano.

**Xinod** · 14-11-2007, 18:28

con i soli css
http://www.cssplay.co.uk/menus/dd_valid_2.html
http://www.cssplay.co.uk/menus/drop_line.html

**manutebol** · 14-11-2007, 21:09

I menu che mi hai segnalato distribuiscono le voci del sub-menu allineandole a sinistra; quello che sto cercando dovrebbe allineare le voci del sub-menu alla relativa voce selezionata del main-menu (come mostrato nell'immagine che ho postato nel primo messaggio).

**Xinod** · 14-11-2007, 21:41

si' si', non era passata inosservata la differenza
(anche perche' anche a me di recente serviva quello che chiedi ma non l' ho trovato)

**manutebol** · 14-11-2007, 21:50

Sto cercando come un forsennato in rete, ma sembra che a nessuno sia mai venuto in mente di progettare un menu del genere! Forse ci sono delle problematiche tecniche particolari a causa della sovrapposizione eventuale dei layers contenenti i sub-menu?

**Xinod** · 14-11-2007, 22:03

problematiche credo insormontabili, qualora si voglia restare sui puri css
studiando un po' i due esempi e testando varie possibili soluzioni me ne sono reso conto

se si aggiunge un po' di javascript diventa plausibile:
ricavando (via js) la posizione dell' elemento selezionato nel menu' principale rispetto al contenitore (la lista principale)
e settando quel valore (per es.) come padding della lista del sottomenu'

**Xinod** · 14-11-2007, 22:40

un esempio molto molto grezzo per rendere l' idea di quello che intendo,
la pagina di base e' http://www.cssplay.co.uk/menus/drop_line.html

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>




<style type="text/css">
/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/drop_line.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
.menu {
position:relative;
width:750px;
height:2em;
background:#b7c6ac;
border-top:10px solid #b7c6ac;
padding-bottom:1px;
background:#b7c6ac url(drop/line.gif) bottom left repeat-x;
margin-bottom:5em;
}

* html .menu {padding-bottom:0;}

.menu ul{
list-style-type:none;
padding:0;
margin:0 0 0 20px;
width:730px;
height:100%;
}

.menu li{
float:left;
}

.menu table{
position:absolute;
border-collapse:collapse;
left:0;
top:0;
}

.menu a, .menu :visited {
color:#fff;
text-decoration:none;
}
.menu a em.lft, .menu :visited em.lft {
display:block;
float:left;
width:5px;
height:2em;
background: transparent url(drop/lefta.gif);
border-bottom:1px solid #777;
}
.menu a b, .menu :visited b {
display:block;
font-weight:normal;
float:left;
padding:0 10px;
height:2em;line-height:1.9em;
background: transparent url(drop/mida.gif);
cursor:pointer;
border-bottom:1px solid #777;
}
.menu a em.rgt, .menu :visited em.rgt {
display:block;
float:left;
width:5px;
height:2em;
background: transparent url(drop/righta.gif);
border-bottom:1px solid #777;
}

.menu ul ul {
visibility:hidden;
position:absolute;
height:2em;
top:2em;
left:-20px;
width:749px;
border-bottom:1px solid #777;
border-right:1px solid #777;
background:#ccc;
}

.menu :hover {
white-space:normal;
}

.menu a:hover b {
color:#000;
background: transparent url(drop/midb.gif);
border-bottom-color:#ccc;
}
.menu a:hover em.lft {
background: transparent url(drop/leftb.gif);
border-bottom-color:#ccc;
}
.menu a:hover em.rgt {
background: transparent url(drop/rightb.gif);
border-bottom-color:#ccc;
}

.menu li:hover > a b
{
color:#000;
background: transparent url(drop/midb.gif);
border-bottom-color:#ccc;
}
.menu li:hover > a em.lft {
background: transparent url(drop/leftb.gif);
border-bottom-color:#ccc;
}
.menu li:hover > a em.rgt {
background: transparent url(drop/rightb.gif);
border-bottom-color:#ccc;
}
.menu li:hover ul,
.menu a:hover ul{
display:block;
visibility:visible;
top:2em;
margin-top:1px;
}

.menu ul :hover ul li {
display:block; 
border-left:1px solid #777; 
background:#ccc; 
height:2em;
}
.menu ul :hover ul li a {
display:block; 
font-size:0.8em; 
height:2em; 
line-height:2.5em; 
width:auto; 
float:left; 
color:#444; 
padding:0 10px;}
.menu ul :hover ul li a:hover {
color:#c00;
}
</style>

<script type="text/javascript">
window.onload=function(){
	var mn=document.getElementById('mainMenu');
	var lis=mn.getElementsByTagName('LI');
	for(var x=0;x<lis.length;x++){
		if(lis[x].parentNode.parentNode==mn){
			var lisUl=lis[x].getElementsByTagName('UL');
			if(lisUl.length>0){
				var offX=lis[x].offsetLeft;
				lisUl[0].style.left=offX+'px';
				lisUl[0].style.width=lis[x].parentNode.offsetWidth-offX+'px';
			}
		}
	}
}
</script>
</head>
<body>
<div class="menu" id="mainMenu">
<ul>[*]<em class="lft">[/i]John Constable<em class="rgt">[/i]

<ul>[*]The Hay Wain[*]Brighton Beach[*]Malvern Hall[*]Salisbury Cathedral[*]Weymouth Bay[/list]

[*]<em class="lft">[/i]William Turner<em class="rgt">[/i]

<ul>[*]Fishermen at Sea[*]The Shipwreck[*]The Vale of Ashburnham[*]Crossing the Brook[/list]

[*]<em class="lft">[/i]Henri Matisse<em class="rgt">[/i]

<ul>[*]The Girl with Green Eyes[*]The Dream[*]Woman in Blue[*]The Yellow Dress[/list]

[*]<em class="lft">[/i]Paul Cezanne<em class="rgt">[/i]

<ul>[*]The Large Bathers[*]Onions and Bottles[*]Mardi Gras[*]Still Life[*]Boy in a Red Waistcoat[/list]

[/list]
</div>
</body>
</html>

**Xinod** · 14-11-2007, 22:46

nel css conviene aggiungere

codice:

.menu ul ul li a, .menu ul ul li a:hover {
white-space:nowrap;
}

**manutebol** · 15-11-2007, 14:28

Perfetto, grazie!

Discussione: menu dropdown orrizontale

Strumenti discussione

Ricerca discussione

Visualizza

[ajax] menu dropdown orrizontale

Permessi di invio