Funkcjonalna i efektowna nawigacja w jQuery

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.

Zawartość

Download Co musimy wiedzieć o kodzie odpowiedzialnym za style?Efekt końcowy

Download

Do wykonania nawigacji potrzebujemy:

(biblioteka jQuery, niezbędna do wykonania naszej nawigacji, zapisz jako..);
(skrypt odpowiedzialny za odpowiednie działanie);
(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 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> &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 lifloat: left; – wyśrodkowanie lewostronne (dotyczy tekstu);

border-right: 1px solid #555; – pozioma kreska (szara) oddzielająca nasze kategorie w menu

ul#topnav li:hoverbackground: #3E489F; – kolor tła naszego podmenu (w naszym przypadku odcień niebieskiego)

ul#topnav li spanfloat: 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:hovertext-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