Menu verticale espandibile a tre livelli

**franco12345678** · 28-11-2010, 20:31

Da html.it ho scaricato questo menu verticale espandibile.
Vi posto il codice

questo il file html:
<link rel="stylesheet" type="text/css" href="jsmenu.css">
<link rel="stylesheet" type="text/css" href="menu.css">
<script>
var prev="null";
window.onload=function(){
if(document.getElementsByTagName && document.getElementById){
document.getElementById("nav").className="jsenable ";
BuildList();
}
}
function BuildList(){
var hs=document.getElementById("nav").getElementsByTag Name("h3");
for(var i=0;i<hs.length;i++){
hs[i].onclick=function(){
if(this.parentNode.className!="show"){
this.parentNode.className="show";
if(prev && prev!=this.parentNode) prev.className="hide";
prev=this.parentNode;
}
else this.parentNode.className="hide";
}
}
}
</script>
</head>
<body>
<div id="nav">
<ul>[*]Pagina 1[*]<h3>Pagina 2</h3>
<ul>[*]Pagina 1_2[*]Pagina 2_2[*]Pagina 3_2[*]Pagina 4_2[/list]
[*]Pagina 3[*]<h3>Pagina 4</h3>
<ul>[*]Pagina 1_4[*]Pagina 2_4[/list]
[/list]
</div>
questo il CSS
div#nav{
width:170px;
margin-left: 30px;
background: #00005A;
border: 1px solid #00005A;
font: 11px Arial, Helvetica, sans-serif
}
div#nav h3{
font-size: 100%;
margin: 0;
padding: 4px 10px;
border-top: 1px solid #FFF;
color: #000;
background-color: #7BA5E7
}
div#nav ul,div#nav li{
margin: 0;
padding: 0;
list-style-type: none
}
div#nav li{
margin: 0 0 1px 0
}
div#nav a{
display: block;
padding-left: 15px;
height: 18px;
line-height: 18px;
border-top: 1px solid #FFF;
background-color: #BDBDBD;
color: #000;
text-decoration: none;
font-weight: bold
}
div#nav a:hover{
color: #00005A;
background-color: #0099FF
}
div#nav ul ul a{
color: #333;
background-color: #AECDFF;
font-weight: normal
}
e questo il JS
var prev="null";
window.onload=function(){
if(document.getElementsByTagName && document.getElementById){
document.getElementById("nav").className="jsenable ";
BuildList();
}
}
function BuildList(){
var hs=document.getElementById("nav").getElementsByTag Name("h3");
for(var i=0;i<hs.length;i++){
hs[i].onclick=function(){
if(this.parentNode.className!="show"){
this.parentNode.className="show";
if(prev && prev!=this.parentNode) prev.className="hide";
prev=this.parentNode;
}
else this.parentNode.className="hide";
}
}
}

Quello che vorrei fare è creare un terzo sottomenu
Ad esempio:
Pagina 2
---Pagina 1 di 2
------Pagina 1 di 1 di 2
------Pagina 2 di 1 di 2
------Pagina 3 di 1 di 2
---Pagina 2 di 2
------Pagina 1 di 2 di 2
------Pagina 2 di 2 di 2
------Pagina 3 di 2 di 2
---Pagina 3 di 2
---Pagina 4 di 2

ecc.

chi mi aiuta?

**Mich_** · 29-11-2010, 10:11

Anzitutto devi imparare ad usare il forum correttamente: il regolamento c'e` anche per non fare la figura di postare una cosa difficilmente capibile (usa i tag VB in modo corretto! - usa il bottone CODE) .

E non capisco perche` hai postato in CSS: il menu proposto funziona tramite Javascript, e quindi qui e` fuori argomento.

Comunque ci sono bellissimi menu realizzati in HTML+CSS (senza JS), che funzionano quindi anche se sul browser dell'utente il JS e` disabilitato.
Trovi vari riferimenti tra i "link utili" - a me ad esempio piace il sito di CSSplay.

**franco12345678** · 01-12-2010, 19:38

Grazie al suggerimento di Mich_ ho trovato questo menù che potrebbe fare al caso mio su Cssplay

codice:

