Poprawny projekt menu w html5 css3. CSS - poziome menu dla początkujących

Od autora: Witamy na naszym blogu poświęconym tworzeniu stron internetowych. Jest to seria artykułów poświęconych nowej specyfikacji, a dziś chciałbym Wam opowiedzieć jak zrobić menu w html5 i czym różni się ten proces od tego samego w poprzednich wersjach języka.

Jakie są różnice

Przede wszystkim chciałbym powiedzieć, że specyfikacja nie jest taka nowa - zaczęła się formować już w 2009 roku. Właściwie od tego czasu następuje ciągły rozwój - w html5 pojawiają się nowe funkcje, nowoczesne przeglądarki obsługują te właśnie funkcje coraz bardziej, więc wkrótce będziemy mogli mówić o pełnym wsparciu tej technologii, choć nie jest to coś ujednoliconego, to jest raczej zestawem nowych funkcji, z których każda jest niezależna.

Cóż, czym różni się tworzenie głównej nawigacji (menu), skoro czytasz artykuł na ten temat, to na pewno muszą być jakieś różnice. Cóż, jak wcześniej tworzono menu? Zwykle wykorzystywano do tego wypunktowaną listę, którą umieszczano w dodatkowym pojemniku na całą nawigację - zwykłym div.

Tak więc, wraz z pojawieniem się nowych tagów, teraz możesz to zrobić bardziej poprawnie - zamiast tagu div zawiń menu w nav - nowy element semantyczny, który został stworzony specjalnie w celu zebrania w nim najważniejszych linków, pogrupuj je razem.

Możesz umieścić zarówno listę, jak i tylko zestaw linków w nav. Wydaje mi się, że jest to jeszcze prostsze i bardziej poprawne rozwiązanie, choć w wielu szablonach nadal można zobaczyć implementację menu z użyciem tagów ul, li, a.

Co ciekawe, kontener nav jest zaprojektowany specjalnie dla priorytetowych linków na stronie. Tak naprawdę na stronie może znajdować się więcej niż jeden taki kontener, ale warto umieszczać w nich tylko te linki, które faktycznie tworzą główną nawigację (np. górne menu główne i jego duplikat w stopce strony).

Jak zrobić poziome menu za pomocą HTML5

Nie potrzebujesz nawet żadnej ramki na liście, wszystko będzie początkowo wyświetlane w jednym wierszu, ponieważ linki są elementami wbudowanymi.

Inną rzeczą jest to, że są one bardzo ograniczone w projektowaniu ze względu na ich właściwości inline. Będziesz mógł operować tylko takimi właściwościami jak: kolor, rozmiar czcionki, marginesy. Jeśli chcesz ustawić określony kolor tła, zrobić separatory i dodać wcięcia (lub określić rozmiar każdej pozycji menu), to nie zadziała to z ciągiem znaków.

Tutaj będziemy musieli przekonwertować nasze przedmioty na elementy blokowe. Aby to zrobić, muszą napisać właściwość:

Blok wyświetlacza ;

Teraz idą z góry na dół, czyli nasza nawigacja stała się pionowa. Aby zmienić go z powrotem w poziomy, musisz dodać pewne właściwości. Na przykład, zamiast typu bloku, zdefiniuj dla nich typ bloku-linii lub ustaw je na (float: left). Przeczytaj więcej o tych metodach.

Nawigacja pionowa

Zwykle do zrobienia pionowego menu w html5 używana jest lista, ale znaczniki, które podałem powyżej, również są dla nas dobre. Jak widziałeś, jeśli zamienisz łącza na łącza blokowe, automatycznie ustawią się one jeden po drugim od góry do dołu, ponieważ dwa bloki nie mogą stać na tej samej linii.

Teraz możesz zastosować do nich pożądane zasady projektowania. Bloki mają o wiele więcej właściwości niż elementy wbudowane, więc masz o wiele więcej opcji. Na przykład dodałem te:

