Meniu Orizontal-Vertical 4
Meniul orizontal-vertical este un meniu cu lista afisata pe o linie orizontala, iar fiecare lista poate sa contina un alt meniu cu liste verticale, care este initial ascuns, si afisat cand mouse-ul e pe textul /imaginea din lista orizontala.
– Demonstratie (mutati cursorul mouse-ului peste Menu):
- Pagina personala
- Tutorialle CSS
- Tutoriale HTML
- Contact
– Codul sursa:
<style><!–
#menuv {
position:relative;
padding:2px;
}
/* Proprietati pentru lista orizontala */
#menuv li {
float:left;
margin:1px 8px;
border:1px solid blue;
background-color:#daedfe;
padding:1px 2px;
list-style-type:none;
font-weight:600;
text-align:left;
text-decoration:nderline;
}
/* Proprietati pentru listele verticale */
#menuv li:hover ul {
display:block;
}
#menuv li ul {
display:none;
position:absolute;
margin:1px auto 1px -8px;
background-color:#f0f1fe;
border:1px dashed blue;
padding:1px;
}
#menuv li ul li {
position:relative;
clear:both;
width:99%;
margin:1px 0;
border:none;
background-color:#edfeed;
padding:1px;
}
/* Link-uri in sub-menu */
#menuv ul li a {
display:block;
margin:0;
font-weight:normal;
padding:1px;
}
#menuv ul li a:hover {
background-color:#fefefe;
text-decoration:none;
font-style:oblique;
}
–></style>
<ul id=”menuv”>
<li><a href=”/” title=”Pagina personala”>Pagina personala</a></li>
<li>Tutorialle CSS
<ul>
<li><a href=”http://www.cursCSS.net/curs_css/css3-background-proprietati-noi.html” title=”CSS3 – Background proprietati”>CSS3 – Background proprietati</a></li>
<li><a href=”http://www.cursCSS.net/curs_css/css3-opacity.html” title=”CSS3 opacity”>CSS3 opacity</a></li>
</ul>
</li>
<li>Tutoriale HTML
<ul>
<li><a href=”http://www.cursCSS.net/html/tutorial-html5.html” title=”Tutorial HTML5″>Tutorial HTML5</a></li>
<li><a href=”http://www.cursCSS.net/html/html5-canvas.html” title=”HTML5 canvas”>HTML5 canvas</a></li>
<li><a href=”http://www.cursCSS.net/html/html5-taguri-noi.html” title=”HTML5 tag-uri noi”>HTML5 tag-uri noi</a></li>
</ul>
</li>
<li><a href=”http://www.cursCSS.net/coment/contact.php” title=”Contact”>Contact</a></li>
</ul>
In codul CSS al acestui Meniu sunt importante urmatoarele proprietati:
– #menuv li trebuie sa contina aceasta proprietate ca sa aseze listele pe linie orizontala:
float:left;
– Sub-meniul (#menuv li ul) trebuie sa aibe aceste proprietati CSS, ca sa-l ascunda si sa nu afecteze celelalte liste cand e afisat.
display:none;
position:absolute;
– Listele din sub-meniu (#menuv li ul li) trebuie sa aibe aceste proprietati CSS, care anleaza efectul lui: float:left; mostenit de la lista LI parinte, si sa aibe o lungime corespunzatoare:
position:relative;
clear:both;
width:99%;