Piękna boczna nawigacja

Piękna boczna nawigacja: CSS i jQuery Tutorial

Beautiful Slide Out Navigation: A CSS and jQuery Tutorial

Artykuł pochodzi z CODROPS

Ostatnio znalazłem dość ciekawe menu. Boczne inne niż wszystkie. Dziś spróbuje się zwami nim podzielić.

 

Głóne zdjęcie

Zobacz Live Demo

Jeżeli demo was zainteresowało to bierzemy się do pracy.

1. Struktura HTML

Ustalamy prostą nawigację pamiętając o używaniu ID ponieważ będzie potrzebne przy javaScript

<ul id="navigation">
 <li class="home"><a title="Home"></a></li>
 <li class="about"><a title="About"></a></li>
 <li class="search"><a title="Search"></a></li>
 <li class="photos"><a title="Photos"></a></li>
 <li class="rssfeed"><a title="Rss Feed"></a></li>
 <li class="podcasts"><a title="Podcasts"></a></li>
 <li class="contact"><a title="Contact"></a></li>
</ul>

2. Kodowanie CSS

Najpierw musimy zakodować style dla listy:

ul#navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 10px;
    left: 0px;
    list-style: none;
    z-index:9999;
}

Nawigacja powinna być zawsze dostępna dla użytkownika nawet podczas przesuwania strony.  Ten proglem rozwiązuje nam parametr position z opcją fixed. Aby Nawigacja była w odpowiednim miejscu ustawiamy parametry Margin i Padding na 0px . Teraz należy ustawić naszą nawigację nad wszystkimi innymi elementami dla tego też ustawiamy parametr z-index na najwyższą wartość 9999.

Teraz możemy zająć się kodowaniem elementów listy

ul#navigation li {
    width: 100px;
}

Dla linków w liście nawigacji ustawiamy następujące style

ul#navigation li a {
    display: block;
    margin-left: -85px;
    width: 100px;
    height: 70px;
    background-color:#CFCFCF;
    background-repeat:no-repeat;
    background-position:center center;
    border:1px solid #AFAFAF;
}

Dla parametru Margin-left ustawiamy -85 px ponieważ chcemy ukryć tylko ikony a nie całą nawigację.

schowane icony

W części JavaScript zdefiniujemy opcję wysuwania się tej navigacji. Lecz najpierw dodajmy coś co IE nie lubi, tzn. zaokrąglenia :D

ul#navigation li a {
    display: block;
    margin-left: -85px;
    width: 100px;
    height: 70px;
    background-color:#CFCFCF;
    background-repeat:no-repeat;
    background-position:center center;
    border:1px solid #AFAFAF;
    -moz-border-radius:0px 10px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
}

Aby były jeszcze bardziej realne, dodajmy trochę opacity, tak aby treść poniżej była widoczna:

ul#navigation li a {
    display: block;
    margin-left: -85px;
    width: 100px;
    height: 70px;
    background-color:#CFCFCF;
    background-repeat:no-repeat;
    background-position:center center;
    border:1px solid #AFAFAF;
    -moz-border-radius:0px 10px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
    opacity: 0.6;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}

Na koniec nadajemy poszczególnym linkom ich ikony. Najlepsze icony znadziecie na portalu DryIcons. Polecam icony z 4 stron: 1, 2, 3 i 4.

ul#navigation .home a{
    background-image: url(../images/home.png);
}
ul#navigation .about a      {
    background-image: url(../images/id_card.png);
}
ul#navigation .search a      {
    background-image: url(../images/search.png);
}
ul#navigation .podcasts a      {
    background-image: url(../images/ipod.png);
}
ul#navigation .rssfeed a   {
    background-image: url(../images/rss.png);
}
ul#navigation .photos a     {
    background-image: url(../images/camera.png);
}
ul#navigation .contact a    {
    background-image: url(../images/mail.png);
}

I oto całe potrzebne CSS teraz zajmiemy się JavaScript aby tchnąć w naszą nawigację odrobinę życia.

3. Kodowanie JavaScript

Używamy jQuery, zrobimy tak aby ikony pokazywały się zawsze kiedy najedziemy na dany element listy. Pamiętaj, elementy listy same w sobie mają szerokość 100 px, tylko elementy linku są wypychane na zewnątrz strony tak aby nie były widoczne.

Musimy zdefiniować następującą funkcję (przed końcem body tag [</body>]) to spowoduje wykonanie funkcji kiedy nadjedziemy nad li:

$(function() {
 $('#navigation > li').hover(
  function () {
   $('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
  },
  function () {
   $('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
  }
 );
});

A więc, najeżdżając na dany element dostaniemy lewy margin na -2 px, dodatkowo pięknie się animuje, nie za wolno i płynnie (200 milisekund). Odsuwając myszkę na zewnątrz menu element z powrotem wraca na swoją starą pozycje lewy margin -85 px. Funkcja stop() “stops all the currently running animations on all the specified elements”  która nadaje nam piękny efekt zatrzymania w przypadku szybkiego najeżdżania na wszystkie elementy. (bez tej funkcji całe menu będzie pływało aż wykona wszystkie wywołania).

Teraz na prawdę miło by było sprawić aby użytkownik miał świadomość istnienia tak niesamowitej nawigacji na jego stronie. W tej chwili, użytkownik ledwo widzi małe szare obramowania wystające z poza strony. Czy może być coś lepszego od pokazania całej nawigacji krótko przez załadowaniem się strony? I to właśnie zrobimy.

Tak więc, celowo, sprawimy aby nawigacja pojawiła się. Do tego celu zmienimy lewy margin elementu linku:

ul#navigation li a {
    display: block;
    margin-left: -2px;
    width: 100px;
    height: 70px;
    background-color:#CFCFCF;
    background-repeat:no-repeat;
    background-position:center center;
    border:1px solid #AFAFAF;
    -moz-border-radius:0px 10px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
    opacity: 0.6;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}

I dodamy następującą linię na początku funkcji JavaScript:

$(function() {
 
 $('#navigation a').stop().animate({'marginLeft':'-85px'},1000);
 
 $('#navigation > li').hover(
  function () {
   $('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
  },
  function () {
   $('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
  }
 );
});

W tej linii zdefiniowaliśmy margin wszystkich elementów listy powinien dostać wartość -85 px na czas 1 sekundy. Dzięki temu pokazujemy nawigację a JavaScript ją ukryje.

I to wszystko!

Jeśli jesteś fanatykiem cieni, możemy dodać poniższe linie do swojego CSS:

ul#navigation li a {
    display: block;
    margin-left: -2px;
    width: 100px;
    height: 70px;
    background-color:#CFCFCF;
    background-repeat:no-repeat;
    background-position:center center;
    border:1px solid #AFAFAF;
    -moz-border-radius:0px 10px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
    -moz-box-shadow: 0px 4px 3px #000;
    -webkit-box-shadow: 0px 4px 3px #000;
}

Dodanie boxów cienia i usuwając parametr opacity, nadamy naszej nawigacji wygląd 3D. Zostawiając parametr opacity wygląd będzie nadal fajny, wypróbujcie to sami i bawcie się dobrze!

Komentarze

Uwaga - Konta gości nie są zatwierdzane na bieżąco!