Help modifica menu css...

[Sonikag]

Ho implementato questo menu css:

http://www.cssplay.co.uk/menus/example_flyout.html

Io però lo utilizzo solo a due livelli. Ossia voci principali e sottovoci.
Il problema è che avrei la necessita che in alcune pagine una tendina fosse aperta di default e che si chiuda poi normalmente se vado sulle altre voci. Ma non ho la più pallida idea di dove iniziare

Sonia

[fcaldera]

per avere un sottomenu aperto ti basta assegnare una classe particolare al[*] padre

per nascondere quel sottomenu, a seguito dell'hover su altre voci, i CSS da soli non bastano: però con del javascript non intrusivo puoi rimuovere quella classe all'evento onmouseover delle altre voci

Se prosegui su questa strada ti sposterò sul forum javascript

[Sonikag]

Se come sospettavo senza javascript non si fa anche se speravo si riuscisse... sposta pure!
Intanto faccio una pseudo prova...

[fcaldera]

giusto per intenderci tu chiedi di chiudere il menu che era aperto

teoricamente con i soli css potresti nasconderlo temporaneamente (ammesso poi di avere anche una determinata marcatura) finché navighi sugli altri sottomenu (basta settare un'area fissa destinata al sottomenu e usare uno z-index più elevato rispetto al sottomenu aperto)

li:hover ul, li a:hover ul { ... z-index: 2 }
li.aperto ul { ... z-index: 1 }

però poi quando esci dal menu si rivedrebbe il sottomenu che era aperto in precedenza

quindi per chiudere definitivamente il sottomenu serve js.

[Sonikag]

Il menu ora è così:

<div class="menu2">
<ul>
<li class="voce1">VOCE1

	<ul>
	<li class="subprod1">SVOCE1
	<li class="subprod1">SVOCE1
	<li class="subprod2">SVOCE1
	[/list]
	

<li class="voce1">VOCE2

	<ul>
	<li class="subprod1">SVOCE2
	<li class="subprod1">SVOCE2
	<li class="subprod2">SVOCE2
	[/list]
	
[/list]
</div>

nel mio css ho provato ad impostare

#voce1 {visibility:visible; position:absolute; height:auto; background-color:#00FF00}

ma il submenu non rimane aperto!

[fcaldera]

#voce1 dovrebbe essere un id
mentre tu hai delle classi (.voce1) uguali sui due[*]

se vuoi mantenere una voce di menu aperta, assegna una classe ad UN solo[*] ad es. "current"
quindi il css sarà

li.current ul {
position: absolute;
top: ...; left: ...;
display: block;
}

puoi vedere un esempio pratico nel secondo link in firma,
sulla demo c'è un menu css con un sottomenu aperto di default

[Sonikag]

Ecco manco copia e incolla mi riesce :P

Dunque ho fatto così:

CSS:

.menu2{
	font-family: Tahoma, Verdana, "Times New Roman";
	width:300px;
	position:relative;
	z-index:100;
	margin:18px;
}

.menu2u{
margin-left:100px
}

.menu2 ul {
padding:0; margin:0; list-style-type: none; width:105px; 
}
.menu2 ul li ul {
visibility:hidden; position:absolute; overflow:hidden;left:101px; top:0px;
}
.menu2 ul li {
border-left:1px solid #fff;float:left
}
.menu2 ul li a, .menu2 ul li a:visited {
display:block; text-decoration:none; color:#646463; width:105px; font-size:0.7em; padding-left:5px;
}
* html .menu2 ul li a, * html .menu2 ul li a:visited {width:105px; w\idth:95px;}

.menu2 table {
border-collapse:collapse; border:0; margin:0; padding:0; font-size:1em; position:absolute; left:0; top:0;
}

/* first line for IE7 and non-IE browsers - second line for IE5.5 and IE6 */
.menu2 ul li:hover a, .menu2 ul li a:hover{color:#fff; }

.menu2 ul li:hover {position:relative; z-index:90;}
* html .menu2 ul li a:hover {position:relative; z-index:100;}

.menu2 ul li:hover ul, .menu2 ul li a:hover ul {
visibility:visible; position:absolute; height:auto; overflow:visible;
}
.menu2 ul li:hover ul li a, .menu2 ul li a:hover ul li a{
display:block; color:#fff; text-decoration:none;
}

.menu2 ul li:hover ul li:hover a, .menu2 ul li a:hover ul li a:hover {
 color:#646463;
}
.menu2 ul li:hover ul li ul, .menu2 ul li a:hover ul li a ul {
visibility:hidden; position:absolute; height:0; overflow:hidden; top:0; left:0px;
}
.menu2 ul li:hover ul li:hover ul, .menu2 ul li a:hover ul li a:hover ul {
visibility:visible; position:absolute; height:auto; color:#000; padding:0; list-style-type:none; 
}
.menu2 ul li:hover ul li:hover ul li a, .menu2 ul li a:hover ul li a:hover ul li a {
display:block;  color:#fff;
}

.menu2 ul li:hover ul li:hover ul li:hover a, .menu2 ul li a:hover ul li a:hover ul li a:hover {
color:#000;
}

li.current ul {
position: absolute;
visibility:visible;
display: block;
}

e HTML...

<div class="menu2">
<ul>
<li class="current">VOCE1

	<ul>
	<li class="subprod1">SVOCE1
	<li class="subprod1">SVOCE1
	<li class="subprod2">SVOCE1
	[/list]
	
[*]VOCE2

	<ul>
	<li class="subprod1">SVOCE2
	<li class="subprod1">SVOCE2
	<li class="subprod2">SVOCE2
	[/list]
	
[/list]
</div>

Ma nonostante la classe sia alla fine del css.. questo non ne vuol sapere di stare aperto... Se ci metto un bg color ho visto però che lo prende quindi non dovrebbero esserci errori sintattici.

[Sonikag]

Up!

Eventualemnte mi va bene anche un esempio già fatto.

Avrei bisogno di un menu a tendina verticale (rigorosamente css-oso) tipo:
http://www.cssplay.co.uk/menus/flyoutt.html

Vorrei però che ci fosse una voce aperta di default, che poi al passaggio o click del mouse si chiudesse quella aperta di default e si aprissero le altre voci.

P.S. Il menu mi interessa a solo 2 livelli e non a 3-4 come nell'esempio

[Sonikag]

Up!