Połącz się z nami

Internet Maker

Animowane Menu w CSS 3

Opublikowane

dnia

W tym tutorialu będziemy używać efektów oraz przejść CSS3, aby zbudować ciekawe menu nawigacyjne. Co ważne, odbędzie się to bez użycia JavaScript. Menu, które tu powstanie dodaje stylu Twojej stronie bądź templatce. Będziemy tu używać takich przydatnych poleceń jak chociażby :target czy :after.

  

HTML

Pierwszym krokiem powinno być zbudowanie szkieletu strony w HTML. Jako, że będziemy używać znaczników HTML5, musimy w sekcji head dodać wsparcie HTML5 dla Internet Explorera. Polecenie to zostało zamknięte w komentarzu i uruchamiać się będzie tylko w przypadku przeglądarki Internet Explorer. Nie będzie wpływać na wyświetlanie się strony w innych przeglądarkach.





        
Eleganckie menu nawgizacyjne w CSS3 | MagazynT3.pl Demo
        


        


        



    


Eleganckie menu nawgizacyjne w CSS3

« Przeczytaj i ściągnij na MagazynT3.pl

Wygląda najlepiej w Firefox, użyteczne wszędzie Aby ściągnąć kod źródłowy, odwiedź MagazynT3.pl

Warto zauważyć, że załączamy tutaj arkusz stylów z Google. Dzięki temu będziemy mogli korzystać z czcionki Lobster. Pochodzi ona z Katalogu Czcionek Google (http://www.google.com/webfonts). W katalogu tym znajduje się ponad 100 fantastycznych, darmowych czcionek.

W sekcji body mamy znaczniki HTML5 takie jak header, nav oraz footer. Dzielą nam one stronę na trzy sekcje. My skoncentrujemy się na elemencie UL, który znajduje się w tagu nav. To jest bowiem nasze menu nawigacyjne.

Nieuporządkowanej liście nadaliśmy klasę fancyNav. Dzięki temu ograniczymy wpływ stylów CSS tylko do tego jednego elementu. To sprawi, że nasz kod będzie przyjaźniejszy i unikniemy różnych nieoczekiwanych zdarzeń. Inną wartą uwagi rzeczą jest to, że każdy element LI ma inne ID. To umożliwi nam korzystanie z pseudo-klasy :target. Sprawi to, że będziemy mogli wystylizować określony przez nas element.

Przejdźmy zatem do arkusza stylów CSS.

CSS

Może być zaskakujące to, że menu które budujemy nie wykorzystuje żadnych zdjęć (za wyjątkiem ikony domu). Wszystko odbywa się przy użyciu gradientów CSS3 (https://developer.mozilla.org/en/CSS/linear-gradient), box-shadow (https://developer.mozilla.org/en/css/box-shadow) oraz podwójnego tła (https://developer.mozilla.org/en/css/multiple_backgrounds).

Jeśli chodzi o wsparcie przeglądarek, to menu będzie działać we wszystkich najnowszych wersjach Firefoxa, Chrome?a, Safari oraz Opery. Będzie również funkcjonować w każdej wersji Internet Explorera od 7 wzwyż.

Nasz arkusz stylów znajduje się w assets/styles.css. Sugeruję ściągnięcie kodu menu za pomocą przycisku znajdującego się u góry strony oraz otworzenie go w jakimś edytorze tekstu. Będziemy się tutaj skupiać głównie na menu nawigacyjnym, więc będę pomijał te części kodu, które nie są z nim bezpośrednio związane.

Zacznijmy zatem stylizować nasze menu nawigacyjne. Pierwszą rzeczą jest ustalenie reguł dla listy nieuporządkowanej.

.fancyNav{
overflow: hidden;
display: inline-block;

border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;

box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
-moz-box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
-webkit-box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
}

.fancyNav li{

background-color: #f0f0f0;
background-image: -webkit-gradient(linear,left top, left bottom,from(#fefefe), color-stop(0.5,#f0f0f0), color-stop(0.51, #e6e6e6));
background-image: -moz-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
background-image: -o-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
background-image: -ms-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
background-image: linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);

border-right: 1px solid rgba(9, 9, 9, 0.125);

box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
-moz-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
-webkit-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;

position:relative;

float: left;
list-style: none;
}

Zwróć uwagę na ogromną listę reguł dla gradientu. Wszystkie ostatnie wersje Firefoxa, Chrome?a, Opery oraz Safari wspierają gradienty.  Jeśli chodzi o Internet Explorera, to dopiero od wersji 10 ma być to wspierane. Początkowo istniały dwa różne rozwiązania. Po jednej stronie stała Mozilla (Firefox), a po drugiej Webkit (Chrome and Safari). Jednakże składnia Firefoxa została uznana jako standard w branży.

Kolejnym krokiem jest użycie elementu :after. Skorzystamy z niego, aby stworzyć ciemne cienie, które wyświetlają się, gdy najedziemy kursorem na któryś z elementów menu:

.fancyNav li:after{

content:'.';
text-indent:-9999px;
overflow:hidden;
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
z-index:1;
opacity:0;


background-image:-webkit-gradient(linear, left top, right top, from(rgba(168,168,168,0.5)),color-stop(0.5,rgba(168,168,168,0)), to(rgba(168,168,168,0.5)));
background-image:-moz-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
background-image:-o-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
background-image:-ms-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
background-image:linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));

box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
-moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
-webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;

-moz-transition:0.25s all;
-webkit-transition:0.25s all;
-o-transition:0.25s all;
transition:0.25s all;
}

Deklaracja :after sprawia, że nasze menu wygląda jeszcze bardziej elegancko. Posiada ono teraz łagodny gradient, który przyciemnia elementy menu po najechaniu na nie. Domyślnie gradient ten jest niewidoczny. Używamy przejść CSS 3, aby animować jego pojawienie się od 0 do pełnej widoczności.

Następnie użyjemy selektorów :first-child oraz :last-child w celu określenia pierwszej i ostatniej pozycji menu.

.fancyNav li:first-child{
	border-radius: 4px 0 0 4px;
}

.fancyNav li:first-child:after,
.fancyNav li.selected:first-child:after{
box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
-moz-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
-webkit-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;

border-radius:4px 0 0 4px;
}

.fancyNav li:last-child{
border-radius: 0 4px 4px 0;
}


.fancyNav li:last-child:after,
.fancyNav li.selected:last-child:after{
box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
-moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
-webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;

border-radius:0 4px 4px 0;
}

.fancyNav li:hover:after,
.fancyNav li.selected:after,
.fancyNav li:target:after{
opacity:1;
}

Stosowanie różnych stylów pierwszego i ostatniego elementu jest konieczne, ponieważ nie chcemy, aby brzydkie granice między kolejnymi elementami wyświetlały się poza menu. Chcemy także zaokrąglić rogi w pierwszym i ostatnim elemencie.

Teraz musimy jeszcze dodać małą poprawkę. Chodzi nam o ukrycie ciemnego gradientu aktualnie wybranego elementu, gdy najeżdżamy ponownie na nasze menu.

.fancyNav:hover li.selected:after,
.fancyNav:hover li:target:after{
opacity:0;
}

.fancyNav li.selected:hover:after,
.fancyNav li:target:hover:after{
opacity:1 !important;
}

I w końcu ostatnim elementem, który nam został jest wystylizowanie linków, które znajdują się w LI.

.fancyNav li a{
color: #5d5d5d;
display: inline-block;
font: 20px/1 Lobster,Arial,sans-serif;
padding: 12px 35px 14px;
position: relative;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);
z-index:2;
text-decoration:none !important;
white-space:nowrap;
}

