Strona używa cookies (ciasteczek). Dowiedz się więcej o celu ich używania i zmianach ustawień. Korzystając ze strony wyrażasz zgodę na używanie cookies, zgodnie z aktualnymi ustawieniami przeglądarki.    X

Ciekawe menu z pomocą CSS

Skąd wpis - właściwie z prośby. Ostatnio kolega poprosił mnie o rozwiązanie jego problemu. Chciał uzyskać takie menu:

Problemem było to, że na stronie nie mogło być żadnego skryptu JS, PHP, mógł być jedynie czysty HTML no i ostylowanie, no więc pozostało wykorzystać CSS.

Jak zrobić coś takiego? No wiadomym jest, że trzeba użyć :hover, lecz pytanie jakie mi zadał brzmiało po prostu: Jak?
Zapewne metod rozwiązania tego „problemu” jest wiele, i nie zamierzam nikomu wmawiać jakie jest najlepsze, najwspanialsze itd. być może komuś ten sposób wyda się odpowiedni i ciekawy.

Od czego zacząć?

Najpierw musimy stworzyć nasze menu w programie graficznym. Po jego utworzeniu zmieniamy rozmiar obszaru roboczego podnosząc wysokość 2- krotnie – jak w przykładzie.

Teraz „duplikujemy” nasze menu i przenosimy jest pod spód. "Dolne" wykonujemy tak jak wyglądałoby po najechaniu myszy (nasz :hover). Kolejny krokiem jest pocięcie go zgodnie z tym jak wykonaliśmy na pojedyncze „odnośniki”

Możemy nazwać je kolejno menu1.jpg, menu2.jpg, itd..
Wysokość tych "pociętych" odnośników wynosi 120px (zawiera górne i dole „menu” z projektu). Wycinamy także skrajne lewe brzegi i tło samego menu (te obrazki mają wysokość 60px;)

Ale po co mi obrazki? Para buch maszyna w ruch :)

No faktycznie z obrazków nam nic nie przybędzie. Otwieramy edytor i lecimy. Na początku struktura menu.

Sprawa HTML'a

Z pewnością najłatwiej będzie umieścić odnośniki w liście. Napiszmy ją więc nadając jej identyfikator navi:

<ul id="navi"> <!-- lista naszych odnośników --> <li><a href="#" class="menu4" >menu4</a></li> <li><a href="#" class="menu3" >menu3</a></li> <li><a href="#" class="menu2" >menu2</a></li> <li><a href="#" class="menu1" >menu1</a></li> </ul>

Skoro mamy już listę to dodajmy także lewy i prawy brzeg naszego menu:

<div class="bok"></div> <!-- DIV skrajnego lewego brzegu --> <ul id="navi"> <li><a href="#" class="menu4" >menu4</a></li> <li><a href="#" class="menu3" >menu3</a></li> <li><a href="#" class="menu2" >menu2</a></li> <li><a href="#" class="menu1" >menu1</a></li> </ul> <div class="bok"></div> <!-- DIV skrajnego prawego brzegu --›

Można zapytać dlaczego lewy skrajny brzeg i prawy skrajny brzeg są takie same, otóż składają się z tego samego – jednego obrazka, więc korzystamy z tego samego kodu..

Aby można było w razie konieczności menu umieścić tam gdzie chcemy otoczmy cały nasz kod zamykając go w jednym „pudełku” o identyfikatorze menu:

<!-- Początek menu --> <div id="menu"> <div class="bok"></div> <!-- DIV skrajnego lewego brzegu --> <ul id="navi"> <!-- lista naszych odnośników --> <li><a href="#" class="menu4" >menu4</a></li> <li><a href="#" class="menu3" >menu3</a></li> <li><a href="#" class="menu2" >menu2</a></li> <li><a href="#" class="menu1" >menu1</a></li> </ul> <div class="bok"></div> <!-- DIV skrajnego prawego brzegu --> </div> <!-- Koniec menu -->

Tak oto wygląda kod HTML naszego menu. Zabierzmy się za wygląd.

Sprawa stylu

Umieśćmy zatem nasze menu w jakimś miejscu na stronie:

#menu { width:960px; /* Szerokość naszego menu*/ margin:30px auto; /* Dolny i górny margines menu 30px, menu wyśrodkowane*/ }

Gdy już to zrobiliśmy zajmijmy się jego wyglądem. Na początek nadajmy mu ogólny wygląd i strukturę.

ul#navi{ background:url('menubg.jpg') repeat-x; /* Tło dla całego menu, powtarzane po osi X*/ height:60px; /* Wysokość menu, połowa wysokości obrazka menu1.jpg, menu2.jpg itd...*/ margin:0; padding:0; list-style: none; float: left; width: 960px; } ul#navi li { /* Każdy „odnośnik” naszego menu */ float: right; margin-right:10px; padding:0; }

Dobrze mając zatem ogólny zarys zajmijmy się poszczególnymi odnośnikami i skrajnymi bokami:

