Generatore Menu verticale

[biline]

Ciao a tutti ...

esiste un generatore di menu verticali in CSS o HTML, che realizzi un menu a 3 livelli (sezione -> categoria -> pagina).

Cioè, un menu verticale che possa scendere di 3 livelli dalla pagina principale.

Spero di essermi fatto capire ...

Grazie1000.

[biline]

Ciao,

intendo un menu tipo questo.

Grazie.

[gengix]

Hai già la pagina con l'esempio da te postato. Basta che prendi il codice sorgente sia per la struttura che per il css e hai risolto il tuo problema.

[gengix]

Struttura del menu:

<div class="menu">
<ul>[*]DEMOS
<!--[if lte IE 6]>
<a href="../menu/index.html">DEMOS
<table><tr><td>
<![endif]-->
<ul>[*]zero dollars[*]wrapping text[*]<a href="../menu/form.html" title="Styling forms">styled 

form</a>[*]active focus[*]HOVER/CLICK &gt;
<!--[if lte IE 6]>
<a class="sub" href="../menu/hover_click.html" title="Hover/click with 

no active/focus borders">HOVER/CLICK &gt;
<table><tr><td>
<![endif]-->
<ul>[*]<a href="../menu/form.html" title="Styling forms">styled 

form</a>[*]active focus[*]hover/click[/list]
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
[*]shadow boxing
[*]image map[*]fun backgrounds[*]<a href="../menu/fade_scroll.html" title="fade-out scrolling">fade 

scrolling</a>[*]<a href="../menu/em_images.html" title="em size images compared">em 

sized images</a>[/list]
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
[*]MENUS
<!--[if lte IE 6]>
<a href="index.html">MENUS
<table><tr><td>
<![endif]-->
<ul>[*]<a href="spies.html" title="a coded list of spies">spies 

menu</a>[*]<a href="vertical.html" title="a horizontal vertical menu">vertical 

menu</a>[*]<a href="expand.html" title="an enlarging unordered list">enlarging 

list</a>[*]link images[*]non-rectangular[*]jigsaw links[*]<a href="circles.html" title="circular links">circular 

links</a>[/list]
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
[*]LAYOUTS
<!--[if lte IE 6]>
<a href="../layouts/index.html">LAYOUTS
<table><tr><td>
<![endif]-->
<ul>[*]Fixed 1[*]Fixed 2[*]Fixed 3[*]Fixed 4[*]minimum width[/list]
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->


[*]BOXES

<!--[if lte IE 6]>
<a href="../boxes/index.html">BOXES
<table><tr><td>
<![endif]-->

<ul>[*]<a href="spies.html" title="a coded list of spies">spies 

menu</a>
[*]<a href="vertical.html" title="a horizontal vertical menu">vertical 

menu</a>[*]<a href="expand.html" title="an enlarging unordered list">enlarging 

list</a>[*]link images[*]non-rectangular[*]jigsaw links[*]<a href="circles.html" title="circular links">circular 

links</a>[/list]

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->


[*]MOZILLA

<!--[if lte IE 6]>
<a href="../mozilla/index.html">MOZILLA
<table><tr><td>
<![endif]-->

<ul>[*]<a href="../mozilla/dropdown.html" title="A drop down menu">drop 

down menu</a>[*]cascading menu[*]content:[*]mozzie box[*]rainbow box
[*]<a href="../mozilla/snooker.html" title="Snooker cue">snooker 

cue</a>[*]<a href="../mozilla/target.html" title="Target Practise">target 

practise</a>[*]<a href="../mozilla/splittext.html" title="Two tone headings">two 

tone headings</a>[*]<a href="../mozilla/shadow_text.html" title="Shadow text">shadow 

text</a>[/list]

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->


[*]EXPLORER

<!--[if lte IE 6]>
<a href="../ie/index.html">EXPLORER
<table><tr><td>
<![endif]-->

