Poziome menu z efektem sliding doors

data publikacji: 07.06.2008
Poziome menu z efektem sliding doors
kategoria: XHTML/CSS autor: agressiva
Stworzenie poziomego menu z tłem obrazkowym o jednakowych rozmiarach bez wzgledu na długość tekstu w środku bywa czasami kłpotliwe. Ten samouczek pokaże Wam jak bez trudności taki efekt uzyskać.
Ponad to dowiecie się w jaki sposób uzyskać jeszcze jeden cenny efekt - brak "wczytywania się" kolejnego obrazka podczas najazdu na link, czyli zastosowanie sliding doors.

Zacznijmy od ustawienia listy w pozycji horyzontalnej oraz nadaniu jej odpowiednich rozmiarów.
Tak wygląda kod xHtml dla listy:

<div id="menu">

<ul>
<li><a href="#">O nas</a></li>
<li><a href="#">Firma</a></li>
<li><a href="#">Referencje</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Kontakt</a></li>
<li><a href="http://vivee.info/">Vivee.info</a></li>
<li><a href="http://waterdesign.glt.pl/">Water Design</a></li>
</ul>

</div>

Teraz za pomocą CSSa ustawiamy <li> poziomo, jeden za drugim.
Są na to dwa sposoby. Jeden to display:inline;, ale my będziemy musieli bardziej skomplikować sprawę.
Na początek #menu li nadajemy float:left; - dzięki temu ustawią się koło siebie jak elementy liniowe a nie blokowe. Jeżeli chcemy aby tekst w linkach wyświetlany był po środku późniejszego obrazka - nadajemy w tym samym miejscu text-align:center;

Przed przejściem do następnego kroku musimy naszykować sobie nasz obrazek. Jest on dość specyficzny, bo zawiera na jednej powierzchni od razu efekt dla a oraz a:hover. Muszą one być ustawione jeden pod drugim.
Ten przygotowany dla tego tutoriala wyglada następująco:

Tło dla #menu ul li a:

#menu ul li a {
background:url(li_a.png) no-repeat;
background-position: 0 0;
font:12px Tahoma, Arial, Helvetica, sans-serif;
color:#fff;
font-weight:bold;
text-decoration:none;
width:110px;
height:24px;
display:block;
padding:5px 0 0 0;
}

Nasz wcześniej przygotowany obrazek stał się tłem ogólnym i dla li a i dla li a:hover. Teraz w zależności który efekt tła chcemy mieć na poszczególnych wariantach należy patrzeć na background-position: 0 0;. W tym przypadku dla linka zaplanowany był kolor różowy obrazka, który znajduje się na górze, więc jego pozycja i pionie i w poziomie wyniosła 0. Wysokość i szerokość linka jest uzależniona od wymiarów obrazka nadanego na tło (czesc różowa lub szara). Aby to tło pojawiło się nam tak jak chcemy, należy pamiętać od dodania display:block;

Podobnie postępujemy przy najeździe na linka.
CSS dla niego wygląda następująco:

#menu ul li a:hover {
background:url(li_a.png) no-repeat;
background-position: 0 -29px;
color:#595959;
}

background-position w pionie oznaczony jest wartością ujemną z tego wzgledu, że część szara obrazka czyli na która pojawia się przy najeżdzie, znajduje się niżej i musi być wyniesiona (na minusie) o swoją wysokość do góry. Pamiętajcie aby przy projektowaniu tła dla linków zwrócić uwagę aby one stykały się ze sobą, bo inaczej utrudnicie sobie sprawe przy dobieraniu odpowiedniego background-position

Taki sposób "podkładania" tła pod linki jest o tyle korzystny, że nie powoduje nieprzyjemnego efektu "wczytywania się" inne obrazka. Dzieje się tak dlatego, że obydwa obrazki są wczytane od razu podczas pierwszego ładowania strony i zmienia się jedynie położenie tła.

Praktyczne wykorzystanie tego tutoriala możecie zobaczyć na tej stronie.
Udostępnij ten artykuł:

Podobne wpisy - Vivee blog o webmasteringu, grafice i fotografii

Zobacz podobne wpisy:

This website uses IntenseDebate comments, but they are not currently loaded because either your browser doesn't support JavaScript, or they didn't load fast enough.

12221 ResponsesPoziome+menu+z+efektem+sliding+doors2008-06-07+20%3A34%3A38agressiva to “Poziome menu z efektem sliding doors”
1. Gsi pisze:
  
  7 06 2008 o 22:37
  
  Tylko że jest błąd… daliście zamiast przykładu strony – obrazek %)
  
  Odpowiedz
2. agressiva pisze:
  
  7 06 2008 o 22:42
  
  Już jest ok.
  
  Odpowiedz
3. Gsi pisze:
  
  8 06 2008 o 18:58
  
  Mozna to tez zrobić za pomoca JS ;p ale ogólnie dobrze i łatwiej w css
  
  Odpowiedz
4. agressiva pisze:
  
  8 06 2008 o 23:23
  
  Można, ale po co się babrać? Najwazniejsze jest jak posługiwać się pozycjonowaniem tła i alles. Nie trzeba w żaden sposob obciążać strony. To jest łatwe proste i przyjemne.
  
  Odpowiedz
