[Tutorial CSS] Creare Meniu Dublu

#1 de BoGdY
Nume Tutorial: Creare Meniu Dublu cu CSS
Descriere: In acest tutorial puteti invata cum sa creati Meniu Dublu cu CSS (orizontal si vertical).
Download:
Autor: Anonim
Sursa (Link-ul oficial): Nu pot pune!
Propria parere: Nu l-am incercat!
Tutorialul:

Meniu dublu inseamna ca lista meniului contine inca un Meniu cu alte link-uri (denumit si Sub-Meniu).
In general, Meniurile sunt create folosind tag-urile <ul> (sau <ol>) si <li> tags.
- Presupunand ca deja stiti CSS si HTML, aplicati /adaptati codurile prezentate mai jos, personalizandu-le si cu alte elemente CSS, dupa cum doriti sa creati designul (colturi rotunjite, imagini pt. fundal, etc.).

Meniu Vertical Dublu

Meniul vertical este de obicei adaugat in marginile laterale ale paginii.- Codul HTML si CSS de mai jos creaza acest meniu (Proprietatile CSS trebuie adaugate in zona <head>, sau intr-un fisier ".css"):

Cod: Selectaţi tot

<style><!--
#menuv {
 width:200px;
 border:1px solid blue;
 background-color:#daedfe;
 padding:2px;
}

  /* Proprietati pentru primul nivel din meniul vertical */
#menuv li {
 margin:1px 0;
 background-color:#f0f1fe;
 padding:1px;
 list-style-type:none;
 font-weight:600;
 text-align:left;
}
#menuv li a {
 display:block;
 margin:0;
 font-weight:normal;
}
#menuv li a:hover {
 background-color:#fefefe;
 text-decoration:none;
 font-style:oblique;
}

  /* Proprietati pentru nivelul doi din meniul vertical */
#menuv li:hover ul {
 display:block;
}
#menuv li ul {
 display:none;
 position:relative;
 margin:-1px 0 -2px 0;
 padding:1px 0;
}
#menuv li ul li {
 margin:2px 0 0 20px;
 background-color:#edfeed;
 padding:1px 0;
 border:1px dotted yellow;
}
--></style>

<ul id="menuv">
 <li><a href="/" title="Pagina personala">Pagina personala</a></li>
 <li> + Tutorialle CSS
  <ul>
   <li><a href="http://www.marplo.net/curs_css/css3-background-proprietati-noi.html" title="CSS3 - Background proprietati">CSS3 - Background proprietati</a></li>
   <li><a href="http://www.marplo.net/curs_css/css3-opacity.html" title="CSS3 opacity">CSS3 opacity</a></li>
  </ul>
 </li>
 <li> + Tutoriale HTML
  <ul>
   <li><a href="http://www.marplo.net/html/tutorial-html5.html" title="Tutorial HTML5">Tutorial HTML5</a></li>
   <li><a href="http://www.marplo.net/html/html5-canvas.html" title="HTML5 canvas">HTML5 canvas</a></li>
   <li><a href="http://www.marplo.net/html/html5-taguri-noi.html" title="HTML5 tag-uri noi">HTML5 tag-uri noi</a></li>
  </ul>
 </li>
 <li><a href="http://www.marplo.net/coment/contact.php" title="Contact">Contact</a></li>
</ul>
- "Smecheria" la acest Meniu este acest cod (ceea ce face a doua lista UL vizibila cand mouse-ul e deasupra listei LI parinte):

Cod: Selectaţi tot

#menuv li:hover ul {
 display:block;
}
• O alta varianta de meniu vertical dublu.Codul CSS si HTML pt. acest meniu:

Cod: Selectaţi tot

<style><!--
#menuv {
 position:relative;
 width:160px;
 border:1px solid blue;
 background-color:#daedfe;
 padding:2px;
}

  /* Proprietati pentru primul nivel din meniul vertical */