<style type="text/css">
#dlmenu {
	height:1em;
	margin:20px 0 300px 1px;
}
#menu {
	list-style-type:none;
	margin:0 0 10px;
	padding:0;
	position:absolute;
	width:15em;
	background:#fff;
	z-index:100;
}
#menu li {
	display:block;
	padding:0;
	margin:0;
	position:relative;
	z-index:100;
}
#menu li a, #menu li a:visited {
	display:block;
	text-decoration:none;
}
#menu li dd {display:none;}
#menu li:hover, #menu li a:hover {border:0;}
#menu li:hover dt a , #menu li a:hover dt a {
	background:#d4d8bd url(top_grad_2.gif) center center;
	color:#F00;
}
#menu li:hover dd, #menu li a:hover dd {display:block;}
#menu li:hover dl, #menu li a:hover dl {
	height:10em;
	background:#b4be9c url(sub_grad.gif);
}
#menu table {border-collapse:collapse; padding:0; margin:-4px; font-size:1em;}
#menu dl {
	width: 15em;
	margin: 0;
	background: #6f9c6f;
	cursor:pointer;
}
#menu dt {
	margin:0;
	padding: 0;
	font-size: 1.1em;
	border-top:1px solid #cce;
}
#menu dd {
	margin:0;
	padding:0;
	font-size: 1em;
	text-align:left;
}
.gallery dt a, .gallery dt a:visited {
	display:block;
	color:#fff;
	padding:5px 5px 5px 10px;
	background:#949e7c url(top_grad.gif) center center;
}
.gallery dd a, .gallery dd a:visited {
	color:#000;
	min-height:1em;
	text-decoration:none;
	display:block;
	padding:4px 5px 4px 20px;
	background:#b4be9c;
}
* html .gallery dd a, * html .gallery dd a:visited {height:1em;}
.gallery dd a:hover {background:#7aa; color:#ff0;}

</style> <div id="dlmenu"> <ul id="menu">[*]  <dl class="gallery"> 	<dt><a href="../menu/index.html">Home[/url]</dt> </dl>[*]  <dl class="gallery"> 	<dt><a href="index.html">Link 1[/url]</dt> 	<dd>Link 1 di 1</dd> 	<dd>Link 2 di 1</dd> 	<dd>Link 3 di 1</dd> 	<dd>Link 4 di 1</dd>  </dl>[*]   <dl class="gallery"> 	<dt><a href="../layouts/index.html">Link 2[/url]</dt> 	 </dl>[*]  <dl class="gallery"> 	<dt><a href="../mozilla/index.html">Link 3[/url]</dt> 	[/list]</div>  </div>

L'ho modificato per non farla lunga.
In effetti il risultato è questo:

Home
Link 1
....Link 1 di 1
....Link 2 di 1
....Link 3 di 1
....Link 4 di 1
Link 2
Link 3

C'è un modo che creare un terzo livello che mi dia questo risultato:

Home
Link 1
....Link 1 di 1
....Link 2 di 1
........Link 1 di 2 di 1
........Link 2 di 2 di 1
........Link 2 di 2 di 1
....Link 3 di 1
....Link 4 di 1
Link 2
Link 3

Mi serve in questo modo perchè ho la colonna sinistra dove deve andare il menù di misure fisse.

**Mich_** · 02-12-2010, 10:27

Prova a vedere se c'e` un menu a tre o piu` livelli che fa al caso tuo.

Metter mano ad un menu non e` cosi` semplice (invece cambiare dimensioni e colori e` molto piu` agevole)

**franco12345678** · 02-12-2010, 17:54

Purtropo dopo estenuanti ricerche non sono riuscito a trovarne nessuno con solo i CSS.
Se hai qualche limk te ne sarei grato.
Ciao

**Mich_** · 02-12-2010, 18:54

Ho provato a cercarne anch'io , ma ora non riesco a trovarne.

Allora occorre studiare la logica del menu di cui sopra, e replicarla per il terzo livello.

Anzitutto hai postato il CSS corerttamente, ma l'HTML e` illeggibile.
Devi usare le indentazioni correttamente, sia per farti capire da altri e sia per evitare errori.

Tieni presente che stai lavorando su un codice delicato, ogni modifica ha degli effetti (a volte anche invisibili), ed ogni errore ha degli effetti collaterali che potresti non vedere subito. Per questo e` importante andare molto lentamente (una modifica alla volta) ed essere consci di quello che si fa (cosa che e` impossibile se il codice non e` ben formattato).

Comunque anzitutto devi capire la logica del codice HTML:
Per iniziare lascia perdere le modifiche per IE6: se saranno necessarie si possono inserire anche dopo.

Ma quale menu hai scelto?
Tieni presente che i menu di CSSplay hanno un copyright (in questi casi chiamato anche copyleft). E` una violazione del copyright non soddisfare i requisiti di tale copyright, perseguibile anche penalmente. Nella fattispecie copiare il codice senza inserire la nota di copyright.

Comunque io ho visto il menu:
http://www.cssplay.co.uk/menus/flyout2.html
che e` a 4 livelli,

L'unica differenza rispetto al tuo e` che i sottolivelli vengono posizionati a destra.
Per spostarli si deve lavorare sul posizionamento: in pratica non servono tutti i posizionamenti, e si deve lavorare sul display: none / block; anziche` sul visibility:hidden/visible;
Solo sui livelli piu` interni occorre aggiunfgere un magine o un padding sinistro se si vuole che si veda uno spostamento

Invece non sono riuscito a seguire la logica del menu postato: non capisco perche` abbia usato le liste di definizione (di solito nei menu non servono, ma occorre capire che tipo di menu e`).

PS: se poi vuoi che qualcuno ti possa aiutare in una cosa complessa come correggere un menu, e` necessario che la pagina sia in rete, in modo da poter vedere tutto il codice HTML e CSS e contemporaneamente vederne il funzionamento.
Se non hai un tuo sito o non vuoi esporlo alle prove (cosa comprensibile), fatti un sito presso un provider gratuito, che poi alla fine potrai cancellare/abbandonare.

Discussione: Menu verticale espandibile a tre livelli

Strumenti discussione

Ricerca discussione

Visualizza

Menu verticale espandibile a tre livelli

Permessi di invio