JavaScript

Menu poziome + przesuwające się tło

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ść:

<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:

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ę:

<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

ZOBACZ DEMO

komentarze 3

  • Awatar
    Nicko

    26 grudnia 2012 23:22

    Jak zmienić kolory czcionki w menu , żeby opcje menu nie były podkreślone i miały określony kolor?

    Odpowiedz
    • Awatar
      Michał Kortas

      26 grudnia 2012 23:25

      .menu li a {color: red; text-decoration: none;}

      Oczywiście tam gdzie „red” można wstawić swój kolor.

      Odpowiedz
  • Awatar
    Michal Jaracz

    7 czerwca 2014 10:30

    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ę.

    Odpowiedz

Zostaw odpowiedź