a(dekoracja tekstu: brak; kolor: #fff; dopełnienie: 5px; rozmiar czcionki: 22px; wyświetlacz: blok; tło: gradient liniowy (do prawej, rgba(96,108,136,1) 0%,rgba(63,76,107 ,1) 100%); szerokość: 200 pikseli; wyrównanie tekstu: środek )

tekst - dekoracja : brak ;

kolor : #fff;

wypełnienie: 5px

rozmiar czcionki: 22px;

Blok wyświetlacza ;

tło: gradient liniowy (w prawo, rgba (96, 108, 136, 1) 0%, rgba (63, 76, 107, 1) 100%);

szerokość: 200px

tekst — wyrównaj: do środka

Menu poziome to lista sekcji witryny, więc bardziej logiczne jest umieszczanie znaczników wewnątrz elementu

Jak zrobić menu poziome: przykłady znaczników i projektów

Znaczniki HTML i podstawowe style menu poziomego

Domyślnie wszystkie elementy listy są zlokalizowane pionowo, obejmujący całą szerokość elementu kontenera, który z kolei obejmuje całą szerokość jego bloku kontenera.

Znaczniki HTML do nawigacji poziomej

Pozycja w menu
Pozycja w menu
Pozycja w menu

Menu poziome znajdujące się wewnątrz tagu można dodatkowo umieścić wewnątrz elementu

...

Istnieje kilka sposobów ich umieszczenia poziomo. Najpierw musisz zresetować domyślne style przeglądarki dla elementów nawigacyjnych:

Ul ( styl listy: brak; /*usuń znaczniki listy*/margines: 0; /*usuń górny i dolny margines 1em*/ padding-left: 0; /*usuń lewe dopełnienie 40px*/ ) a (dekoracja tekstu: brak; /*usuń podkreślenie tekstu linku*/)

Metoda 1. li (wyświetlacz: wbudowany;)

Ustaw elementy listy w tekście. W efekcie są one ułożone poziomo, po prawej stronie między nimi dodany jest odstęp równy 0,4em (liczony względem wielkości czcionki). Aby go usunąć, dodaj ujemny prawy margines do li li (margin-right: -4px;) . Następnie stylizuj linki według własnego uznania.

Metoda 2. li (float: left;)

Sprawiamy, że elementy listy są pływające. W rezultacie są one ułożone poziomo. Wysokość bloku kontenera ul staje się zerowa. Aby rozwiązać ten problem, dodajemy (przepełnienie: ukryte;) do ul , rozszerzając go i tym samym umożliwiając zawieranie elementów pływających. W przypadku linków dodaj (display: block;) i stylizuj je według własnego uznania.

Metoda 3. li (display: inline-block;)

Tworzenie elementów listy inline-block. Są ułożone poziomo, po prawej stronie powstaje szczelina, podobnie jak w pierwszym przypadku. W przypadku linków dodaj (display: block;) i stylizuj je według własnego uznania.

Metoda 4. ul (wyświetlacz: flex;)

Uczynienie listy ul elastycznym kontenerem przy użyciu . W rezultacie elementy listy są ułożone poziomo. Dodaj (display: block;) dla linków i stylizuj je według własnego uznania.

1. Responsywne menu z efektem podkreślenia po najechaniu na link

2. Responsywne menu na stronę ślubną

3. Responsywne menu z przegrzebkami

4. Responsywne menu wstążki

5. Responsywne menu z logo na środku

6. Responsywne menu z logo po lewej stronie

Przede wszystkim zastanówmy się, do czego służy menu i co to jest.

menu witryny- jest to lista stron lub sekcji witryny, umieszczona w widocznym miejscu i przeznaczona do dostępu użytkownika do tych stron lub sekcji. Menu są dwojakiego rodzaju: główne i dodatkowe. Zazwyczaj menu główne zawiera linki do kluczowych sekcji witryny. Dodatkowe menu zwykle zawierają łącza do podsekcji lub określonych stron. Dodatkowo menu mogą mieć strukturę hierarchiczną 3 typów: lista rozwijana, lista rozwijana i lista rozwinięta (może mieć strukturę drzewiastą).

Tak więc dowiedzieliśmy się, że menu jest listą jednopoziomową lub wielopoziomową. W związku z tym zrobimy to za pomocą elementu reprezentującego listę. W HTML takie elementy są definiowane przez znaczniki ul I ol, oznaczające odpowiednio listy wypunktowane i numerowane. Każdy element listy jest ograniczony znacznikiem li.

W naszym dokumencie internetowym, w miejscu przeznaczonym na kod menu poziomego, wpisz następujący kod HTML:

Usługi i ceny

Gwarancje

Technologie

O firmie

Ta lista będzie głównym menu naszej strony internetowej. Nie jest konieczne tworzenie menu głównego w formie zakładek. Możesz nawet użyć wielopoziomowego menu rozwijanego lub rozwijanego, ale projektując menu, zwróć uwagę na łatwość nawigacji. Z reguły im mniejsze zagnieżdżenie dowolnego menu, tym wygodniejsze. Dlatego menu, które ma więcej niż jeden poziom 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 ma atrybut klasa ze znaczeniem wybrany, więc korzystając z reguły CSS podanej przez selektor o tej nazwie klasy, możemy podświetlić zakładkę menu zdefiniowaną przez ten element. W tym przykładzie nie podświetlimy w żaden sposób wybranego elementu. Jednak w ten sposób tworzone są menu, które posiadają aktualnie wybraną zakładkę. Ponadto tutaj wszystkie linki prowadzą do bieżącej strony. W prawdziwym menu nie powinno być linków prowadzących do siebie, może z wyjątkiem linku do strony głównej. Ponadto wszystkie linki są ujęte w tagu Zakres, będziemy go potrzebować do wyśrodkowania tekstu w pionie.

Listy w HTML to elementy blokowe. Jeśli otworzysz teraz naszą stronę internetową w przeglądarce, zobaczysz, że linki w naszym menu są umieszczone jeden pod drugim. Dlatego wraz ze stylem każdego elementu, który definiuje kartę, musimy zdefiniować styl jej wyświetlania.

Dodaj następujące reguły do pliku stylu:

#hmenu(
lewy margines: 160px; /* służy do wyrównania menu tak, aby zaczynało się nad obszarem zawartości */
}

