Jak zrobić rozwijane menu

Nie wiem czy pamiętacie, jak napisałam kiedyś wpis o tym, jak zrobić rozwijane menu na podstawie profilki.pl. Ta opcja bez wątpienie jest szybka i nie ma strachu o to, że coś popsujemy. Jednak, słyszałam od Was, że nie zawsze menu ze strony profilki.pl działa poprawnie, dlatego w dzisiejszym wpisie pokażę Wam, jak takie menu wykonać samemu. Nie musicie się o nic martwić, ponieważ będziemy pracować tylko na gadżecie HTML/JavaScript i kodach CSS. Oprócz tego na końcu tego wpisu znajdziecie ankietę, dotyczącą bloga. Bardzo proszę o wypełnienie jej, ponieważ pomoże mi to w usprawnieniu mojej strony.

1. Tradycyjnie przechodzimy do układu naszego bloga. Pamiętajmy o tym, aby usunąć gadżet strony. Układ - dodaj gadżet - HTML/Javascript

2. Wklejamy kod i klikamy "zapisz":

<!-- START MENU -->
<div id='NavMenu'>
<div id='NavMenuleft'>
<ul id='nav'>
<li><a href='LINK'>NAZWA STRONY</a></li>
<li><a href='LINK'>NAZWA STRONY</a></li>
<li><a href='LINK'>NAZWA STRONY</a></li>
<li><a href='#'>KATEGORIE</a>
<ul>
<li><a href='LINK'>PODKATEGORIA</a></li>
<li><a href='LINK'>PODKATEGORIA</a></li>
<li><a href='LINK'>PODKATEGORIA</a></li>
</ul>
</li>
<li><a href='#'>KATEGORIE2</a>
<ul>
<li><a href='LINK'>PODKATEGORIA</a></li>
<li><a href='LINK'>PODKATEGORIA</a></li>
<li><a href='LINK'>PODKATEGORIA</a></li>
</ul>
</li>
</ul></div>
</div>
<!-- KONIEC MENU -->

3. Teraz przechodzimy do szablon - dostosuj - zaawansowane - dodaj arkusz CSS  i wklejamy kod:

/* MENU */
.tabs-inner .section:first-child ul { margin-top: 0px; border: 0 solid #eee; }
.tabs-inner .widget ul { background:#fff;  text-align: center !important;  }
.tabs-inner .widget li a { font-family:'Lato',sans-serif; text-transform: uppercase; font-size:12px;
letter-spacing: 3px; color:#222222; border: 0px solid #ffffff; }
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover { color: #888888;  text-decoration: none; }
.tabs .widget li, .tabs .widget li{ display: inline; float: none;}
#NavMenu {
width: 100%;
height: 45px;
position: relative;
margin: 0 auto;
padding: 0;
}
#NavMenuleft {
width: 100%;
float: none;
margin: 0 auto;
padding: 0;
}
#nav {
margin: 0 auto;
padding: 0;
}
#nav ul {
float: right;
list-style: none;
margin: 0;
padding: 0;
overflow: visible;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #222222;
display: block;
margin: 0;
padding: 15px;
}
#nav li a:hover, #nav li a:active {
color: #888888;
margin: 0;
padding: 15px;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #ffffff;
width: 150px;
color: #222222;
float: none;
margin: 0;
padding: 7px 10px;
text-align:left;
}
#nav li li a:hover, #nav li li a:active {
color: #888888;
padding: 7px 10px;
width:147px;
border-left:3px solid #888888;transition: all 0.3s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;}
#nav li {
float: none;
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
border: 0px solid black;
}
#nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out; }
#nav li ul a { width: 140px;  }
#nav li ul ul { margin: -32px 0 0 171px;  }
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {left: -999em; }
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; }
#nav li:hover, #nav li.sfhover {position: static;}

Analiza kodu:

Wszystkie pogrubione wartości są zmienne!

.tabs-inner .section:first-child ul { margin-top: 0px; border: 0 solid #eee; }
.tabs-inner .widget ul { background:#fff;  text-align: center !important;  } - kolor tła i wyrównanie.tabs-inner .widget li a { font-family:'Lato',sans-serif; text-transform: uppercase; font-size:12px;letter-spacing: 3px; color:#222222; border: 0px solid #ffffff; } - rodzaj fontu, wygląd tekstu (tutaj ustawione na tekst pisany wielkimi literami, jeśli nie chcemy tej opcji w miejsce uppercase wpisujemy none), wielkość fontu, odległość między literami, kolor teksu, grubość, rodzaj i kolor ramki.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover { color: #888888;  text-decoration: none; } - kolor fontu, po najechaniu myszą.tabs .widget li, .tabs .widget li{ display: inline; float: none;}
#NavMenu {
width: 100%;
height: 45px; - wysokośćposition: relative;
margin: 0 auto;
padding: 0;
}
#NavMenuleft {
width: 100%;
float: none;
margin: 0 auto;
padding: 0;
}
#nav {
margin: 0 auto;
padding: 0;
}
#nav ul {
float: right;
list-style: none;
margin: 0;
padding: 0;
overflow: visible;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #222222; - kolor odwiedzonego linkudisplay: block;
margin: 0;
padding: 15px; }
#nav li a:hover, #nav li a:active {
color: #888888; - kolor tekstu po najechaniu mysząmargin: 0;
padding: 15px;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #ffffff;  - kolor tła, rozwijanej części menu width: 150px;
color: #222222; - kolor tekstu, rozwijanej części menu float: none;
margin: 0;
padding: 7px 10px;
text-align:left; - wyrównanie}
#nav li li a:hover, #nav li li a:active {
color: #888888; - kolor tekstu po najechaniu myszą w rozwijanej części menu padding: 7px 10px;
width:147px;
border-left:3px solid #888888; transition: all 0.3s ease-in-out; - efekt (pasek z lewej strony) przy najechaniu myszą na tekst w rozwijanej części menu. Grubość, rodzaj i kolor-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;}
#nav li {
float: none;
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
border: 0px solid black;
}
#nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out; }
#nav li ul a { width: 140px;  }
#nav li ul ul { margin: -32px 0 0 171px;  }
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {left: -999em; }
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; }
#nav li:hover, #nav li.sfhover {position: static;}

4. Efekt końcowy:

Na koniec (tak jak wspomniałam na początku wpisu) chciałabym Was prosić o wypełnienie ankiety, która znajduje się poniżej :)