Poradnik programisty front-endu: rodzaje poziomych paneli nawigacyjnych. Menu wyśrodkowane poziomo przy użyciu wyłącznie CSS. Co to jest układ menu
Wyśrodkowanie poziomego menu może być trudne, szczególnie dla osób, które dopiero zaczynają przygodę z CSS. Poszukiwanie rozwiązań prowadzi do bardzo ograniczonej listy metod, z których większość opiera się na trikach CSS, JavaScript lub zastosowaniu niestandardowych reguł, które nie są obsługiwane przez wszystkie przeglądarki. W tym samouczku omówimy metodę centrowania poziomego menu, która wykorzystuje tylko standardowe reguły CSS i działa we wszystkich przeglądarkach.
Przykład menu wyśrodkowanegoPoniżej znajduje się poziome menu wyśrodkowane w tej kolumnie, w którym aktywowana jest druga zakładka. Możesz spróbować zmienić rozmiar okna przeglądarki lub strony, aby mieć pewność, że menu będzie zawsze wyśrodkowane i funkcjonalne.
Na stronie demonstracyjnej możesz zobaczyć kilka opcji projektowania menu wyśrodkowanego poziomo. Każdy z nich możesz wykorzystać w swoich projektach.
znaczniki HTMLWszystkie menu pokazane w tym samouczku mają prostą strukturę. Jest to zwykła nieuporządkowana lista linków umieszczonych w elemencie div.
- Pierwsza zakładka
- Druga zakładka
- Trzecia zakładka
- Czwarta zakładka
Poniżej znajduje się pełny kod CSS użyty do wyśrodkowania menu. Wyjaśnienie zasady działania podane jest w dalszej części lekcji.
#centeredmenu ( float:lewy; szerokość:100%; tło:#fff; border-bottom:4px solid #000; przepełnienie:ukryty; pozycja:względna; ) #centeredmenu ul ( Clear:lewy; float:lewy; styl listy :brak; margines:0; dopełnienie:0; pozycja:względna; lewo:50%; wyrównanie tekstu:środek; ) #centeredmenu ul li ( display:block; float:left; styl listy:brak; margines:0; dopełnienie: 0; pozycja: względna; prawa: 50%; ) #centeredmenu ul li a ( display:block; margines: 0 0 0 1px; dopełnienie: 3px 10px; tło:#ddd; kolor:#000; dekoracja tekstu: brak; line-height:1.3em; ) #centeredmenu ul li a:hover ( tło:#369; kolor:#fff; ) #centeredmenu ul li a.active, #centeredmenu ul li a.active:hover ( color:# fff; tło: #000; waga czcionki: pogrubiona; )
Jak działa metoda centrowania?Działanie metody opiera się na względnym pozycjonowaniu pływających elementów blokowych jeden w drugim. Najpierw przyjrzyjmy się, jak zmienia się rozmiar elementów wraz z przemieszczeniem.
Element div(blok) bez przemieszczenia jest rozciągany na całą dostępną mu szerokość.
Ale jeśli przesuniemy element div w lewo, automatycznie zmniejszy się on, aby dopasować się do zawartości. Kompresja jest kluczem do wdrożenia tej metody centrowania menu. Pomaga przenieść menu do właściwej pozycji.
Standardowe menu wyrównane do lewejWeźmy standardowe menu wyrównane do lewej strony i przeróbmy je krok po kroku. Dla przejrzystości elementy są pokolorowane na różne kolory, dzięki czemu od razu wiadomo, co gdzie trafia.
Proszę zwrócić uwagę na następujące punkty:
- Element wyśrodkowanymenu div(niebieski prostokąt) jest przesunięty w lewo, ale ma szerokość 100%, więc pozostaje rozciągnięty na całej stronie.
- Element ul(różowy prostokąt) znajduje się wewnątrz elementu menu wyśrodkowane div i przesuwa się w lewo. Oznacza to, że zostanie skompresowany do szerokości swojej zawartości, czyli do całkowitej szerokości wszystkich zakładek.
- Wszystkie elementy li (zielone prostokąty) znajdują się wewnątrz elementu ul i przesuń się w lewo. W ten sposób są one skompresowane do rozmiaru znajdujących się w nich ogniw i ułożone w jedną poziomą linię.
- Wewnątrz każdego łącza (pomarańczowe prostokąty) wyświetlany jest tekst zakładki: Zakładka 1, Zakładka 2 i tak dalej.
Następnie odsuwamy element ul w prawo o 50%, używając pozycji:relative; . Kiedy element jest przesunięty procentowo w tych warunkach, należy pamiętać, że całkowita szerokość elementów w nim zawartych nie jest jego szerokością. W naszym przypadku przesunięcie następuje o połowę okna przeglądarki (czyli o przestrzeń dostępną do wyświetlenia), w efekcie nasze menu zaczyna się na środku okna i częściowo wychodzi poza jego granice. I przejdźmy do następnego kroku.
Zmień położenie wszystkich elementów menu
Pozostaje tylko przesunąć wszystkie elementy li pozostało 50%. Jest to 50% szerokości naszego elementu ul (kontenera zawierającego menu). W ten sposób zakładki są przesunięte dokładnie na środek okna.
Kilka ważnych uwagKorzystając z tej metody centrowania, należy pamiętać o kilku ważnych kwestiach:
- Od elementu ul częściowo wystaje poza okno, powoduje to wyświetlenie pasków przewijania. Dlatego musisz użyć reguły overflow:hidden;. dla elementu wyśrodkowanymenu div. Zatem wystająca część elementu div zostanie odcięty.
- Od elementu ul nie jest wyrównany do zakładek, nie można zastosować dla niego żadnych stylów wizualnych. Pozostaw element ul bez koloru tła i bez obramowania, aby stał się całkowicie niewidoczny. A style zakładek powinny być używane tylko dla elementów li.
- Jeśli chcesz ustawić specjalne style dla pierwszej i ostatniej zakładki, musisz dodać klasę dla pierwszego i ostatniego elementu li, dzięki czemu możesz nadać im indywidualny styl.
Proponowane rozwiązanie jest kompatybilne ze wszystkimi przeglądarkami, nie wykorzystuje JavaScript i obsługuje możliwość zmiany rozmiaru tekstu.
Kontynuujemy serię lekcją na temat menu rozwijanych. Następne w kolejności jest poziome menu rozwijane, które można wykonać samodzielnie, korzystając z CSS.
Jeśli trafiłeś tu przez przypadek lub poszukiwałeś innej implementacji rozwijanego menu, radzę przejść do sekcji nadrzędnej.
W tej sekcji opisano poziome menu rozwijane w CSS i HTML.
Nawigacja strony:
Więc, nasze zadanie:
utwórz poziome menu z rozwijaną listą css (na listach ul li) bez użycia jQuery i JavaScript, a także bez użycia tabel
Ryż. 2 (poziome menu rozwijane)
Zrobiłem 2 skórki w jednej, żeby pokazać jak wygląda kropla po prawej i pośrodku.| 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 | Panel poziomy |
Panel poziomy li (wyświetlanie: blok inline; prawy margines: 6 pikseli; tło: #FF8C00; transformacja: skewX(-45deg); -webkit-transform: skewX(-45deg); -o-transform: skewX(-45deg) ; -ms-transform: skewX(-45deg); -moz-transform: skewX(-45deg); ) a (wyświetlanie: blok; dopełnienie: 18px 35px; kolor: #fff; transformacja: skewX(40deg); -webkit- transformacja: skewX (40 stopni); -o-transform: skewX (40 stopni); -ms-transform: skewX (40 stopni); -moz-transform: skewX (40 stopni); ) li:hover ( tło: #1C1C1C; )
W przypadku drugiego programu opieramy się na poprzednim kodzie. Chciałem, aby moje pionowe pozycje menu miały zaokrąglone rogi, a nie ścięte.
Aby to zrobić, użyłem innej właściwości CSS border-radius.
W poprzednich artykułach pracowałem już z tym parametrem, więc myślę, że nie będzie żadnych trudności w zrozumieniu jego funkcjonowania.
Panel pionowy li (wyświetlanie: blok; margines: 13 pikseli; dopełnienie: 13 pikseli; tło: #FF8C00; szerokość: 20%; wyrównanie tekstu: środek; rozmiar czcionki: 20 pikseli; promień obramowania: 10 pikseli; ) a ( kolor: # fff; ) li:hover ( tło: #1C1C1C; )
Jak już zauważyłeś, główną zmianą w tym kodzie jest brak deklaracji display: inline-block, która tak naprawdę odpowiadała za poziome rozmieszczenie elementów nawigacyjnych.
Podpozycje w menu: lista rozwijanaPrzyjrzeliśmy się głównym grupom paneli nawigacyjnych, ale istnieje kilka innych odmian, a jeszcze lepiej, dodatków.
Czasami zdarzają się sytuacje, gdy niektóre punkty uzupełniają główne. W takim przypadku nie można obejść się bez list rozwijanych. Tworzone są poprzez transformacje przy użyciu narzędzi CSS.
Poniżej załączam kod małego programu realizującego to podejście.
| 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 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | Treść listy rozwijanej ( dopełnienie po lewej: 30%; rozmiar czcionki: 18 pikseli; ) .m-menu ( margines: 0; dopełnienie: 9 pikseli; szerokość: 50%; wyrównanie tekstu: środek; obramowanie: 3 piksele stałe #000; tło : #FF8C00; ) .m-menu > li ( pozycja: względna; wyświetlacz: blok inline; ) .m-menu a ( wyświetlacz: blok; margines-lewy: -2px; dopełnienie: 13px; kolor: #fff; obramowanie -left: 3px solid #fff; ) .m-menu a:hover ( tło: #1C1C1C; ) .m-menu .s-menu ( po lewej: 10px; pozycja: bezwzględna; wyświetlacz: brak; szerokość: 155px; margines: 0; dopełnienie: 0; styl listy: brak; tło: #FF8C00; ) .m-menu .s-menu a ( obramowanie: 1px solid #000; ) .m-menu > |
Treść listy rozwijanej ( dopełnienie po lewej: 30%; rozmiar czcionki: 18 pikseli; ) .m-menu ( margines: 0; dopełnienie: 9 pikseli; szerokość: 50%; wyrównanie tekstu: środek; obramowanie: 3 piksele stałe #000; tło : #FF8C00; ) .m-menu > li ( pozycja: względna; wyświetlacz: blok inline; ) .m-menu a ( wyświetlacz: blok; margines-lewy: -2px; dopełnienie: 13px; kolor: #fff; obramowanie -left: 3px solid #fff; ) .m-menu a:hover ( tło: #1C1C1C; ) .m-menu .s-menu ( po lewej: 10px; pozycja: bezwzględna; wyświetlacz: brak; szerokość: 155px; margines: 0; dopełnienie: 0; styl listy: brak; tło: #FF8C00; ) .m-menu .s-menu a ( obramowanie: 1px solid #000; ) .m-menu > li:hover .s-menu ( wyświetlacz : blok; )
Przede wszystkim zastanówmy się, do czego służy menu i do czego służy.
Menu witryny to lista stron lub sekcji witryny, umieszczona w widocznym miejscu i przeznaczona do dostępu użytkownika do tych stron lub sekcji. Istnieją dwa rodzaje menu: główne i dodatkowe. Zazwyczaj menu główne zawiera linki do kluczowych sekcji witryny. Dodatkowe menu zazwyczaj zawierają linki do podsekcji lub konkretnych stron. Dodatkowo menu mogą mieć strukturę hierarchiczną 3 typów: lista rozwijana, lista rozwijana i lista rozwinięta (może mieć strukturę drzewiastą).
Dowiedzieliśmy się więc, że menu jest listą jednopoziomową lub wielopoziomową. W związku z tym zrobimy to za pomocą elementu reprezentującego listę. W HTML takie elementy definiowane są za pomocą znaczników ul i ol, które oznaczają odpowiednio listy wypunktowane i numerowane. Każdy element listy jest zdefiniowany przez znacznik li.
W naszym dokumencie internetowym w miejscu przeznaczonym na kod menu poziomego wpisz następujący kod HTML:
Ta lista będzie głównym menu naszej witryny. Nie jest konieczne tworzenie menu głównego w formie zakładek. Można nawet skorzystać z wielopoziomowego menu rozwijanego, rozwijanego lub czegoś innego, ale projektując menu, należy zwrócić uwagę na łatwość nawigacji. Z reguły im mniej zagnieżdżenia dowolnego menu, tym jest ono wygodniejsze. Dlatego menu z więcej niż jednym poziomem zagnieżdżenia nie jest najlepszym wyborem. W takim przypadku lepiej rozważyć możliwość wprowadzenia dodatkowego menu lub innego sposobu nawigacji.
Pierwszy element menu głównego posiada atrybut klasa ze znaczeniem wybrany, więc korzystając z reguły CSS określonej przez selektor o nazwie tej klasy, możemy konkretnie podświetlić zakładkę menu zdefiniowaną przez ten element. W tym przykładzie nie będziemy w żaden sposób podświetlać wybranego elementu. Jest to jednak sposób na tworzenie menu, które posiadają aktualnie wybraną zakładkę. Ponadto wszystkie linki tutaj prowadzą do bieżącej strony. W prawdziwym menu nie powinno być żadnych linków prowadzących do Ciebie, z wyjątkiem być może linku do strony głównej. Ponadto wszystkie linki są zawarte w tagu Zakres, będziemy go potrzebować do wyśrodkowania tekstu w pionie.
Listy w HTML są elementami blokowymi. Jeśli teraz otworzysz naszą stronę w swojej przeglądarce, zobaczysz, że linki w naszym menu są umieszczone jeden pod drugim. Dlatego wraz z projektem każdego elementu definiującego zakładkę musimy określić styl jej wyświetlania.
Dodajmy następujące reguły do pliku stylu:
#hmenu (
margines po lewej stronie: 160px; /* służy do wyrównania menu tak, aby zaczynało się nad obszarem zawartości */
}
/* zaprojektuj zakładkę */
#hmenu li (
/* ustaw czcionkę */
rodzina czcionek: Calibri;
rozmiar czcionki: 14px;
/* górne wypełnienie */
margines u góry: 5 pikseli;
/* odległość między zakładkami */
margines lewy: 0,5 em;
margines prawy: 0,5 em;
/* Wskaźnik myszy */
kursor: wskaźnik;
/* Tło */
obraz tła: url("mm_button.png");
powtarzanie w tle: brak powtórzeń;
/* wymiary tabulatora */
szerokość: 100px;
wysokość: 40px;
/* sprawia, że element jest jednocześnie liniowy i blokowy */
wyświetlacz: blok inline
}
/* projekt aktywnej karty */
.wybrane ( /* ... */)
/* tabulator po najechaniu myszką */
#hmenu li:najedź (
obraz tła: url("mm_button_hover.png");
}
/* formatowanie tekstu linku */
#hmenu li a (
Zielony kolor;
dekoracja tekstu: brak; /* wyłącz podkreślanie linków */
}
/* wyśrodkuj tekst w pionie */
#hmenu li a span (
Blok wyświetlacza; /* utwórz blok elementów */
wyściółka górna: 0,8 em;
wyściółka na dole: 0,8 em;
}
Tutaj wszystko jest opisane wewnątrz kodu, zaznaczę tylko, że korzystając z powyższego kodu CSS, tylko nowoczesne przeglądarki będą poprawnie wyświetlać stronę. Oznacza to, że w wersjach przeglądarki Internet Explorer niższych niż 8 strona nie będzie wyświetlana poprawnie. Dzieje się tak, ponieważ starsze przeglądarki, takie jak Internet Explorer 6 i 7, nie obsługują wartości inline i inline-block dla list. Zastąpienie wyświetlania linii: inline-block w drugiej regule za pomocą
/* dla niższych wersji Firefoksa */
wyświetl: -moz-inline-stack;
/* dla wszystkich z wyjątkiem IE 7 i Firefoksa */
wyświetlacz: blok inline;
/* Dla IE 7 i starszych */
*wyświetlacz: wbudowany;
_overflow: ukryty;
powiększenie: 1;
W ten sam sposób utwórzmy menu po lewej stronie.
Zaprojektujmy to za pomocą CSS.
#vmenu li a (
Zielony kolor;
dekoracja tekstu: brak;
}
#vmenu li (
rodzina czcionek:Calibri;
rozmiar czcionki: 14px;
styl czcionki:normalny;
szerokość: 115 pikseli;
Blok wyświetlacza;
przepełnienie:ukryte; /* ukryj wystające elementy */
dopełnienie: 0,5em 0em 0,5em 0;
/* spraw, by element wyglądał jak przycisk, ustawiając odpowiednie tło */
obraz tła:url("sm_button.png");
pozycja tła:środek;
powtarzanie w tle: brak powtórzeń;
}
#vmenu rozciąga się (
szerokość: 100 pikseli;
dopełnienie po lewej: 1em;
dopełnienie po prawej: 100 pikseli;
Blok wyświetlacza;
}
#vmenu li:najedź (
obraz tła:url("sm_button_hover.png");
}
Podobnie jak w poprzednim przypadku, w niższych wersjach przeglądarki Internet Explorer wystąpi błąd wyświetlania. Wiąże się to z podwojeniem wcięcia elementów w tej przeglądarce.
W następnej lekcji uzupełnimy układ naszej strony, umieszczając logo naszej witryny, treść i stopkę strony.
Przedmowa: Pracując jako projektant układu, Twój pokorny sługa zauważył, że istnieje kilka rodzajów menu; Jednocześnie do układu każdego z nich należy zastosować własne techniki.
Szczegóły znajdują się pod wycięciem.
Ten artykuł jest skierowany bardziej do początkujących projektantów układów, ale być może doświadczeni profesjonaliści również znajdą w nim coś nowego lub uznają go za podręcznik.
Temat jest skonstruowany w następujący sposób: najpierw stawiane jest zadanie - opisany jest rodzaj wymaganego bloku nawigacyjnego, następnie rozważane są techniki, które pozwalają stworzyć właśnie taką nawigację.
Zakłada się, że style są zapisywane w ramach semantycznie poprawnej struktury menu, która wygląda mniej więcej tak:
Dom
Złożyc zamówienie
Informacja zwrotna
Projektując dla typu dokumentu innego niż HTML5, pomiń element nav lub zastąp go odpowiednim div.
No to zaczynamy!..
Pozycje menu umieszczone po prawej/lewej stronie W tej sekcji omówione zostały bloki nawigacyjne, w których elementy znajdują się po prawej/lewej stronie. Aby rozmieścić takie bloki, w zależności od sytuacji, możesz skorzystać z kilku metod:Metodę tę warto stosować przy układaniu prostego menu, w którym elementy prezentowane są w postaci pojedynczych słów, bez dopełnienia i oddzielane jedynie spacjami między nimi:
Jak to zrobić
Elementy Li w CSS muszą ustawić właściwość display: inline. Nawiasem mówiąc, usunie to również znaczniki, które w większości menu tego typu są niepotrzebne, ponieważ znajdują się one w dodatkowych blokach, które są zawarte w elementach z display: list-item, ale nie ma ich w inline.
W przypadku ul ustaw właściwość wyrównania tekstu odpowiednio na prawą lub lewą.
Notatki
- Korzystając z tej opcji warto pamiętać, że w przypadku elementów inline nie są brane pod uwagę marginesy pionowe, natomiast sprawdzają się marginesy poziome;
- Jeśli potrzebujesz układu idealnego w pikselach, możesz napotkać problem: w różnych przeglądarkach szerokość przestrzeni między elementami jest różna. Aby rozwiązać problem, odległość między elementami ustala się z marginesami i usuwa się spacje;
- Jeśli podkreślisz dolną granicę elementu menu, w nowoczesnych przeglądarkach możesz uzyskać piękne animowane menu on:hover (JSFiddle).
Kiedy chcesz utworzyć menu z elementami z dopełnieniem i/lub stałą wysokością/szerokością:
Jak to zrobić
Ustaw float: left lub float:right na elementy li. Jeśli chcesz usunąć znaczniki, musisz dodać display: block lub list-style: none.
Notatki
- Konieczne jest „oczyszczenie” ul poprzez nadanie jej class.clearfix lub umieszczenie elementu z clear: obydwa na końcu, w przeciwnym razie ul będzie miała zerową wysokość; Możesz przeczytać o innych sposobach „czyszczenia” pływaków;
- Przykład ciekawego menu z elementami pływającymi: html5guy.
Zadania są takie same jak przy kodowaniu za pomocą float. I tak, rozwiązując taki problem, blok inline padł w nierównej bitwie. Po pierwsze, kompatybilność tego rozwiązania między przeglądarkami jest mniejsza niż float, a po drugie, pomiędzy blokami inline, a także pomiędzy elementami inline pojawiają się spacje, często niepotrzebne. Problemy te można rozwiązać, ale po co je tworzyć?
Jak to zrobić
Ustaw wyświetlacz: blok inline na elementy li. Cóż, dla IE7 (jeśli go obsługujesz) piszemy *display:inline; *powiększenie: 1.
Menu znajduje się pośrodku:
Jak to zrobić
W zależności od typu pozycji menu dla elementów li ustawiamy display: inline lub display: inline-block (jeśli pozycje menu mają dopełnienie i określono szerokość i/lub wysokość) dla elementów li. Dla elementu nadrzędnego (ul) ustawiamy wyrównanie tekstu: do środka.
Notatki
Powtórzę: czasami zachodzi potrzeba usunięcia spacji pomiędzy elementami inline i inline-block; Można znaleźć kilka sposobów rozwiązania tego problemu.
Pozycje menu są równomiernie rozmieszczone na całej szerokości, z przerwami pomiędzy poszczególnymi pozycjami:
Jak to zrobić
W zależności od rodzaju pozycji menu ustaw display: inline lub display: inline-block na elementy li. Ustaw rodzica (ul) na wyrównanie tekstu: justuj. Ale justowanie nie zadziała od razu - musisz przepełnić pierwszą linię (jeśli nie jest jasne, dlaczego tak się dzieje, uruchom program Word i spróbuj rozciągnąć kilka słów do pełnej szerokości za pomocą justify). Dlatego na końcu elementu ul dodajemy dodatkowy element z displayem: inline-block i szerokość: 100%, lub jeszcze lepiej pseudoelement::after o tych samych cechach.
Notatki
Pamiętasz, że w poprzednich typach menu usunęliśmy spacje między elementami z właściwością display ustawioną na inline i inline-block? Zatem w tym przypadku absolutnie nie można tego zrobić - przeglądarka potrzebuje spacji pomiędzy pozycjami menu. Nawiasem mówiąc, jeśli usuniesz spacje między niektórymi elementami, możesz grupować przyciski (JSFiddle):
Pomiędzy pozycjami menu nie ma przerw, dowolna liczba pozycji menu zajmuje całą szerokość:
Jak to zrobić
Rozwiązując ten problem, pojawia się pokusa uzupełnienia menu tabelami; ale nie będziemy naruszać semantyki dokumentu, prawda? Dlatego używamy display: table-cell dla li i display: table dla ul; następnie ustaw szerokość dla ul
Jeśli potrzebujemy wsparcia dla starszych przeglądarek, korzystamy ze skryptu Polyfill, który zastępuje takie bloki tabelami dla IE6 i IE7 lub organizuje powrót w inny sposób.
Notatki
Układając menu w ten sposób, należy pamiętać, że nie można umieszczać elementów z pozycji: bezwzględnej względem komórki-tabeli.
Dlaczego?
Faktem jest, że specyfikacja w3c nie definiuje pozycji: względnej akcji na komórce tabeli, więc każda przeglądarka może mieć swoją własną charakterystykę.
Spójrz na ten przykład w różnych przeglądarkach (szczególnie przyglądamy się zachowaniu Mozilla Firefox!). 
Aby rozwiązać ten problem, musisz umieścić element div w komórce, względem którego chcesz go ustawić.