/* stylizuj kartę */
#hmenu li (
/* ustaw czcionkę */
rodzina czcionek: Calibri;
rozmiar czcionki: 14px;
/* dopełnienie od góry */
górny margines: 5 pikseli;
/* odstępy między tabulatorami */
margines lewy: 0,5 em
prawy margines: 0,5 em
/* Wskaźnik myszy */
kursor: wskaźnik;
/* Tło */
obraz tła: url("mm_button.png");
powtórzenie w tle: brak powtórzeń;
/* wymiary zakładki */
szerokość: 100px
wysokość: 40px;
/* spraw, aby element był jednocześnie wstawiany i blokowany */
wyświetlanie: blok liniowy
}

/* aktywne stylowanie kart */
.wybrano( /* ... */)

/* zakładka po najechaniu */
#hmenu li:hover(
obraz tła: url("mm_button_hover.png");
}

/* stylizacja tekstu linków */
#hmenu li a (
Zielony kolor;
dekoracja tekstu: brak; /* wyłącz podkreślanie linków */
}

/* wyśrodkowanie tekstu w pionie */
#hmenu li a span (
Blok wyświetlacza; /* utwórz blok elementu */
wyściółka górna: 0,8 em;
wyściółka-dno: 0,8em
}

Wszystko jest opisane tutaj w kodzie, zaznaczę tylko, że korzystając z powyższego kodu CSS, tylko nowoczesne przeglądarki poprawnie wyświetlą stronę. Oznacza to, że w Internet Explorerze poniżej wersji 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 wstawianych i bloków wstawianych dla list. Zastąpienie wyświetlacza: linia bloku śródliniowego w drugiej regule z

/* dla niższych wersji Firefoksa */
wyświetl: -moz-inline-stack;
/* dla wszystkich oprócz IE 7- i Firefox */
wyświetlanie: blok liniowy
/* Dla IE 7 i starszych */
*wyświetlacz:w linii;
_przepełnienie: ukryte;
powiększenie: 1;

Podobnie utworzymy menu po lewej stronie.

Diagnostyka

Zapobieganie

Leczenie

Chirurgia

Stylizujmy 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 wyskakujące elementy */
wypełnienie:0,5em 0em 0,5em 0;
/* spraw, aby element wyglądał jak przycisk, ustawiając odpowiednie tło */
obraz tła:url("sm_button.png");
pozycja w tle: środek;
powtórzenie w tle: brak powtórzeń;
}

#vmenu li rozpiętość (
szerokość: 100 pikseli;
dopełnienie-lewo:1em;
dopełnienie-prawe:100px;
Blok wyświetlacza;
}

#vmenu li:hover (
obraz tła:url("sm_button_hover.png");
}

Podobnie jak w poprzednim przypadku, w niższych wersjach Internet Explorera wystąpi błąd wyświetlania. Wiąże się to z podwojeniem wcięć elementów w tej przeglądarce.

W następnej lekcji uzupełnimy nasz układ strony, umieszczając logo naszej witryny, treść i stopkę strony.

Jeśli Twoja witryna nie ogranicza się do jednej strony internetowej, warto rozważyć dodanie paska nawigacyjnego (menu). Menu to sekcja witryny internetowej zaprojektowana w celu ułatwienia odwiedzającemu poruszania się po witrynie. Dowolne menu to lista linków prowadzących do wewnętrznych stron serwisu. Najłatwiejszym sposobem dodania paska nawigacyjnego do witryny jest utworzenie menu przy użyciu CSS i HTML.

Menu pionowe

Pierwszym krokiem w tworzeniu pionowego menu jest utworzenie listy wypunktowanej. Musimy również być w stanie zidentyfikować listę, więc dodamy do niej atrybut id o identyfikatorze „navbar”. Każdy element

nasza lista będzie zawierała jeden link:
- dom
- Aktualności
- Łączność
- O nas
Naszym kolejnym zadaniem jest zresetowanie domyślnych stylów list. Musimy usunąć zewnętrzne i wewnętrzne wcięcia z samej listy oraz znaczniki z elementów listy. Następnie ustaw żądaną szerokość:
#navbar (margines: 0; dopełnienie: 0; typ-styl-listy: brak; szerokość: 100px;)
Teraz nadszedł czas, aby stylizować same linki. Dodamy do nich kolor tła, zmienimy parametry tekstu: kolor, rozmiar i nasycenie czcionki, usuniemy podkreślenia, dodamy małe wcięcia i przedefiniowamy sposób wyświetlania element z inline do bloku. Dodatkowo do elementów listy dodano lewą i dolną ramkę.
Najważniejszą częścią naszych zmian jest przedefiniowanie elementów inline na elementy blokowe. Teraz nasze linki zajmują całe dostępne miejsce elementów listy, co oznacza, że nie musimy już najeżdżać kursorem na dokładny tekst, aby przejść do linku.
#navbar a (kolor tła: #949494; kolor: #fff; dopełnienie: 5 pikseli; dekoracja tekstu: brak; grubość czcionki: pogrubiona; lewe obramowanie: pełne 5 pikseli #33ADFF; wyświetlacz: blok; ) #navbar li ( lewe obramowanie: pełne 10 pikseli #666; dolne obramowanie: pełne 1 piksele #666; )
Połączyliśmy cały powyższy kod w jeden przykład, teraz klikając przycisk try, możesz przejść do przykładowej strony i zobaczyć wynik:
Nazwa dokumentu
- dom
- Aktualności
- Łączność
- O nas
Próbować "
Gdy przesuniesz kursor myszy nad element menu, jego wygląd może się zmienić, zwracając na siebie uwagę użytkownika. Możesz stworzyć taki efekt używając pseudoklasy :hover.

