Korzystając z modułu RokNavMenu, wykonanego przez zespół RocketTheme, bardzo spodobał mi nie pomysł na prezentację tego dodatku, a mianowicie, po najechaniu kursorem na pozycję w menu, tło pod nią, płynnie przesuwało się do wskazanego przez nas miejsca. Efekt ten nie jest trudno otrzymać, dlatego postanowiłem Wam go pokazać. Wykorzystamy w tym celu biblioteki jQuery. A więc do pracy!
Na początku pobierzmy paczkę z potrzebnymi plikami z naszej Pobieralni.
W sekcji HEAD naszego dokumentu (x)html wstawmy następującą treść:
1 2 3 4 | <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.dimensions.js"></script> <script type="text/javascript" src="jquery.ahover.js"></script> <script type="text/javascript">jQuery(function($) {$('ul.menu li').ahover();});</script> |
Następnie ustawmy odpowiedni kod CSS aby sformatować nasze menu:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | ul.menu { clear: both; list-style: none; position: relative; } ul.menu li { position: relative; z-index: 200; float: left; padding: 5px; } div.ahover { background: gold; border: 1px solid silver; position: absolute; } |
W części BODY musimy umieścić zwyczajną listę:
1 2 3 4 5 6 | <ul class="menu"> <li><a href="https://webroad.pl">Kortas.info</a></li> <li><a href="https://webroad.pl">WEBroad.pl</a></li> <li><a href="https://webroad.pl">Strona 3</a></li> <li><a href="https://webroad.pl">Inna strona</a></li> </ul> |
Efekt działa na wszystkich wiodących przeglądarkach. W IE od wersji > 6.5
Jak zmienić kolory czcionki w menu , żeby opcje menu nie były podkreślone i miały określony kolor?
.menu li a {color: red; text-decoration: none;}
Oczywiście tam gdzie „red” można wstawić swój kolor.
mógł byś mi powiedzieć czy jest jakaś różnica pomiędzi (x) html a html. a tak poza tym to jestem całkiem zielony w tym temacie niedawno zacząłem uczyć się javascrypt-u ale potrzebuję jakiegoś turtolialu do nauki robienia menu poziomego rozwijanego dla osób kompletnie zielonych w tym temacie mógł byś taki artykuł stworzyć lub polecić jakąś dobrą stronkę z góry dziękuję.