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ę (•). 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.52/5 (50.39%) (127 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:

Poprzedni Następny

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.

Menu

Dla webmastera