a.menu1, a.menu2, a.menu3, a.menu4 { display:inline-block; height:60px; overflow:hidden; text-indent: -9999px; /* Ukrycie tekstów odnośników */ } a.menu1{ background: url(menu1.jpg) no-repeat; /* Obrazek z odnośnikiem 1 */ width:143px; /*Szerokość obrazka menu1.jpg */ } a.menu2{ background: url(menu2.jpg) no-repeat; width:75px; } a.menu3{ background: url(menu3.jpg) no-repeat; width:110px; } a.menu4{ background: url(menu4.jpg) no-repeat; width:88px; }

I skrajne bogi:

.bok{ background:url('menuleft.jpg') no-repeat; height:60px; width:10px; float:left; }

Dobrze, ale co z :hoverem i efektem po najechaniu myszką?

Spójrzmy na nasze obrazki odnośników. Na gorze mamy nasze menu w stanie „spoczynku”, na dole takie jakie ma zobaczyć odwiedzający po najechaniu na nie myszka. Przesuńmy więc obrazek do góry o 60px ukazując mu ten dolny.

a.menu1:hover, a.menu2:hover, a.menu3:hover, a.menu4:hover{ background-position: 0px -60px; }

Zatem cały kod CSS naszego menu wygląda tak:

#menu { width:960px; /* Szerokość naszego menu*/ margin:30px auto; /* Dolny i górny margines menu 30px, menu wyśrodkowane*/ } ul#navi{ background:url('menubg.jpg') repeat-x; /* Tło dla całego menu, powtarzane po osi X*/ height:60px; /* Wysokość menu, połowa wysokości obrazka menu1.jpg, menu2.jpg itd...*/ margin:0; padding:0; list-style: none; float: left; width: 960px; } ul#navi li { /* Każdy „odnośnik” naszego menu */ float: right; margin-right:10px; padding:0; } .bok{ background:url('menuleft.jpg') no-repeat; height:60px; width:10px; float:left; } a.menu1, a.menu2, a.menu3, a.menu4 { display:inline-block; height:60px; overflow:hidden; text-indent: -9999px; /* Ukrycie tekstów odnośników */ } a.menu1{ background: url(menu1.jpg) no-repeat; /* Obrazek z odnośnikiem 1 */ width:143px; /*Szerokość obrazka menu1.jpg */ } a.menu2{ background: url(menu2.jpg) no-repeat; width:75px; } a.menu3{ background: url(menu3.jpg) no-repeat; width:110px; } a.menu4{ background: url(menu4.jpg) no-repeat; width:88px; } a.menu1:hover, a.menu2:hover, a.menu3:hover, a.menu4:hover{ background-position: 0px -60px; }

Pozostaje nam uruchomić plik html (wraz z zainicjowanym stylem CSS) i zobaczyć nasze menu w działaniu.

Oczywiście każdy ma własne zdanie dotyczące danych kwestii nie zamierzam go w żaden sposób podważać, czy obrażać kogokolwiek w jakikolwiek sposób. Przepraszam także za ewentualne błędy.  

internet porady programowanie

Komentarze

0 nowych
Kintoki   6 #1 06.01.2012 19:18

Widzisz ja to samo menu mogę zrobić bez żadnych grafik :) tylko css
Mniejsza z IE# :P

ziggurad   12 #2 06.01.2012 19:24

Mniejsza z IE#? No to olewasz ok 50% osób korzystających z internetu, brawo ;)

Porada prosta i dobra. Przydałby się cały spakowany przykład do ściągnięcia.

gowain   19 #3 06.01.2012 19:55

Podejrzewam, że tylko w IE6 by nie zadziałało, więc i tak i tak lepszy css

Kintoki   6 #4 06.01.2012 20:51

Od razu olewam, Użyszkodnicy ie(wersji niższej niż 9) dostaną to samo menu(kształt/kolor) tylko mniej "błyszczące" - wystarczy

wszerad   6 #5 06.01.2012 21:28

@ziggurad
Olewa tylko 18% Polskich internautów... Jestem jak najbardziej za, trzeba na każdym kroku tępić użytkowników IE z IE9 włącznie a to dlatego, że MS uzależnia swoją przeglądarkę od systemu a że Win 7 to dobry system to podejrzewam, że IE9 pozostanie z nami na dłużej a już dzisiaj jest przestarzały.

szygmon   8 #6 06.01.2012 21:43

IE 6 powinien się zablokować z opcją: aktualizuj albo ściągnij zamiennik...

  #7 06.01.2012 22:47

Po co te jpegi? Budowanie menu z obrazków to szczyt nieprofesjonalizmu w obecnych trendach! Jak to zrobić? Polecam lekturę kodu: http://www.tankedup-imaging.com/css_dev/menu1.html
Zasada jest ta sama.

kubut   18 #8 06.01.2012 23:08

O ile w zastosowaniach domowych można olać IE, to przy zleceniu na stronę jest cięższa sprawa-niektórzy klienci upierają się przy kompatybilności z IE6, a klient nasz pan... :/

wszerad   6 #9 06.01.2012 23:38

@kubut
Chyba, że zatrudnia cię Allegro i robisz stronę CityTeam :D
Wywalało mi, że nie obsługują mojej przeglądarki Firefox 11 i żebym zaktualizował ją do FF 5 :D