Wróćmy do naszego wcześniejszego przykładu menu pionowego i dodajmy następującą regułę do arkusza stylów:
#navbar a:hover (kolor tła: #666; obramowanie po lewej stronie: 5px stałe #3333FF; ) Spróbuj »
Menu poziome

W poprzednim przykładzie przyjrzeliśmy się pionowemu paskowi nawigacyjnemu, który jest najczęściej widoczny na stronach internetowych po lewej lub prawej stronie głównego obszaru treści. Jednak menu z linkami nawigacyjnymi są często umieszczone poziomo u góry strony internetowej.

Menu poziome można utworzyć, stylizując zwykłą listę. Wyświetl właściwość elementów
musisz przypisać wartość w wierszu, aby elementy listy znajdowały się jeden po drugim.

Aby ułożyć elementy menu poziomo, najpierw utwórz listę wypunktowaną z linkami:
- dom
- Aktualności
- Łączność
- O nas
Napiszmy kilka reguł dla naszej listy, które domyślnie resetują styl używany dla list i ponownie definiują elementy listy z blokowych na śródliniowe:
#navbar (margines: 0; padding: 0; list-style-type: none; ) #navbar li ( display: inline; ) Spróbuj »
Teraz musimy tylko zdefiniować styl dla naszego poziomego menu:
#navbar (margines: 0; padding: 0; list-style-type: none; border: 2px solid #0066FF; border-radius: 20px 5px; width: 550px; text-align: center; background-color: #33ADFF; ) #navbar a (kolor: #fff; dopełnienie: 5px 10px; dekoracja tekstu: brak; grubość czcionki: pogrubiona; wyświetlacz: blok w linii; szerokość: 100px; ) #navbar a:hover (promień obramowania: 20px 5px ; kolor tła: #0066FF; ) Spróbuj »
Rozwijane menu

Stworzone przez nas menu będzie posiadało główne linki nawigacyjne umieszczone w poziomym pasku nawigacyjnym oraz podpozycje, które będą wyświetlane dopiero po najechaniu kursorem myszy na pozycję menu, do której te podpozycje należą.

Najpierw musimy stworzyć strukturę HTML naszego menu. Główne linki nawigacyjne umieścimy na wypunktowanej liście:
- dom
- Aktualności
- Łączność
- O nas
Pozycje podrzędne umieścimy na osobnej liście, zagnieżdżając ją w elemencie
, który zawiera łącze nadrzędne względem elementów podrzędnych. Teraz mamy jasną strukturę naszego przyszłego paska nawigacyjnego:
- dom
- Aktualności
- Łączność
  - Adres
  - Telefon
  - E-mail
- O nas
Próbować "
Teraz zacznijmy pisać kod CSS. Pierwszym krokiem jest ukrycie listy z podpunktami z deklaracją display: none; tak, aby nie pojawiały się cały czas na stronie. Aby wyświetlić elementy podrzędne, potrzebujemy tego po najechaniu kursorem na element

lista została ponownie przekształcona w element blokowy:

#navbar ul (wyświetl: brak; ) #navbar li:hover ul (wyświetl: blok;)

Usuwamy domyślne wcięcia i znaczniki z obu list. Tworzymy elementy listy z linkami nawigacyjnymi pływającymi, tworzące poziome menu, ale dla elementów listy zawierających podpozycje ustawiamy float: none; tak, aby pojawiały się pod sobą.

#navbar, #navbar ul (margines: 0; padding: 0; list-style-type: none; ) #navbar li ( float: left; ) #navbar ul li ( float: none; )

Następnie musimy upewnić się, że rozwijane menu podmenu nie przesuwa zawartości poniżej paska nawigacji w dół. W tym celu ustawimy elementy listy na position: względna; , ale lista zawierająca podpozycje pozycja: absolutna; i dodaj właściwość top o wartości 100%, aby podmenu pozycjonowane bezwzględnie pojawiło się dokładnie pod linkiem.

#navbar ul (wyświetl: brak; pozycja: bezwzględna; góra: 100%; ) #navbar li ( float: lewy; pozycja: względna; ) #navbar (wysokość: 30px; ) Spróbuj »

Wysokość dla listy nadrzędnej została dodana celowo, ponieważ przeglądarki nie traktują pływającej zawartości jako zawartości elementu, bez dodania wysokości nasza lista zostanie zignorowana przez przeglądarkę, a treść po liście zawinie się wokół naszego menu.

Teraz musimy tylko nadać styl obu naszym listom, a nasze rozwijane menu będzie gotowe:

