Instrukcja na rozwijane menu (Lydia)

TYTUŁ MENU

Tytuł 1FacebookYTBloggerMailLand of Grafic

*podgląd live*

Instrukcja stworzona na prośbę z aska. Jeśli macie pomysł na instrukcję, jesteście ciekawi jakiegoś efektu - śmiało tam piszcie :).

Efekt wymaga od nas stworzenia linków w widgecie HTML/Java Script. Stwórz taki widget, a następnie wklej do niego:

<div id="menu">
<div class="tytuł">
<b>TYTUŁ MENU</b>
</div>
<a href="http://link.pl">Tytuł 1</a><a href="https://www.facebook.com/">Facebook</a><a href="https://www.youtube.com/?hl=pl&gl=PL">YT</a><a href="http://blogger.com/">Blogger</a><a href="https://mail.google.com/mail/u/0/?hl=pl#inbox">Mail</a><a href="http://land-of-grafic.blogspot.com/">Land of Grafic</a></div>

menu - selektor całego widgetu
tytuł - selektor tytułu menu
TYTUŁ MENU - napis, który ma być widoczny jako tytuł menu
Część kursywą to pojedyncze linki. Każdy został stworzony według schematu:

<a href="http://link.pl">Tytuł 1</a>

Oczywiście liczba linków zależy od nas. Powyższy schemat należy powielić tyle razy, ile linków masz.

Następnie wejdź Szablon > Dostosuj > Zaawansowane > Dodaj arkusz css i wklej:

#menu {
height:14px; /*wysokość menu w wersji początkowej*/
overflow: hidden; /*sprawia, że nie pojawia się pasek przewijania*/
transition: all 1s ease-out;
-o-transition: all 1s ease-out;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;}

#menu:hover {
height:250px; /*wysokość menu po najechaniu na nie kursorem myszy*/
transition: all 1s ease-out;
-o-transition: all 1s ease-out
;-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;}

.tytul {
text-align: center; /*wyśrodkowanie tekstu*/
width: 130px; /*szerokość*/
background:#B62580; /*kolor tła*/
color:#fff; /*kolor czcionki*/
font-family: Verdana;text-transform: uppercase; font-size: 10px; /*dostosowania tekstu, mogą być dowolne*/}

#HTML4 a:link, #HTML4 a:visited { /*linki, które się rozwijają*/
margin:1px 15px;
display:block; /*każdy następny link jest pod poprzednim, a nie obok*/
text-align: center;
width: 100px;
background:#E97D3A;
color: #000;
font-family: Verdana;text-transform: uppercase; font-size: 10px !important;}

#HTML4 a:hover { /*rozwinięte linki po najechaniu kursorem myszy*/
background: #29186E !important;
color: #fff !important;}

Wszelkie objaśnienia zamieściłam w kodzie. W razie pytań śmiało piszcie!