5. pgruszkaster pisze:
  
  15 08 2008 o 21:07
  
  Tutorial bardzo ładnie napisany, ale mam jednak mały problem. Otóż jeśli dopiszę do pierwszej pozycji paddingu zawartość ok. 13px (by tekst był mniej więcej na środku) w #menu ul li a {…} mam mały defekt Jeśli paddingi są wyzerowane, wszytko śmiga jak szalone.
  
  Tutaj można zobaczyć jak to wygląda jeśli padding ma wartość 13px: http://testing.ugu.pl/menu/
  
  Odpowiedz
6. Rudik pisze:
  
  8 10 2008 o 18:26
  
  Witam !
  Tutorial super, tylko mam pewien problem, a mianowicie jak robie to wszystko, no i obrazek mam załóżmy o wymiarach 140x30px; no i ustalone mam width i height i text-align center, mając ustawiony padding, ale jak w tym menu mam jakiś dłuższy wyraz, to jest krzywo (np. od lewej jest dobrze, ale z prawej wychodzi), a jak jest bez paddingu, to w ogóle te tła są rozmiaru dokładnie tekstu.
  Proszę o pomoc,
  z góry dziękuję,
  Rudik.
  
  Odpowiedz
7. agressiva pisze:
  
  8 10 2008 o 18:43
  
  Nie widze tego przed oczami także trudno jest mi podać jakieś sensowne wyjście z tej sytuacji. Ale generalnie menu w którym jest stała szerokość li jest przyszykowane na okreslonej szerokości linki, trzeba uwazać jak dobiera się hasła w nich. Możesz ewentualnie zwodić komórki li z obrazkami szersze i dostosowane do najdłuższej frazy.
  
  Odpowiedz
8. Rudik pisze:
  
  8 10 2008 o 20:03
  
  http://www.rudik1.webpark.pl – to jest strona z ustalonym paddingiem, widać wyraźnie, że przy różnych długościach wyrazów, menu rozjeżdża się
  http://www.rudik1.webpark.pl – strona bez paddingu, oczywiście z ustalonym rozmiarem menu oraz text-align center
  http://www.rudik1.webpark.pl/style.css – style z paddingiem
  http://www.rudik1.webpark.pl/style2.css – style bez paddingu
  Z góry dziękuję, oraz dziękuję za tak szybką odpowiedź
  
  Odpowiedz
9. Rudik pisze:
  
  8 10 2008 o 20:05
  
  Przepraszam, ale pomyliłem się wyżej, w drugim linku jest błąd, link jest taki:
  http://www.rudik1.webpark.pl/2.html
  Chodzi o link bez paddingu
  
  Odpowiedz
10. Rudik pisze:
  
  8 10 2008 o 22:34
  
  Oki już rozwiązałem problem
  Kluczem było to, że trzeba było dać display: block
  
  Odpowiedz
11. agressiva pisze:
  
  9 10 2008 o 08:24
  
  Fajnie, że sobie poradziłeś, wczoraj nie miałam chwili, zeby na to spojrzec.
  Display:block sprawia, że elementy, ktore wcześniej byly liniowe zachwowują się jak bloki (do elementów blokowych zaliczamy m.in. divy, wszystkie nagłówki typu h, paragrafy itp), układ taki sprawia, że w łatwy sposob można nadac tym elementom background obrazkowy, wysokosc i szerokosc w porownaniu z elem. liniowymi. Musisz w tym menu uważac za dłuzsze linki, bo padding górny sprawia, ze układają się od pewnego miejsca w poziomie i po zawinięciu sie w przypadku wiekszej ilości tekstu będę one ułożone nieco nierówno. Dlatego też lepiej stosowac krotkie frazy, żeby wszystko lepiej wyglądało. Pozdrawiam
  
  Odpowiedz
12. doloress pisze:
  
  23 10 2008 o 14:35
  
  A jak zrobić menu pionowe z takim efektem??
  
  Odpowiedz
13. agressiva pisze:
  
  23 10 2008 o 14:48
  
  Najlepiej ul nadac szerokosc kolumny w jakij mialyby sie ustawiac pozycje (li) i powinny ustawic sie jedno pod drugim ,
  np.
  
  #menu ul {
  list-style-type:none;
  margin:0 auto;
  width:200px;
  }
  
  Odpowiedz
14. Rudik pisze:
  
  8 11 2008 o 16:53
  
  Witam ponownie
  
  Otóż mam taki problem. Jak zrobić, aby menu było na dole strony umieszczone, ale bez użycia kodu position (z obojętnie jakimi wartościami), z góry dziękuje bardzo.
  
  Odpowiedz
15. Animowane menu za pomocą funkcji jQuery - animate() cz.1 | Vivee - blog o grafice, webmasteringu i fotografii pisze:
  
  4 01 2009 o 01:42
  
  [...] Zastosujemy w tym przypadku opisywany już na moim blogu efekt sliding-doors (także wyjaśniany na vivee) dzięki któremu pozbędziemy się problemu związanego z nadmiernym ładowaniem [...]
  
  Odpowiedz