#navbar ul (wyświetl: brak; kolor tła: #f90; pozycja: bezwzględna; góra: 100%; ) #navbar li:hover ul (wyświetl: blok; ) #navbar, #navbar ul (margines: 0; dopełnienie: 0; typ-styl-listy: brak;) #navbar (wysokość: 30px; kolor-tła: #666; dopełnienie-left: 25px; min-szerokość: 470px;) #navbar li ( float: lewy; pozycja: względna; wysokość: 100%; ) #navbar li a ( display: block; padding: 6px; width: 100px; color: #fff; text-decoration: none; text-align: center; ) #navbar ul li ( float: none; ) #navbar li:hover (kolor tła: #f90; ) #navbar ul li:hover (kolor tła: #666; )

Większość klasycznych witryn internetowych używa menu poziomego jako głównego elementu nawigacyjnego. Czasami może zawierać różne dodatkowe funkcje - struktury wielopoziomowe, ikony podelementów, blok wyszukiwania, rozbudowane listy itp. Ostatnio na blogu był już mały wybór, a dziś przyjrzymy się 4 praktycznym przykładom, jak zrobić rozwijane menu w CSS + HTML. Informacje są przydatne dla początkujących programistów i tych, którzy chcą zmienić nawigację w swojej witrynie.

Pierwszy samouczek CSS3 Dropdown Menu jest najnowszym w kolekcji (z kwietnia 2016 r.). Zalety rozwiązania: w tym poziomym rozwijanym menu dla witryny znajdują się ikony w podelementach, implementacja i sam kod CSS są dość proste do zrozumienia i wdrożenia.

Krok 1 — znaczniki HTML

