-
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 todisplay:inline;, ale my będziemy musieli bardziej skomplikować sprawę.
Na początek#menu linadajemyfloat: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 miejscutext-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 ai dlali a:hover. Teraz w zależności który efekt tła chcemy mieć na poszczególnych wariantach należy patrzeć nabackground-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 dodaniadisplay: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-positionw 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 odpowiedniegobackground-positionTaki 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.
-
21 Responses to “Poziome menu z efektem sliding doors”
Leave a Reply
Komentarze
Kategorie
Top 10
Wski: Cross Processing
Kallie Akinyooye: Krótko o… Wordpress 2.7
Agressiva: Jak za pomocą js poprawić wygląd formularzy
S.Wojnowski: Jak za pomocą js poprawić wygląd formularzy
Arek: Menu “wychodzące” zza strony
Arek: Full of colours
Giuseppe Heitner: Wstęp do programowania zorientowanego obiektowo w PHP5…
Kamil: 960 Grid System
Piotrek: Rozwijany panel z odrobiną słodyczy
Kuba: Tworzymy indywidualną stronę startową dla naszych fanów na Facebooku
- 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
Polecane strony
- WordPress Theme from Scratch – Day 1: PSD
- 20 Tutorials For Creating HDR Images
- Ask the Expert – Using Wordpress to Build Large Scale Websites with Derek Herman
- Making an Interactive Picture with jQuery
- Create a Horizontal Scrolling Website
- 800 Most Wanted Free RSS Icons for Bloggers
- 45 Most Wanted Beautiful Free Hand Drawn Fonts
- Caffe-Break Themed Blog Layout Photoshop Tutorial
- Create a nature inspired layout in photoshop
- Coding a Web Design for Speed and Quality
- Beautiful Hand Drawn Websites | Abduzeedo | Graphic Design Inspiration and Photoshop Tutorials
- 40 Fresh Creative and Inspiring Photographs
- Wordpress portfolio layout | Grafpedia
- Simple Facial Photo Retouching | Grafpedia
- Create a beauty layout in 10 steps | Grafpedia























Tylko że jest błąd… daliście zamiast przykładu strony – obrazek %)
Już jest ok.
Mozna to tez zrobić za pomoca JS ;p ale ogólnie dobrze i łatwiej w css
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.
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/
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.
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.
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ź
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
Oki już rozwiązałem problem
Kluczem było to, że trzeba było dać display: block
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
A jak zrobić menu pionowe z takim efektem??
Najlepiej ul nadac szerokosc kolumny w jakij mialyby sie ustawiac pozycje (li) i powinny ustawic sie jedno pod drugim ,
np.
list-style-type:none;
margin:0 auto;
width:200px;
}
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.
[...] 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 [...]
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.
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…
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..
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
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
[...] 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 [...]