Jako, że nasz poprzedni artykuł na temat rozwijanego menu, z wykorzystaniem CSS ma już ponad rok, postanowiliśmy go nieco zaktualizować, dostosowując go do dzisiejszych standardów, a mianowicie HTML5 i CSS3. W czasach obecnych, prawidłowo wykonana nawigacja, znacząco poprawia komfort pracy i użytkowania strony www. Kiedy internauta bez problemów odnajdzie interesujące go informacje, są większe szanse, że do nas wróci. Tym razem postaramy się o bardziej eleganckie menu, które posiadać będzie stylistycznie dopasowane, zaokrąglone rogi (przy rozwijaniu), oraz delikatne przejścia, dla koloru odnośników i tła, po najechaniu na każdą z pozycji. Na końcu artykułu znajdziecie DEMO oraz przykład do pobrania.
Zobacz, jak zbudować menu wielopoziomowe > Rozwijane menu wielopoziomowe
Na początek przygotujmy sobie nowy dokument HTML, który zawierać będzie listę, z wybranymi odnośnikami. W naszym przypadku będzie wyglądać to w taki sposób:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>Rozwijane menu w CSS3</title> <link href="arkusz.css" rel="stylesheet"> </head> <body> <div id="kontener"> <ul id="menu"> <li><a href="#">Home</a></li> <li><a href="https://webroad.pl">Portfolio</a> <ul> <li><a href="#">Strony www</a></li> </ul> </li> <li><a href="https://webroad.pl">WEBroad.pl</a></li> <li><a href="#">Informacje</a> <ul> <li><a href="#">O mnie</a></li> <li><a href="#">Aktualności</a></li> </ul> </li> <li><a href="#">Webdesign</a></li> <li><a href="#">Kontakt</a> <ul> <li><a href="#">Formularz kontaktowy</a></li> <li><a href="#">Pomoc</a></li> </ul> </li> <li><a href="#">Współpraca</a> <ul> <li><a href="#">Wymiana linkiem</a></li> </ul> </li> </ul> </div> </body> </html> |
Teraz wystarczy to wszystko odpowiednio sformatować. Kod CSS wpisujemy oczywiście do zewnętrznego arkusza, w tym przypadku o nazwie arkusz.css. Jak widzimy w naszym szkielecie HTML, zaimportowaliśmy go już za pomocą takiej instrukcji:
1 | <link href="arkusz.css" rel="stylesheet"> |
Sam kod odpowiedzialny za formatowanie jest następujący:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | /*PODSTAWOWE USTAWIENIA*/ body {font-family: calibri, tahoma; background: #e6e6e6;} #kontener {width: 960px; margin: 0 auto;} #menu {display: table; padding: 0 10px 0; margin: 0 auto; overflow: hidden; font-size: 14px; background: #242424;} #menu li {list-style-type: none; margin: 0 auto; float: left; } #menu li:hover {background: #404040;} #menu li a {display: block; color: silver; text-decoration: none; padding: 7px 10px 7px;} #menu li a:hover {background: #404040; color: white;} #menu li li a {width: 160px;} #menu li ul {overflow: hidden; display: none; background: #242424;} #menu li:hover ul {position: absolute; padding: 0; display: block; width: 160px;} /*ANIMACJA - tylko CSS3*/ #menu *:hover {transition: 0.3s ease-in;} /*ZAOKRĄGLONE ROGI - tylko CSS3*/ #menu {border-radius: 3px;} #menu li ul {border-radius: 0 0 3px 3px;} |
W ostatnim bloku dodaliśmy instrukcje, dostępne tylko w CSS3 – w starszych przeglądarkach nie wpłyną one na układ menu, jednak będzie ono pozbawione zaokrągleń i efektu przejścia.
Super kod!:) Ale mam problem ze zmianą czasu oraz animacją wysuwania się bloków podmenu.
Wydaje mi się, że trzeba ustawić animację, oraz jej czas, dla elementu #menu li ul {}
Niestety nie bardzo wiem jak utworzyć tę animację.
Coś mi się udało zrobić ale nie do końca działa. Zrobiłem coś takiego:
#menu li ul {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
-o-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
-webkit-animation: wyjazd 2s;
}
@-webkit-keyframes wyjazd {
0%{display: block; height: 0%;}
100%{display: block; height: 100%;}
}
Ale wtedy rozwija mi menu na całą wysokość strony, zamiast na wysokość bloków.
Spróbuj dać 100%{display: block; height: auto;}
Nie mam teraz gdzie sprawdzić, więc nie wiem czy zadziała…
Wtedy w ogóle nie działa, normalnie się pokazuje.
Jak przesunąć menu na środek tego paska i zwiększyć odstępy pomiędzy nimi?
Dostosowałem kod CSS w poradniku do wyśrodkowania (włącz demo i odśwież żeby zobaczyć).
Co do zwiększenia odstępów zmień poniższe wartości:
#menu li a {display: block; color: silver; text-decoration: none; padding: 7px 10px 7px;}
Na przykład na takie:
#menu li a {display: block; color: silver; text-decoration: none; padding: 7px 15px 7px;}
W teście podczas tworzenia strony („podgląd” z dysku) na IE 8, Mozilla Firefox i Google Chrome działa OK (poza tym, że jak dodam trzecią pozycję do rozwijanego menu to dwie pierwsze są wyrównane do lewej, a trzecia pozycja już jest na środku). Jednak po zamieszczeniu strony na serwerze IE 8 nie wyświetla animacji (jedynie napisy menu), Mozilla i Chrome nie maja z tym problemu i wszystko jest OK… Nie wiem jak zaradzić, żeby IE8 poprawnie to wyświetlał… Ssytem: Win 7 32-bit…
czy można w szybki sposób zmienić te menu w pionowe?
Wystarczy nie floatować #menu li {list-style-type: none; margin: 0 auto; float: left; } i nadać stałą szerokość.
można część rozwijaną podnieść do góry do poziomu menu wyższego stopnia i przesunąć w prawo?
Przy :hover (last-child) zapomniałeś o zaokrągleniu rogów:)
Witam, to mój pierwszy komentarz tutaj. Po pierwsze muszę pogratulować autorowi strony ponieważ jest ona kapitalna i co najważniejsze często aktualizowana, za to BRAWA!
Teraz już moje pytanie. Co muszę dodać w CSS’ie żeby mieć trójwarstwowe menu? Tzn. po najechaniu na wysunięty element, chciałbym, żeby wysuwało się kolejne sub-menu w prawo. Jak to zrobić?
Z góry dziękuję za pomoc
Witam i dziękuję, Krzysztofie! Musisz dodać do CSS linijki kodu odpowiedzialne za trzeci poziom (można je skopiować z poziomu drugiego i odpowiednio zadeklarować – 10 i 11 linijka z kodem). No i pozostaje przesunięcie w prawo – to również w CSS. Nie mam możliwości sprawdzenia z poziomu smartfona efektów, dlatego daj znać czy się udało.
No właśnie tutaj mam problem, bo nie do końca wiem jak mam to poprawnie zadeklarować:
#menu li li a {width: 160px;} – tutaj kolejne li?
#menu li ul {overflow: hidden; display: none; background: #242424;} – tutaj kolejne ul?
Czy mam jakoś inaczej to wpisać? Bo jakoś w ogóle nie może się wyświetlić ten trzeci poziom menu.
Ja także mam problem z 3 poziomem menu, czy ktoś doszedł do rozwiązania?
Podam tu troszkę zmieniony kod, ale przynajmniej działa na trzy poziomy:)
#menu{ list-style:none; font: 14px Trebuchet MS; display: table; padding-top:13px; text-transform: uppercase;}#menu li{ position:relative; list-style-type: none; padding-left:15px; padding-right:15px; float: left; border-right: 1px solid #dca724;}#menu li a {display: block; color: #891f00; text-decoration: none; padding: 7px 10px 7px;} #menu li a:hover {color: white;}#menu li ul{ list-style: none; visibility: hidden; position:absolute; width:210px; top:32px; left:0; background: url(images/hoverBg.png) repeat; list-style-type: circle; z-index:99999; text-transform: none;}#menu li ul li{ position: relative;}#menu li li a {width: 160px;font-size: 14px;color:#fff;} #menu li ul li ul{ list-style: none; visibility: hidden; position: absolute; width: 210px; top:0; left: 210px;}#menu li li:hover{ background:#a50b0b url(images/over.jpg) repeat-y;}#menu li:hover >ul{ visibility: visible !important;}*:hover {-moz-transition: 0.2s ease-in; -webkit-transition: 0.2s ease-in; -o-transition: 0.2s ease-in; transition: 0.2s ease-in;}
dzięki za odpowiedz, jednak dalej męczę się z tym kodem :)
witam – super menu ! Po wstawieniu go na strone wyswietla sie ladnie.niestety jak chce wejsc do drugiej pozycji – po rozwinieciu menu – ono znika. Pierwsza pozycja po rozwinieciu sie menu w dol laduje sie ok a druga nie da sie kliknac – prosze o pomoc i z gory dzieki
Witaj, możesz pokazać na jakiej stronie występuje ten problem? Chętnie się temu przyjrzę…
Co trzeba dodać by menu było węższe, nie krótsze. Chodzi mi o to by odległość dolnej i górnej krawędzi menu była bliżej tekstu będącym linkiem… Pozdrawiam super menu! :)
Witaj, w „#menu li a {}” zmień siódemki w atrybucie „padding” na mniejsze. Pozdrawiam :-)
Witam a jak zrobić aby to menu nie było przykrywane przez inne elementy na stronie?
Proszę założyć odpowiedni temat na naszym forum webmasterskim. Tam udzielamy wszelkiej pomocy na problemy związane z zagadnieniami poruszanymi w artykułach.
czemu… wszyscy uzyskali odpowiedzi na swoje głupie pytania..
Jeśli coś da się szybko wytłumaczyć to odpowiadam w komentarzu. Jeśli, potrzeba więcej miejsca, np. na kod to lepszym miejscem jest forum.
Żadne pytania nie są głupie :)
Witam!Co mam usunąc,aby menu nie było wyśrodkowane?
Usuń margin: 0 auto; z elementu #menu.
Ja ostatnio próbowałem, lecz nie wiem. Da radę zrobić płynnie rozwijane menu bez CSS? :)
Płynne rozwijanie bez CSS? Chociażby przy użyciu jQuery, ale to trochę mija się z celem, bo menu ma wykorzystywać tylko i wyłącznie CSS3.
/*ANIMACJA – tylko CSS3*/
*:hover {-moz-transition: 0.3s ease-in; -webkit-transition: 0.3s ease-in; -o-transition: 0.3s ease-in; transition: 0.3s ease-in;}
Przed *:hover polecam wpisać #menu. Na Google Chrome niezłe kwiatki mi się działy. Tekst przy powiększaniu (artykułu!) robił się jakby animowany – „pływał”, żeby ustawić się do powiększenia.
Dokładnie. W przykładzie nie ma innych elementów, które zmieniają stan, dlatego mogłem użyć :hover dla wszystkich (*), ale na innych stronach spowoduje to dodanie efektu przejścia dla wszystkiego co może zmieniać swoje stany po najechaniu kursorem. Dziękuję za komentarz. Kod w artykule poprawiam.
A czy przy użyciu CSS3 można uzyskać efekt animacj gdy pojawia się drugi poziom menu?
Można. Proszę założyć odpowiedni wątek na naszym forum dla webmasterów, a na pewno pomożemy.
w css menu width ustawiłem na 100%. Tekst jest od lewej a jak zrobić żeby był wyśrodkowany ?
Witam, jak można przesunac w lewo drugi poziom menu. chodzi o to ze jak najezdzam na menu to co sie wysuwa jest rowno z lewa strona gory a chcialbym zeby wysunieta czesc(razem z tlem ) byla wyposrodkowana pod gorna.
Swietne menu, dziala elegancko. Jak zrobic zeby okreslony przycisk uznany byl za aktywny/wcisniety? bo chcialem mu przypisac inny kolor
Najlepiej przypisać mu odpowiednią klasę, a potem sformatować ją za pomocą CSS.
Świetny artykuł. Menu wykorzystamy na naszej stronie. Pozdrawiam.
Witam, nie mogę wejść na forum, pojawia się błąd: 1054 – Nieznana kolumna 'requireReset’ w where clause SQL=SELECT
id,username,passwordFROMj_usersWHEREusername= 'Zegarmistrz’ ANDrequireReset= 0To nie zadziała:
/*ANIMACJA – tylko CSS3*/
#menu *:hover {transition: 0.3s ease-in;}
transition dodaje się do elementów bez hover
Mam takie pytanie. Proszę napisać o zrobić aby po najechaniu kursorem na menu rozwijane pozostał biały kolor menu głównego a nie zmieniał koloru np. Informacje.