Creare Meniu Dublu

Meniu Orizontal-Vertical

In acest tutorial puteti invata cum sa creati Meniu Dublu cu CSS (orizontal si vertical).
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.
Iata un exemplu simplu (mutati cursorul mouse-ului pe el):

Pagina personala
+ Tutorialle CSS
- CSS3 - Background proprietati
- CSS3 opacity
+ Tutoriale HTML
- Tutorial HTML5
- HTML5 canvas
- HTML5 tag-uri noi
Contact

- Codul HTML si CSS de mai jos creaza acest meniu (Proprietatile CSS trebuie adaugate in zona <head>, sau intr-un fisier ".css"):

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

#menuv li:hover ul {
 display:block;
}

• O alta varianta de meniu vertical dublu:

Pagina personala
+ Tutorialle CSS
- CSS3 - Background proprietati
- CSS3 opacity
+ Tutoriale HTML
- Tutorial HTML5
- HTML5 canvas
- HTML5 tag-uri noi
Contact

- Codul CSS si HTML pt. acest meniu:

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

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.
- Demonstratie (mutati cursorul mouse-ului peste Menu):

Pagina personala
Tutorialle CSS
- CSS3 - Background proprietati
- CSS3 opacity
Tutoriale HTML
- Tutorial HTML5
- HTML5 canvas
- HTML5 tag-uri noi
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="https://marplo.net/css/css3-background-proprietati-noi" title="CSS3 - Background proprietati">CSS3 - Background proprietati</a></li>
 <li><a href="https://marplo.net/css/css3-opacity" title="CSS3 opacity">CSS3 opacity</a></li>
 </ul>
 </li>
 <li>Tutoriale HTML
 <ul>
 <li><a href="https://marplo.net/html/tutorial-html5.html" title="Tutorial HTML5">Tutorial HTML5</a></li>
 <li><a href="https://marplo.net/html/html5-canvas.html" title="HTML5 canvas">HTML5 canvas</a></li>
 <li><a href="https://marplo.net/html/html5-taguri-noi.html" title="HTML5 tag-uri noi">HTML5 tag-uri noi</a></li>
 </ul>
 </li>
 <li><a href="https://marplo.net/contact" 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%;

<<-Pseudo-elemente -- Butoane pentru link-uri folosind ..->>

Un Test simplu in fiecare zi

HTML

CSS

JavaScript

PHP-MySQL

Engleza

Spaniola

Ce tag se foloseste pentru a adauga liste in elemente <ul> si <ol>?

<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://www.marplo.net/html/</li>
</ul>

Care valoare a proprietatii "display" seteaza elementul ca tip bloc si afiseaza un punct in fata?

block list-item inline-block

.some_class {
  display: list-item;
}

Care instructiune JavaScript transforma un obiect in sir JSON.

JSON.parse() JSON.stringify eval()

var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}

Indicati clasa PHP folosita pentru a lucra cu elemente HTML si XML in PHP.

stdClass PDO DOMDocument

$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net

Indicati forma de Prezent Continuu a verbului "to live" (a trai /a locui)

lived living liveing

I`m living here.
- Traiesc /Locuiesc aici.

Care este forma de Gerunziu (sau Participiu Prezent) a verbului "vivir" (a trai /a locui)?

vivió vivido viviendo

Estoy viviendo aquí.
- Traiesc /Locuiesc aici.