Pierwszym krokiem jest utworzenie nieuporządkowanej listy w HTML z linkami zakotwiczenia (#) dla jej elementów. Tam w jednej z pozycji dodajemy kolejną zagnieżdżoną listę, która będzie odpowiedzialna za podmenu.

Krok 2 - wyświetlenie menu

Usunięcie dodatkowego wypełnienia w CSS dla elementów poziomego rozwijanego menu strony. Na tym samym etapie ustalimy stałą szerokość i wysokość pozycji menu, a także dodamy zaokrąglone rogi.

.menu, .menu ul, .menu li, .menu a (margines: 0; dopełnienie: 0; obramowanie: brak; kontur: brak;) .menu (wysokość: 40px; szerokość: 505px; tło: #4c4e5a; tło: -webkit-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%); tło: -moz-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%); tło: -o-linear-gradient (top, #4c4e5a 0%, #2c2d33 100%); tło: -ms-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%); tło: linear-gradient(top, #4c4e5a 0%, # 2c2d33 100%); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;) .menu li (pozycja: względna; styl listy: brak; float: lewa; wyświetlacz: blok ; wysokość : 40px ; )

Menu, .menu ul, .menu li, .menu a (margines: 0; dopełnienie: 0; obramowanie: brak; kontur: brak;) .menu (wysokość: 40px; szerokość: 505px; tło: #4c4e5a; tło: - webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%); tło: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%); background: -o-linear-gradient( top, #4c4e5a 0%,#2c2d33 100%); tło: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%); background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;) .menu li (pozycja: względna; styl listy: brak; float: lewa; wyświetlacz: blok ; wysokość: 40px; )

Krok 3 - projekt linku

Oprócz podstawowych funkcji w stylach (czcionka, kolor, wysokość), używamy i tworzymy płynne przejście koloru tekstu po najechaniu myszką. Dodaliśmy również separatory do menu, usuwając obramowanie z pierwszej pozycji po lewej i ostatniej pozycji po prawej.

.menu li a (wyświetlanie: blok; wypełnienie: 0 14 pikseli; margines: 6 pikseli 0; wysokość linii: 28 pikseli; dekoracja tekstu: brak; obramowanie po lewej stronie: pełne 1 piksele #393942; obramowanie po prawej: pełne 1 piksele #4f5058; czcionka -rodzina: Helvetica, Arial, bezszeryfowa; grubość czcionki: pogrubiona; rozmiar czcionki: 13px; kolor: #f3f3f3; cień tekstu: 1px 1px 1px rgba (0, 0, 0, .6); -webkit- przejście: kolor .2s złagodzenie wejścia; -moz-przejście: przejście koloru .2s złagodzenie wejścia; -o-przejście: przejście koloru .2s złagodzenie wejścia; -ms-przejście: przejście koloru .2s złagodzenie wejścia -out; przejście : kolor .2s ułatwienie wyjścia; ) .menu li: pierwsze dziecko a (lewe obramowanie: brak ; ) .menu li: ostatnie dziecko a (prawe obramowanie: brak ; ) .menu li : najedź kursorem > a ( kolor : #8fde62 ; )

Menu li a ( display: block; padding: 0 14px; margin: 6px 0; line-height: 28px; text-decoration: none; border-left: 1px solid #393942; border-right: 1px full #4f5058; font- rodzina: Helvetica, Arial, bezszeryfowa; grubość czcionki: pogrubiona; rozmiar czcionki: 13 pikseli; kolor: #f3f3f3; cień tekstu: 1px 1px 1px rgba(0,0,0,.6); -webkit-przejście : kolor .2s ułatwienie-zanikanie; -moz-przejście: kolor .2s ułatwienie-zakończenie; -o-przejście: kolor .2s ułatwienie-zakończenie; -ms-przejście: kolor .2s ułatwienie- przejście: kolor .2s ułatwienie wyjścia; ) .menu li:pierwsze dziecko a (lewe obramowanie: brak; ) .menu li:ostatnie dziecko a(prawe obramowanie: brak; ) .menu li: najedź kursorem > a ( kolor: #8fde62; )

Krok 4 - podmenu

Ponieważ mamy rozwijane menu witryny CSS, powinniśmy również ustawić projekt zagnieżdżonej listy. Najpierw ustaw dopełnienie na 40 pikseli u góry i 0 pikseli po lewej + dodaj zaokrąglone rogi. Aby wyświetlić/ukryć podmenu, początkowo ustawiliśmy właściwość krycia na zero, a po najechaniu kursorem na jeden. Aby uzyskać efekt pojawienia się podmenu, ustaw wysokość listy na zero, a hover = 36px.

.menu ul (pozycja: bezwzględna; góra: 40px; lewa: 0; krycie: 0; tło: #1f2024; -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; granica -radius: 0 0 5px 5px;-webkit-przejście: krycie .25s łatwość .1s;-moz-przejście: krycie .25s łatwość .1s;-o-przejście: krycie .25s łatwość .1s;-ms-przejście: krycie .25s łatwość .1s; przejście: krycie .25s łatwość .1s;) .menu li: hover > ul (krycie: 1;) .menu ul li (wysokość: 0; przepełnienie: ukryte; dopełnienie: 0; -webkit-przejście : wysokość 0,25s swoboda 0,1 s ; -moz-przejście: wysokość 0,25 s swoboda 0,1 s ; -o-przejście: wysokość 0,25 s swoboda 0,1 s ; -ms-przejście: wysokość 0,25 s swoboda 0,1 s ; przejście : wysokość 0,25 s swoboda .1s ; ) .menu li: hover > ul li (wysokość: 36px; przepełnienie: widoczne; dopełnienie: 0;)

Menu ul (pozycja: bezwzględna; góra: 40px; lewa: 0; krycie: 0; tło: #1f2024; -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; border- promień: 0 0 5px 5px; -webkit-przejście: krycie 0,25s łatwość 0,1 s; -moz-przejście: krycie 0,25 s łatwość 0,1 s; -o-przejście: krycie 0,25 s łatwość 0,1 s; -ms-przejście: krycie . 25s łatwość .1s; przejście: krycie .25s łatwość .1s; .menu li:hover > ul (krycie: 1; ) .menu ul li (wysokość: 0; przepełnienie: ukryte; dopełnienie: 0; -webkit-przejście: wysokość 0,25s luz 0,1 s; -moz-przejście: wysokość 0,25 s luz 0,1 s; -o-przejście: wysokość 0,25 s luz 0,1 s; -ms-przejście: wysokość 0,25 s luz 0,1 s; przejście: wysokość 0,25 s luz . 1s; ) .menu li:hover > ul li (wysokość: 36px; przepełnienie: widoczne; dopełnienie: 0;)

Ustawiamy szerokość linków = 100px, na dole wszystkich elementów poza ostatnim dodana jest dolna granica. Ponadto, jeśli chcesz, możesz umieścić obrazki dla pozycji podmenu (uwaga! nie zapomnij zmienić ścieżek do obrazków w kodzie na te, których używasz).

.menu ul li a (szerokość: 100px; dopełnienie: 4px 0 4px 40px; margines: 0; obramowanie: brak; obramowanie-dół: 1px stałe #353539;) .menu ul li: ostatnie dziecko a (ramka: brak;) .menu a.documents ( background: url (../img/docs.png ) bez powtórzeń 6px środek ; ) .menu a.messages ( background : url (../img/bubble.png ) bez powtórzeń 6px środek ; ) .menu a.signout ( tło : url (../img/arrow.png ) bez powtórzeń 6px środek ; )

Menu ul li a (szerokość: 100px; dopełnienie: 4px 0 4px 40px; margines: 0; obramowanie: brak; obramowanie-dolne: 1px solid #353539; ) .menu ul li:ostatnie-dziecko a ( obramowanie: brak;). menu a.documents ( tło: url(../img/docs.png) bez powtórzeń 6px środek; ) .menu a.messages ( tło: url(../img/bubble.png) bez powtórzeń 6px środek; ) .menu a.signout ( tło: url(../img/arrow.png) bez powtórzeń 6px środek; )

Osobiście podoba mi się łatwość implementacji i obsługi ikon. Oto ostateczny kod za pomocą codepen:

Wersja Josha Risera jest wizualnie podobna do poprzedniego menu rozwijanego w HTML i CSS. W kodzie nie ma selektora potomnego „>” (przydatne w projektach warstwowych), ale autor z powodzeniem wykorzystuje efekty CSS3 (przejście, cień ramki i cień tekstu) w celu uzyskania piękniejszego efektu. Zgodnie z linkiem w źródle, nie ma opisu procesu tworzenia poziomego menu rozwijanego, więc od razu podam ostateczny kod:

W tym przykładzie przyjrzymy się, jak zrobić menu rozwijane w CSS, w którym oprócz elementów będzie blok wyszukiwania. Podobną implementację często można znaleźć we współczesnych . Pod względem czasu wdrożenia i złożoności rozwiązanie jest nieco bardziej skomplikowane niż poprzednie. Została opublikowana w maju 2013 r., więc być może będziesz musiał poprawić niektóre rzeczy, chociaż w naszych testach wszystko działało dobrze.

Kod HTML

Do nawigacji, jak zawsze, używana jest nieuporządkowana lista (z klasą nav). Zwykłe pozycje menu to pozycje listy (li) i zawierają łącza (a href) bez żadnych klas ani identyfikatorów. Wyjątkiem są 3 wyspecjalizowane elementy tego poziomego menu rozwijanego o następujących identyfikatorach:

ustawienia - link do obrazu;
szukaj - blok z wyszukiwaniem i odpowiednim przyciskiem;
options - zawiera podmenu (zaimplementowane poprzez listę z klasą subnav).

Również w kodzie zobaczysz skrypt bez prefiksów do używania właściwości CSS bez przedrostków. Wynikowy kod HTML menu rozwijanego wygląda następująco:

Aplikacja
Tablica
Opcje
- Ustawienia
- Aplikacja
- Tablica
- Opcje

Aplikacja

Tablica

Opcje
- Ustawienia
- Aplikacja
- Tablica
- Opcje

CSS dla menu

1. Podstawowe style i elementy menu

Najpierw określamy czcionkę Montserrat, ciemnoszare tło i stałą wysokość elementów menu. Wszystkie elementy są zmiennoprzecinkowe: wyrównane do lewej i pozycjonowane względnie, dzięki czemu można później dodać podmenu z pozycją: absolutną;

@adres URL importu (http: //fonts.googleapis.com/css?family=Montserrat) ; * (margines: 0; dopełnienie: 0;) .nav (tło: #232323; wysokość: 60 pikseli; wyświetlacz: blok w linii;) .nav li (float: lewy; typ-listy: brak; pozycja: względna; )

@adres URL importu (http://fonts.googleapis.com/css?family=Montserrat); * (margines: 0; dopełnienie: 0;) .nav (tło: #232323; wysokość: 60 pikseli; wyświetlacz: blok w linii;) .nav li ( float: lewy; typ-styl-listy: brak; pozycja: względna; )

2. Formatowanie linków

Pozycje menu używają podstawowej stylizacji + . Wysokość jest taka sama jak w klasie nav. #ustawienia linku do obrazu na początku menu są ustawione na wyrównanie.

.nav li a (rozmiar czcionki: 16 pikseli; kolor: biały; wyświetlacz: blok; wysokość linii: 60 pikseli; dopełnienie: 0 26 pikseli; dekoracja tekstu: brak; obramowanie po lewej stronie: 1 piksel pełny #2e2e2e; rodzina czcionek: Montserrat , bezszeryfowy ; cień tekstu: 0 0 1px rgba (255 , 255 , 255 , 0.5 ) ; ) .nav li a: hover (kolor tła: #2e2e2e ; ) #ustawienia a (wypełnienie: 18px; wysokość: 24px ; rozmiar czcionki : 10px ; wysokość linii : 24px ; )

Nav li a ( rozmiar czcionki: 16 pikseli; kolor: biały; wyświetlacz: blok; wysokość linii: 60 pikseli; wypełnienie: 0 26 pikseli; dekoracja tekstu: brak; obramowanie po lewej stronie: 1 piksel pełny # 2e2e2e; rodzina czcionek: Montserrat, sans-serif;text-shadow: 0 0 1px rgba(255, 255, 255, 0.5); rozmiar czcionki: 10px; wysokość linii: 24px;)

3. Blok wyszukiwania

Element ten ma stałą szerokość i składa się z kilku części - pola tekstowego (#search_text) z zielonym tłem oraz przycisku wyszukiwania (#search_button). W niektórych przeglądarkach kolor tła może być szary.

#search (szerokość: 357px; margines: 4px;) #search_text (szerokość: 297px; dopełnienie: 15px 0 15px 20px; rozmiar czcionki: 16px; rodzina czcionek: Montserrat, bezszeryfowa; obramowanie: 0 brak; wysokość: 52px ; prawy margines: 0; kolor: biały; kontur: brak; tło: #1f7f5c; pływak: lewy; rozmiar pudełka: obramowanie; przejście: wszystkie 0,15 s ; ):: -webkit-input-placeholder ( /* Przeglądarki WebKit */ color : white ; ) : -moz-placeholder ( /* Mozilla Firefox 4 do 18 */ color : white ; ) :: -moz-placeholder ( /* Mozilla Firefox 19+ */ color : white ; ) : -ms-input-placeholder ( /* Internet Explorer 10+ */ color : white ; ) #search_text : focus ( background : rgb (64 , 151 , 119 ) ; ) #search_button ( border : 0 none ; background : #1f7f5c url (search.png) środek bez powtórzeń; szerokość: 60px; pływak: lewo; dopełnienie: 0; wyrównanie tekstu: środek; wysokość: 52px; kursor: wskaźnik;)

#search (szerokość: 357px; margines: 4px; ) #search_text( width: 297px; dopełnienie: 15px 0 15px 20px; rozmiar czcionki: 16px; rodzina czcionek: Montserrat, bezszeryfowa; obramowanie: 0 brak; wysokość: 52px ; prawy margines: 0; kolor: biały; kontur: brak; tło: #1f7f5c; pływak: lewy; rozmiar pudełka: obramowanie; przejście: wszystkie 0,15 s; ) ::-webkit-input-placeholder ( /* Przeglądarki WebKit */ color: white; ) :-moz-placeholder ( /* Mozilla Firefox 4 do 18 */ color: white; ) ::-moz-placeholder ( /* Mozilla Firefox 19+ */ color: white; ) : -ms-input-placeholder ( /* Internet Explorer 10+ */ color: white; ) #search_text:focus ( background: rgb(64, 151, 119); ) #search_button ( border: 0 none; background: #1f7f5c url (search.png) środek bez powtórzeń; szerokość: 60 pikseli; zmiennoprzecinkowy: lewy; dopełnienie: 0; wyrównanie tekstu: środek; wysokość: 52 pikseli; kursor: wskaźnik; )

4. Rozwijane podmenu

Ostatni szlif pozwoli nam stworzyć rozwijane menu CSS, które uruchamia się dla ostatniego elementu #options.

#options a(border-left: 0 none;) #options > a (background-image: url (triangle.png) ; background-position: 85% center ; background-repeat: no-repeat ; dopełnienie-w prawo: 42px; ) .subnav (widoczność: ukryta; pozycja: absolutna; góra: 110%; prawa: 0; szerokość: 200px; wysokość: auto; krycie: 0; przejście: wszystkie 0,1 s; tło: #232323;) .subnav li (float : brak ; ) .subnav li a ( border-bottom : 1px solid #2e2e2e ; ) #options : hover .subnav (widoczność: widoczna; góra: 100%; krycie: 1;)

#options a( border-left: 0 none; ) #options>a ( obraz tła: url(trójkąt.png); tło-pozycja: 85% środka; tło-powtórzenie: brak powtórzeń; dopełnienie-prawo: 42px; ) .subnav (widoczność: ukryta; pozycja: absolutna; góra: 110%; prawa: 0; szerokość: 200 pikseli; wysokość: auto; krycie: 0; przejście: wszystkie 0,1 s; tło: #232323; ) .subnav li ( float : brak; ) .subnav li a ( border-bottom: 1px solid #2e2e2e; ) #options:hover .subnav ( widoczność: widoczna; góra: 100%; krycie: 1; )

W stylach znajdziesz wstawienie trójkątnego obrazu tła (triangle.png), aby wskazać podmenu - nie zapomnij podać poprawnej ścieżki dla tego i innych obrazów w przykładzie. Wygląd podmenu jest realizowany za pomocą właściwości opacity. Ostateczne rozwiązanie na codepen:

Ta opcja wykorzystuje głównie techniki CSS 2.1, rozwiązanie jest plus minus nowe - na marzec 2015 r. Jeśli brakuje Ci jednego podpoziomu w poziomym menu rozwijanym witryny, ten przykład zawiera trzy jednocześnie. Pseudoklasa :only-child dodaje do pozycji symbol „+”, aby wskazać obecność podmenu.

Ogólnie dobry i prosty przykład. Nie będziemy szczegółowo opisywać procesu wdrażania, ponieważ jest podobny do poprzednich - najpierw tworzysz szkielet HTML, a następnie stopniowo dodajesz do niego style. Pobierz ostateczny kod z linku do źródła, możesz go częściowo zobaczyć w Codepen:

Całkowity

Powyżej przyjrzeliśmy się 4 opcjom tworzenia menu rozwijanego w CSS + HTML dla , chociaż podobnych przykładów w sieci jest znacznie więcej. Istnieją rozwiązania z jQuery, ale najprawdopodobniej jest to przydatne tylko do implementacji niektórych efektów specjalnych i niestandardowych zadań. W większości przypadków wystarczy kilka CSS + HTML, zwłaszcza że teraz głównymi wymaganiami dla menu są wygoda i szybkość ładowania.

Na koniec dwie uwagi do powyższych kodów. Niektóre z rozwijanych przykładów CSS używają obrazów, więc musisz uważnie przyjrzeć się ścieżkom obrazów i wprowadzić prawidłowe wartości dla swojej witryny. Po drugie, niektóre rozwiązania mają 2-3 lata, dlatego warto dodatkowo sprawdzić ich działanie w różnych przeglądarkach.

Jeśli znasz inne ciekawe nowoczesne implementacje poziomych menu rozwijanych dla witryny, prześlij linki w komentarzach.