Funkcjonalna i efektowna nawigacja w jQuery

Autor: Tomasz "DoMeL" Wojciechowski, dodano: 26-04-2010
Kategoria: Programowanie i tworzenie

Nawigacja to jeden z ważniejszych elementów na stronie. Jej celem powinno być przede wszystkim ułatwienie poruszania się pomiędzy stronami. Czasami autorzy stron zapominają jednak w jakim celu jest budowana - stawiają wygląd nad funkjonalnością. Poniżej przedstawiona nawigacja, zbudowana z małą pomocą jQuery, łączy oba te aspekty - jest funkcjonalna oraz miła dla oka.

Download

Do wykonania nawigacji potrzebujemy:

  • jquery-1.4.2.min.js (biblioteka jQuery, niezbędna do wykonania naszej nawigacji, zapisz jako..);
  • navi.js (skrypt odpowiedzialny za odpowiednie działanie);
  • navi.css (nadanie stylu naszej nawigacji).
 
Wszystkie pliki umieszczamy w katalogu gdzie znajduje sie nasz index. Pierwszym krokiem jest osadzenie naszych skryptów, a więć w sekcji <head> wstawiamy poniższy kod:
 
<script type="text/javascript"src="jquery-1.4.2.min.js"></script>
<script type="text/javascript"src="navi.js"></script>
<link rel="stylesheet" href="navi.css" type="text/css" />
 
To wszystko, sekcję <head> możemy dać w niepamięć. Teraz musimy stworzyć szkielet naszej nawigacji. W sekcji <body> wklejamy: 
 
<div class="container">
    <ul id="topnav">
      <li>
        <a href="#">Link</a>
        </li>
        <li>
         <a href="#">Menu z podmen</a>
          <span>
            <a href="#">Podmenu 1</a> &bull;
            <a href="#">Podmenu 2</a> &bull;
            <a href="#">Podmenu 3</a> &bull;
            <a href="#">Podmenu 4</a> &bull;
            <a href="#">Podmenu 5</a>
          </span>
        </li>
        <li>
         <a href="#">Drugie menu z podmenu</a>
            <span>
              <a href="#">Podmenu 1</a> &bull;
              <a href="#">Podmenu 2</a> &bull;
              <a href="#">Podmenu 3</a> &bull;
              <a href="#">Podmenu 4</a>
            </span>
        </li>
        <li>
         <a href="#">Link</a>
        </li>
        <li>
          <a href="#">Trzecie menu z podmen</a>
            <span>
              <a href="#">Podmenu 1</a> &bull;
              <a href="#">Podmenu 2</a> &bull;
              <a href="#">Podmenu 3</a>
            </span>
        </li>
      </ul>
    </div>
 
Co oznacza "&bull" przy każdym podmenu? Otóz użylismy jej tylko i wyłącznie do celów wizualnych. Nadaje ona przy każdym podmenu kropeczkę (&bull;). Uwaga! Jesli zdecydujemy sie już na nasza kropeczkę nie stawiamy jej przy ostatnim podmenu, przykład ponizej:
 
            <span>
              <a href="#">Podmenu 1</a> &bull;
              <a href="#">Podmenu 2</a> &bull;
              <a href="#">Podmenu 3</a> &bull;
            </span>
 
HTML mamy już za soba. Ostatnim krokiem jest ostylowanie naszego menu. Do pliku odpowiedzialnego za style (w naszym przypadku navi.css) wklejamy poniższy kod:
 
body {
  background-color: #FDFDFB;}

.container {
  width: 600px; 
  margin: 0 auto; 
  margin-top: 40px;
  font: 10px normal Verdana, Arial, Helvetica, sans-serif;}

ul#topnav {
  margin: 0; padding: 0;
  float: left;
  width: 600px;
  list-style: none;
  position: relative;
  font-size: 1.2em;
  background-color: #454545;}

ul#topnav li {
  float: left;
  margin: 0; padding: 0;
  border-right: 1px solid #555;}

ul#topnav li a {
  padding: 10px 15px;
  display: block;
  color: #f0f0f0;
  text-decoration: none;}

ul#topnav li:hover {
  background: #3E489F;}

ul#topnav li span {
  float: left;
  padding: 5px 0;
  position: absolute;
  left: 0; top:35px;
  display: none;
  width: 600px;
  background: #3E489F;
  color: #fff;
  -moz-border-radius-bottomright: 5px;
  -khtml-border-radius-bottomright: 5px;
  -webkit-border-bottom-right-radius: 5px;
  -moz-border-radius-bottomleft: 5px;
  -khtml-border-radius-bottomleft: 5px;
  -webkit-border-bottom-left-radius: 5px;}

ul#topnav li:hover span { 
  display: block;}