<ul>[*]<a href="../ie/exampleone.html" title="Example one">example 

one</a>[*]weft fonts[*]<a href="../ie/exampletwo.html" title="Vertical align">vertical 

align</a>[/list]

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->


[*]OPACITY

<!--[if lte IE 6]>
<a href="../opacity/index.html">OPACITY
<table><tr><td>
<![endif]-->

<ul>[*]<a href="../opacity/colours.html" title="colour wheel">opaque 

colours</a>[*]opaque menu[*]<a href="../opacity/png.html" title="partial opacity">partial 

opacity</a>[*]<a href="../opacity/png2.html" title="partial opacity II">partial 

opacity II</a>[/list]

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->


[/list]
</div>

css:

.menu {font-family: arial, sans-serif; width:106px; height:150px; 

position:relative; margin:0; font-size:11px; margin:50px 0;}
.menu ul li a, .menu ul li a:visited {display:block; 

text-decoration:none; color:#000; width:104px; height:20px; 

text-align:center; border:1px solid #fff; border-width:1px 1px 0 0; 

background:#c9c9a7; line-height:19px; font-size:11px;}
.menu ul {padding:0; margin:0;list-style-type: none; }
.menu ul li {float:left; margin-right:1px; position:relative;}
.menu ul li ul {display: none;}

/* specific to non IE browsers */
.menu ul li:hover a {color:#fff; background:#b3ab79;}
.menu ul li:hover ul {display:block; position:absolute; top:0; 

left:105px; width:105px;}
.menu ul li:hover ul li a.hide {background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover a.hide {width:150px;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#b3ab79; 

color:#000; width:150px;}
.menu ul li:hover ul li a:hover {background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; 

left:151px; top:0; color:#000;}
.menu ul li:hover ul li:hover ul li a {display:block; width:200px; 

background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover ul li a:hover {background:#bd8d5e; 

color:#fff;}

css solo per IE6:

table {border-collapse:collapse; border:0; margin:0; padding:0;}

.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}
.menu ul li a:hover ul li a.hide {display:none;}

.menu ul li a:hover {color:#fff; background:#b3ab79;}
.menu ul li a:hover ul {display:block; position:absolute; top:0; left:105px; width:105px;}
.menu ul li a:hover ul li a.sub {background:#dfc184; color:#000;}
.menu ul li a:hover ul li a {display:block; background:#b3ab79; color:#fff; width:150px;}
.menu ul li a:hover ul li a ul {visibility:hidden;}
.menu ul li a:hover ul li a:hover {background:#dfc184; color:#000;}
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:151px; top:0; color:#000;}
.menu ul li a:hover ul li a:hover ul li a {display:block; width:200px; background:#dfc184; color:#000;}
.menu ul li a:hover ul li a:hover ul li a:hover {background:#bd8d5e; color:#fff;}

[biline]

Gentilissimo gengix per la risposta ....

ho provato a fare come hai scritto, ma non riesco a farlo funzionare al 100% ...

Sinceramente, non sono ancora "un asso" con i CSS

Ho difficoltà a creare il file CSS corretto (IE6).

Per favore, mi puoi aiutare ?

Grazie del sostegno.

[gengix]

Per il css dedicato a IE6 devi utilizzare i commenti condizionali.
Ad esempio qui ti spiegano meglio il concetto:
http://www.webmasterpoint.org/webdes...onali-css.asp.

Un esempio del codice che ti si presenta nel tuo menu può essere questo:

<!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>
<title>Prova menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link rel="stylesheet" media="all" type="text/css" href="cssNormale.css" />

<!--[if lte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="cssPerIE6.css" />
<![endif]-->

</head>
<body>
<div class="menu">
.........
</div>
</body>
</html>

Il primo link è relativo al primo css che ti ho postato, mentre il secondo è relativo al secondo css che ti ho postato, quest'ultimo verrà visto solo da IE.