16. m1chu pisze:
  
  8 01 2009 o 14:26
  
  Rudik: http://vivee.info/2009/01/08/pozycjonujemy-za-pomoca-kaskadowego-arkusza-stylow-css/
  
  Zawsze jest z position, bo nawet jak go nie ustawiasz to w wypadku rozmieszczania automatycznie narzucane jest position: static;.
  
  Miłego czytania.
  
  Odpowiedz
17. Procek pisze:
  
  27 07 2009 o 16:40
  
  Nie mogę się zgodzić co do: float:left; który nadaje blokowość – to nieprawda… display:block; i dopiero później left. Floatowaniu można poddać wyłącznie elementy blokowe, więc warto najpierw ten element mieć w postaci blokowej…
  
  Odpowiedz
18. Madbrsuh pisze:
  
  1 08 2009 o 15:37
  
  mam takie coś
  http://pawel.boo.pl/menu/
  Co ustawić aby tekst na przyciskach znajdował się na samym środku przycisku? A wszystko inne zostało tak jak jest..
  
  Odpowiedz
19. Procek pisze:
  
  1 08 2009 o 15:42
  
  Tutaj musisz zastosować parametr: line-height:[ wysokość przycisku] px. U mnie na blogu: http://7pl.info można poczytać o tym jak zrobić takie wyśrodkowane menu, ale bez określania jego szerokości
  
  Odpowiedz
20. ziomek pisze:
  
  4 08 2009 o 01:15
  
  Witam, mam taki mały problem, zrobiłem poziome menu w css mam: align: left; i align:right; co pozwala mi to menu przesuwać w lewo lub w prawo a chciał bym to menu przesunąć na doł w prawy róg i tu moje pytanie jak to zrobić z góry dzięki za pomoc pozdrawiam
  
  Odpowiedz
21. vivee.info: Poziome menu z efektem sliding doors | Vivee - wordpress, | flaker.pl pisze:
  
  6 01 2010 o 18:58
  
  [...] Poziome menu z efektem sliding doors | Vivee – wordpress, webmastering, grafika i fotografia vivee.info/…/poziome-menu-z-efektem-s… Pokaż reakcje /* */ inne strony z tej witryny + obserwuj co [...]
  
  Odpowiedz
Leave a Reply

Name (required)

Mail (will not be published) (required)

Website

Powiadom mnie o nowym komentarzu do tego artykułu.

Top 10

CMSy Artykuły dotyczące różnego rodzaju systemów zarządzania treścią CMS.
Flash Podstawowe informacje pomocne przy tworzeniu animacji w Adobe Flash.
Fotografia Samouczki dotyczące nie tylko robienia zdjęć ale też ich cyfrowej obróbki.
Grafika Ogólnie pojęta grafika komputerowa, od inspiracji, po tworzenie layoutów oraz mniejszych form graficznych.
Inne tutoriale wordpressowe Wszystkie inne zagadnienia dotyczące WordPressa.
Inspiracje Inspirujące materiały graficzne z dziedziny projektowania stron www, projektów DTP, digital painting, itp.
Obróbka zdjęć Techniki retuszu fotografii cyfrowych.
Rysunek Tworzenie rysowanych ilustracji w Adobe Photoshop.
Skóry do Wordpressa Darmowe oraz płatne – najlepsze skóry do WordPressa.
Skrypty client-side
Skrypty server-side
Tutoriale
Webdesign Tutoriale z zakresu projektowania stron www i grafiki użytkowej na rzecz internetu.
Wieczór z Open Source
Wordpress Ulubieniec naszej publiczności CMS WordPress: nowości, tricki, wtyczki, skóry i wszystko to co może przydać się przy korzystaniu z tego systemu.
Wtyczki do Wordpressa Recenzje oraz instrukcje najbardziej popularnych i najbardziej niezbędnych pluginów do WordPressa.
XHTML/CSS Ciekawostki z dziedziny kodowania stron www: XHTML, CSS, jQuery.

Najnowsze newsy

Wieczór z Open Source 2010

Jak co roku WSINF organizuje konferencję Wieczór z Open Source.
Chciałbym zaprosić was na tegoroczna konferencję Wieczór z Open Source 2010! Czytaj dalej

Grafart.org i WACOM zapraszają na konkursy!

Witam!

Myślę, że czas najwyższy nadmienić, że za niedługi czas zostanie zorganizowany pierwszy z trzech konkursów, w których główną nagrodą będą tablety firmy WACOM!
Za miejsca drugie oraz trzecie nagrodami będą kubki i koszulki firmy WACOM oraz magazyny graficzne PSD PHOTOSHOP oraz COMPUTERARTS.
Czytaj dalej

Zapraszamy na forum graficzne Graffika.pl

Każda osoba interesująca się grafiką komputerową ma czasami ochotę porozmawiać o swoich pracach, posłuchać rad, krytyki i pochwał innych osób. Idealnym miejscem na realizowanie takich potrzeb jest forum graficzne Graffika.pl.
Czytaj dalej