ul#topnav li span a { 
  display: inline;}

ul#topnav li span a:hover {
  text-decoration: underline;}
 

Co musimy wiedzieć o kodzie odpowiedzialnym za style?

ul#topnav
width: 600px; - szerokość naszej nawigacji;
margin: 0; padding: 0; - wyśrodkowanie;
background-color: #454545; - kolor tła pod menu (w naszym przypadku szary)
 
ul#topnav li
float: left; - wyśrodkowanie lewostronne (dotyczy tekstu);
border-right: 1px solid #555; - pozioma kreska (szara) oddzielająca nasze kategorie w menu
 
ul#topnav li:hover
background: #3E489F; - kolor tła naszego podmenu (w naszym przypadku odcień niebieskiego)
 
ul#topnav li span
float: left; - wyśrodkowanie lewostronne podmenu (dotyczy tekstu);
width: 600px; - szerokość naszego podmenu;
background: #3E489F; - kolor tła naszego podmenu (w naszym przypadku odcień niebieskiego);
color: #fff; - kolor czcionki podmenu;
 
ul#topnav li span a:hover
text-decoration: underline; - podkreslenie tekstu w podmenu po najechaniu
 
 
W naszym kodzie możemy również zauważyć rzadko spotykane atrybuty CSS, które odpowiadają za poprawne ustawienie tekstu na stronie:
 
-moz-border-radius-bottomright: 5px;
  -khtml-border-radius-bottomright: 5px;
  -webkit-border-bottom-right-radius: 5px;
  -moz-border-radius-bottomleft: 5px;
  -khtml-border-radius-bottomleft: 5px;
  -webkit-border-bottom-left-radius: 5px
 

Efekt końcowy

To wszystko, nasza nawigacja prezentuje się następująco:
 
 
Ocena 2.69/5 (53.74%) (444 głosów)

Komentarze:

  • ...
    Dodał: Dex data: 2010-04-26
    No artykuł strasznie nie dopracowany!

    Po pierwsze takie menu można bez problemu na samym CSS zrobić...

    border-radius... gdzie on?
    Są tylko wersje dla moz i webkit a dla np. Opery?

    I jeszcze w dodatku nie skompresowany jquery-1.4.2.min.js, i traci się kilka cennych kilobajtów...

  • Dodał: Gość data: 2010-04-26
    Ale masz napisane, że jest to wykonane w jQuery. Twoim tokiem rozumowania, po co robić formularze kontaktowe skoro można list napisać?

  • Dodał: Dex data: 2010-04-28
    Twoim tokiem rozumowania to może by to zrobić na Flash, albo w PHP od razu!

    Szkoda gadać...
  • @ Dex
    Dodał: Dawid Kulbaka data: 2010-04-28
    Mi się wydaje, że tu nie chodzi o podanie gotowego rozwiązania, ale naukę, o wprowadzenie do jquery...

    co za co odpowiada i co dlaczego z czym działa...

    Teraz pokazujemy jak działa to w jquery, a innym razem zrobimy to w css..

  • Dodał: Bartek Bilicki data: 2010-04-29
    tutorial to nie miejsce na dawanie gotowych rozwiązań na tacy ;) Kto chce to sam dopracuje sobie powyższy przykład, bądź po prostu wykorzysta go inaczej :) pozdrawiam

  • Dodał: Krzysztof data: 2010-05-03
    W PHP takiego menu raczej nie napiszesz cwaniaku. Artykuł na 4, gratulacje

  • Dodał: Gość data: 2010-06-19
    bardzo dobry tekst. Do tych którzy twierdzą że takie menu można zrobić w CCS czy PHP - syrenka tez można dojechać do Gdańska na wakacje. Powodzenia.

  • Dodał: Zainteresowany data: 2010-08-24
    Moim zdaniem super.
    Łatwo szybko i na temat :)

  • Dodał: Gość data: 2010-09-03
    Prośba.
    Jeżeli ktoś zrozumiał działanie jQuery corner, może napisze artykuł w którym spróbuje zaokrąglić rogi bez funkcji CSS-a takich jak : moz-border-radius. Np w tym menu..

  • Dodał: Gość data: 2010-12-09
    Panowie przecież to menu działa tak samo z plikiem jquery i bez tego pliku. Usuńcie sobie linijkę z heada ktory wywoluje jquery i zobaczcie jaka jest roznica... żadna? no własnie to jakie zastosowanie tutaj ma jquery ?


Dodaj komentarz:


Temat:
Twój nick:
Komentarz:
 

Prosimy o kulturę wypowiedzi. Komentarze zawierające niecenzuralne zwroty, bądź obrażające inne osoby będą usuwane. Kod HTML w wypowiedziach jest niedozwolony. Wydawca nie odpowiada za treść komentarzy.