.fancyNav a.homeIcon{
background:url('../img/home.png') no-repeat center center;
display: block;
overflow: hidden;
padding-left: 12px;
padding-right: 12px;
text-indent: -9999px;
width: 16px;
}

W ten sposób nasze eleganckie menu CSS 3 jest gotowe!

Podsumowanie

Tak zbudowane menu daje Ci dużą kontrolę. Możesz bardzo łatwo dostosować je do swojej strony poprzez prostą zmianę koloru, czy rozmiaru. Ogrom kodu CSS póki co jest jeszcze niezbędny. Jednakże niedługo w końcu zostaną określone konkretne standardy i wówczas nie będzie już trzeba używać innych składni dla każdej przeglądarki.

tutorialzine

Student Informatyki i Ekonometrii na Politechnice Gdańskiej, zapalony fotograf i multiinstrumentalista.

Kontynuuj czytanie
Reklama
Kliknij, by skomentować

Zostaw komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Internet Maker

Pozycjonowanie strony internetowej a reklamy w Internecie – czym się różnią?

Nie masz cierpliwości do pozycjonowania? Skorzystaj z pomocy profesjonalistów!

Opublikowane

dnia

przez

Chcesz osiągnąć sukces w e-biznesie i zwiększyć widoczność swojej strony w sieci? Nie pozostaje Ci nic innego jak zająć się promocją witryny. Zacznij od inwestycji w pozycjonowanie, czyli zgodnej ze wskazówkami Google optymalizacji strony pod wyszukiwarkę internetową. Pamiętaj, że największa ilość wejść pochodzi właśnie z wyszukiwarek, dlatego zajmowanie wysokiej pozycji w rankingu Google szybko przełoży się na lepsze statystyki.

(więcej…)

Kontynuuj czytanie

Internet Maker

Jak szybko i łatwo stworzyć stronę mobilną

Opublikowane

dnia

W dzisiejszych czasach coraz bardziej popularne staje się przeglądanie stron internetowych na urządzeniach mobilnych. Ba! Samo surfowanie po sieci to w sumie już przeszłość – obecnie zakupy czy płatności mobilne to chleb powszedni dla polskich internautów. 

(więcej…)

Kontynuuj czytanie

Internet Maker

Strona na WordPressie? Grunt to dobry hosting

Opublikowane

dnia

WordPress jest powszechnie uważany za najlepszy system zarządzania treścią zarówno dla prostych blogów i stron, jak i większych serwisów internetowych oraz sklepów. Szacuje się, że już 23% witryn na świecie korzysta z WordPressa, a wśród nich takie marki jak BBC,  MTV czy Sony.

(więcej…)

Kontynuuj czytanie

Internet Maker

Jak zabezpieczyć swoje zdjęcia w chmurze

Opublikowane

dnia

Niedawny wyciek nagich zdjęć znanych osobistości wznowił dyskusje na temat bezpieczeństwa naszych prywatnych danych. Jako że część fotografii została wykradziona poprzez iCloud, prezentujemy dziś jak zabezpieczyć swoje dane w chmurze. (więcej…)

Kontynuuj czytanie

Internet Maker

Jak usunąć historię swojej aktywności z Facebooka?

Opublikowane

dnia

Usunięcie swojej aktywności z Facebooka nie jest takie proste, jakby się mogło wydawać. Portal społecznościowy daje możliwość zachowania kopii swoich postów oraz zamknięcia całego konta, jednak co w przypadku gdy chcemy usunąć tylko poszczególne wpisy? (więcej…)

Kontynuuj czytanie
Reklama

Popularne