elesoft   10 #10 07.01.2012 00:09

Obrazki obrazkami... ale używanie do tego tylu plików to nieporozumienie...
Ewentualna edycja tego, to koszmar. A i wczytywanie tylu plików jest wolniejsze, niż jednego, większego.

Polecam: http://webhosting.pl/CSS.Sprites..Jak.wykorzystac.jeden.obrazek.wiele.razy.na.st...

M@ster   17 #11 07.01.2012 00:59

Według mnie ten wpis powinien się nazywać "jak nie robić menu w HTMLu" ;) - z powodów o jakich wspomnieli koledzy wyżej. Nie dość ze można to zrobić bez żadnej grafiki, to jeśli nawet, to bez siekania na dziesiątki plików.

Jeśli czyta to jakiś początkujący to tylko złego doświadczenia nabierze na dzień dobry.

drap3x   1 #12 07.01.2012 10:36

Jak nie chcesz pakować się buciorami w skrypty JS lub style CSS3, to takich cudów się nie wyczynia!
elesoft wrzucił linka do sposobu, który pozwala zaokrąglać rogi. Ja korzystam z takiego myku, że zaokrąglone rogi pozycjonuję absolutnie względem pojemnika (pozycjonowanego relatywnie) w który będą. Wtedy wiem, że niezależnie od rozmiarów pudełka, te rogi będą faktycznie w rogach.

underface   14 #13 07.01.2012 13:38

@ziggurad
"Mniejsza z IE#? No to olewasz ok 50% osób korzystających z internetu, brawo ;)"

skoro te 50% użytkowników olewa samych siebie i woli używać przeglądarek, których miejsce w muzeum, to ich strata

dodatkowo jeżeli takiemu Kowalskiemu czy Nowackiej przestanie strona się dobrze wyświetlać na IE, to MOŻE zainstalują inną przeglądarkę, co sprawki ze ich % spadnie;p a web-programiści będą mieli lżej.

underface   14 #14 07.01.2012 13:40

css3 obsługuje już chyba gradienty, bo zaokrąglone roki to na 100%. Jeżeli już używać obrazków to w przypadku takich zaokrąglonych rogów to wolałbym png z przezroczystością

  #15 07.01.2012 15:19

Te sposoby faktycznie nie wyglądają za dobrze, ale działają z każdą przeglądarką, fakt menu dłużej będzie się "wczytywało" na komputerze klienta.

_mnich   6 #16 07.01.2012 15:21

Moim zdaniem powinno to wyglądać tak:

1 .


Strona Główna
Oferta
Propozycje
Kontakt



wystarczająco dużo tego html'a


2.
Patrząc dalej, całe menu bym zrobił jednym obrazkiem który bym przesuwał pod odpowiednimi elementami ( a dlaczego?? bo odpowiedz nasuwa się sama mniej odwołań po pliki do dysku )
tak jak pisał @elesoft użył bym sprite'ów oczwyiście jak by nie dało się tego menu już zrobić za pomocą samego html'a i css-a

3.
nie używaj text-indent - co będzie jak z jakiś powodów twojej grafiki nie doczytają, albo jak osoba nie widoma / niedowidząca wyłączy sobie obrazki żeby stronę przeczytać. Proste nie zobaczy menu w ogóle. O prócz tego nie masz żadnych title w linkach (przydaje się to głównie dla osób które korzystają z readerów stron). Możesz zrobić prosty test wyłącz sobie dociąganie obrazków na dobrychprogramych i zobacz jak strona wygląda - po za linkami do kategorii, news-ów z nagłówków i treści nie widać bardzo dużo rzeczy zaczynając od menu głównego

Ojciec Ceicjo   6 #17 08.01.2012 14:17

W kwestii użycia CSS i JS w IE
-zaokrąglanie robimy w CSS + plik HTC dla IE (w środku jest JS który tworzy elementy 'v:roundrect' działa na pewno IE7+ -co do ie6 to nie sprawdzałem)
-gradienty to CSS -> filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');

Dużo efektów dostępnych w CSS które nie działają w IE można wykonać za pomocą plików HTC lub filtrów działających tylko w IE, jeśli komuś zależy żeby strona ładnie wyglądała to poszuka i zrobi.

W tym przypadku duży plik graficzny wystarczy zamienić na kilka linijek kodu CSS i plik HTC tylko dla IE. W efekcie zmniejszymy stronę i jeden plik graficzny kosztem dłuższego pliku CSS który i tak zazwyczaj jest kompresowany przed wysłaniem do użytkownika więc różnica będzie niewielka, a zaoszczędzimy przesyłania zbędnego pliku graficznego czyli ok 20-30kB

arlid   14 #18 09.01.2012 12:46

Dziękuje za komentarze. Oczywiście jak napisałem nie mówię, ze to najlepsze i najwspanialsze rozwiązanie i z chęcią przeczytam, dowiem się czegoś nowego. Ciesze się, że ktoś może mi pokazać, że się myliłem i "naprowadzić" na lepszą drogę, dzięki temu będę mógł uniknąć błędów w przyszłości. Bo przecież na błędach też można się nauczyć. Pozdrawiam.