#menuv li {
 margin:1px 0;
 background-color:#f0f1fe;
 padding:1px;
 list-style-type:none;
 font-weight:600;
 text-align:left;
}
#menuv li a, #menuv li span {
 display:block;
 margin:0;
 font-weight:normal;
}
#menuv li a:hover {
 background-color:#fefefe;
 text-decoration:none;
 font-style:oblique;
}

  /* Proprietati pentru nivelul doi din meniul vertical */
#menuv li:hover ul {
 display:block;
}
#menuv li ul {
 display:none;
 position:absolute;
 z-index:9998;
 width:100%;
 left:151px;
 margin:-20px auto 0 auto;
 background-color:#daedfe;
 border:1px dashed blue;
 padding:1px;
}
#menuv li ul li {
 margin:1px;
 background-color:#edfeed;
 padding:1px 0 1px 2px;
}
--></style>

<ul id="menuv">
 <li><a href="/" title="Pagina personala">Pagina personala</a></li>
 <li><span> + Tutorialle CSS</span>
  <ul>
   <li><a href="http://www.marplo.net/curs_css/css3-background-proprietati-noi.html" title="CSS3 - Background proprietati">CSS3 - Background proprietati</a></li>
   <li><a href="http://www.marplo.net/curs_css/css3-opacity.html" title="CSS3 opacity">CSS3 opacity</a></li>
  </ul>
 </li>
 <li><span> + Tutoriale HTML</span>
  <ul>
   <li><a href="http://www.marplo.net/html/tutorial-html5.html" title="Tutorial HTML5">Tutorial HTML5</a></li>
   <li><a href="http://www.marplo.net/html/html5-canvas.html" title="HTML5 canvas">HTML5 canvas</a></li>
   <li><a href="http://www.marplo.net/html/html5-taguri-noi.html" title="HTML5 tag-uri noi">HTML5 tag-uri noi</a></li>
  </ul>
 </li>
 <li><a href="http://www.marplo.net/coment/contact.php" title="Contact">Contact</a></li>
</ul>
- Sub-meniul (#menuv li ul) trebuie sa aibe urmatoarele proprietati CSS, ca sa-l ascunda si sa nu afecteze celelalte liste cand e descoperit (proprietatea z-index:9998; il face sa fie afisat peste celelalte liste).

Cod: Selectaţi tot

display:none;
position:absolute;
z-index:9998;
- In codul CSS al acestui Meniu este important ca selectorul #menu sa aibe definita proprietatea "position" (relative, absolute). Aceasta e necesar ca sa functioneze z-index:9998; (in #menuv li ul) in Internet Explorer.

Meniu Orizontal-Vertical

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.Codul sursa:

Cod: Selectaţi tot

<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.marplo.net/curs_css/css3-background-proprietati-noi.html" title="CSS3 - Background proprietati">CSS3 - Background proprietati</a></li>
   <li><a href="http://www.marplo.net/curs_css/css3-opacity.html" title="CSS3 opacity">CSS3 opacity</a></li>
  </ul>
 </li>
 <li>Tutoriale HTML
  <ul>
   <li><a href="http://www.marplo.net/html/tutorial-html5.html" title="Tutorial HTML5">Tutorial HTML5</a></li>
   <li><a href="http://www.marplo.net/html/html5-canvas.html" title="HTML5 canvas">HTML5 canvas</a></li>
   <li><a href="http://www.marplo.net/html/html5-taguri-noi.html" title="HTML5 tag-uri noi">HTML5 tag-uri noi</a></li>
  </ul>
 </li>
 <li><a href="http://www.marplo.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:

Cod: Selectaţi tot

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:

Cod: Selectaţi tot

position:relative;
clear:both;
width:99%;
Scrie răspuns

Înapoi la “Tutoriale CSS”

Cine este conectat

Utilizatori răsfoind acest forum: Niciun utilizator înregistrat și 1 vizitator