niedziela, 23 października 2011

Mini Menu wysuwane

<ul id="Petersoni_menu"><li><div><script>$(function() { $("#panel").css("left", "-70px"); $(".slide_button").toggle(function() { $("#panel").animate({ left: "1140px" }, 500); $(this).addClass("zamknij"); return false; }, function() { $("#panel").animate({ left: "-70px" }, 500); $(this).removeClass("zamknij"); return false; });});</script><div id="panel" style="left: 0px; "> <ul id="main_menu"> <li><a href="http://poszkole.pl/strona">Strona</a></li> <li><a href="http://poszkole.pl/strona/komponenty">Komponenty</a></li> <li><a href="http://poszkole.pl/przyjaciele">Przyjaciele</a></li> <li><a href="http://poszkole.pl/klasy">Klasy</a></li> <li><a href="http://poszkole.pl/grupy">Grupy</a></li> <li><a href="http://poszkole.pl/galerie">Galerie</a></li> <li><a href="http://poszkole.pl/wiadomosci">Wiadomości</a></li> <li><a href="http://poszkole.pl/profil">Profil</a></li> </ul> <a href="#" class="slide_button zamknij">Menu</a></div><style>#panel{ background:url(LINK); border: 3px inset #AAAAAA; padding: 8px; width: 70px; position: fixed; margin-top: -200px; left: 0px; top: 50%; }ul#main_menu{ list-style: none; }#main_menu a{ font: bold 13px Arial; color: #ffffff; text-decoration: none;}#main_menu a:hover{ text-decoration: underline;}#panel{box-shadow: 0 0 5px 2px #ffffff;}.slide_button { background: url(LINK); display: block; height: 63px; text-indent: -9999px; width: 15px;  position: absolute; right: -18px; top: 0px;}.zamknij { background-position: -16px 0px; } a:focus { outline:none; } </style></div>

Tekst jaki dajecie, aby podpisać załącznik do m.in. strony, grup itd.

Link zdjecia do przesuwanego paska, np:http://s2.ifotos.pl/img/meni-pasd_hqsasep.png

Link tła do menu

Kolor tekstu

Wielkość podświetlenia

Kolor podświetlenia


Ustawiacie odległość. Czyli ile wysunie się mini menu w prawą strone









Po naciśnięciu na pasek ,,nawigacji''