Często jest to konieczne poziome menu, który będzie rozciągał się na całą szerokość bloku nadrzędnego, niezależnie od tego, ile elementów zawiera.
Dzisiaj chciałam Wam pokazać jak stworzyć właśnie takie menu.
Zatem nasze menu będzie wyglądać następująco:
Jest rozciągnięty na całą szerokość i wyróżnia się po najechaniu myszką. Menu jest zaokrąglone po bokach.
ZNACZNIK HTML
Dom
Ciekawe wiadomości
...
Kolejna pozycja w menu!
Aby menu miało pełną szerokość, użyłem tabel o szerokości 100%. Każda tabela ma kontener div pozycji menu. W zależności od tego, czy pierwsza, ostatnia czy pośrednia pozycja menu jest elementem div, przypisywana jest odpowiednia klasa.
Każdy kontener div ma 2 boczne krawędzie z absolutnym pozycjonowaniem, które są niezbędne do prawidłowego wyświetlania. Jeśli używasz standardowych obramowań, to po przełączeniu elementów menu tekst przeskoczy o 1-2 piksele, co jest dobre.
Aktywna klasa odpowiada za wybraną pozycję menu i podświetla ją.
W każdym elemencie mamy zdjęcie i tekst. Aby mieć pewność, że wszystko to jest wyrównane ściśle pośrodku w pionie, używamy tabeli. Dzięki właściwościom wyrównania w pionie nasze pozycje menu będą zawsze wyświetlane płynnie i nie będą się przesuwać.
ZASADY CSS
Najpierw ustawmy style ogólnego wyświetlania menu:
Menu_container ( góra dopełnienia: 40 pikseli; szerokość: 100%; wysokość: 47 pikseli; odstępy między krawędziami: 0 pikseli; ) .menu_container td ( wyrównanie w pionie: środek; /* wyrównanie w pionie */ ) .last_point_menu, .first_point_menu, .middle_point_menu ( szerokość: 100%; wysokość: 47 pikseli; obramowanie: 1 piks. stałe #dadbda pozycja: względna; obramowanie po lewej stronie: brak; (wypełnienie: 0 pikseli; wyrównanie do pionu: środek; obramowanie: brak; wyrównanie tekstu: do lewej; szerokość: 150px; lewe dopełnienie: 4px; ) .td.inner_table_title ( góra dopełnienia: 4px; grubość czcionki: pogrubiona; ) .td.inner_table_img ( szerokość: 40px!ważne; ) .inner_table_menu ( wysokość: 100%; dopełnienie: 0px ; wyrównanie w pionie: środek; obramowanie: brak; wyrównanie tekstu: do lewej; ) .inner_table_title ( dopełnienie do lewej: 10 pikseli; dopełnienie do prawej: 10 pikseli; transformacja tekstu: wielkie litery; wysokość linii: 13 pikseli; .inner_table_menu td.inner_table_img (szerokość: 30px! ważne; wysokość: 30px! ważne; dopełnienie po lewej stronie: 15px;)
Mamy doskonałe menu rozciągnięte na całą szerokość bloku nadrzędnego! Elementy nie nakładają się na siebie po najechaniu myszką i układ nie przeskakuje.
Dość powszechny układ menu witryny, gdy kontener z nim zajmuje całą dostępną szerokość strony. W tym przypadku pierwszy element przylega do lewej krawędzi, a ostatni do prawej, a odległość pomiędzy wszystkimi elementami jest równa. Dziś powiemy Ci, jak to się robi.
Oferujemy przykład wdrożenia gumowego menu, gdy Pomoc CSS dla Twojego zasobu. W tym menu pozycje będą umieszczone w jednej linii. Javascript nie będzie używany. Zawartość menu będzie ujęta w zwykłą listę. Główną cechą takiego menu jest jego wszechstronność, która wyraża się w tym, że zarówno liczba, jak i długość pozycji może być dowolna.
Jak to wdrożyć?
Każdy programista może zaproponować własny sposób rozwiązania danego problemu. Wszystko zależy od jego wyobraźni, poziomu profesjonalizmu i umiejętności. Najczęstszym rozwiązaniem tego problemu jest użycie stołu. Ponadto wielu sugeruje użycie JavaScript. Spieszę rozczarować tych, którzy sugerowaliby użycie właściwości display z tabelą wartości lub komórką tabeli. Ta metoda nie jest wystarczająco kompatybilna z różnymi przeglądarkami.
Nasze rozwiązanie
Nasza oferta będzie zbudowana na solidnym fundamencie wiedzy HTML5 i CSS3.
Istota procesu opiera się na właściwości text-align z wartością justowania. Dla tych, którzy zapomnieli, przypominam: ta właściwość orientuje wyrównanie tekstu na całej szerokości kontenera.
Korzystając z naszego rozwiązania należy przestrzegać dwóch obowiązkowych zasad. Po pierwsze, szerokość kontenera pozycji menu powinna być mniejsza niż tekst. To znaczy nie w jednej linii. Drugą ważną zasadą jest to, że słowa są rozciągane równomiernie, niezależnie od tego, czy należą do tego samego punktu, czy nie.
Poniżej znajduje się kod będący przykładem tworzenia gumowego menu:
HTML
<
ul>
<
li><
a href=
"#"
>Dom<
li><
a href=
"#"
>Blog<
li><
a href=
"#"
>Aktualności<
li><
a href=
"#"
>Popularny<
li><
a href=
"#"
>Nowe przedmioty
ul ( tekst- wyrównanie: justify; overflow: ukryty; /* eliminuje skutki uboczne metody */ wysokość: 20px; /* eliminuje również niepotrzebne */ kursor: domyślny ; /* ustawia początkowy kształt kursora */ margines : 50px 100px 0 100px; tło: #eee; dopełnienie: 5px; ) li ( display: inline; /* tworzy tekst dla pozycji menu */ ) li a ( display: inline- block; /* eliminuje podziały słów w menu */ color: #444; ) a : hover ( color: #ff0000; ) ul: after ( /* utworzenie drugiej linii w celu opracowania metody */ content: "1" ; margines po lewej: 100%; wysokość: 1px; przepełnienie: ukryte; wyświetlacz: blok inline;
Aby pracować w starym, dobrym Internet Explorerze należy dodatkowo dodać do CSS poniższy kod
ul ( z-index: wyrażenie(runtimeStyle. zIndex = 1 , wstawAdjacentHTML("beforeEnd&apos, "<
li class
=
"last"
>")); ) ul .last (margines-lewy: 100%; ) * html ul ( /* potrzeba tylko np. 6 */ wysokość: 30px; )
Po określeniu niezbędnych wartości właściwości i kodu otrzymujemy to gumowe menu:
Wady metody
Kod głośności
Niemożność określenia aktywnego stanu elementu za pomocą selektora klasy. Dzieje się tak z powodu podziału słów w akapitach (jeśli taki istnieje). Rozwiązaniem tego problemu jest dodanie kolejnego kontenera wewnątrz elementów listy.
W przypadku menu rozwijanego należy dostosować kod ze względu na negatywny wpływ przepełnienia.
W jakich przeglądarkach to działa?
6.0+
6.0+
10.5+
5.0+
3.6+
-
-
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ą lista CSS(na listach ul li) bez użycia jQuery i JavaScript, a także bez użycia tabel
w kodzie. Rozwijane menu poziome HTML
Przede wszystkim zanim zaczniemy pisać kod, musimy stworzyć szablon HTML dla menu.
Ze względu na to, że robimy menu uniwersalne, chcę je maksymalnie upodobnić do wyjścia Menu WordPressa. Moim zdaniem jest to jeden z najprostszych i uniwersalny HTML kody menu. Wygląda to tak:
Dom
O nas
Nasze usługi
Nasz serwis nr 1
Nasz serwis nr 2
Nasz serwis nr 3
Nasz serwis nr 4
Usługa 5
Aktualności
Łączność
Jak widać z kodu, nasze menu rozwijane zostanie zaimplementowane na listach ul i li. Tak wygląda menu bez stylów CSS:
Spójrzmy prawdzie w oczy, wygląda brzydko, jak zwykła lista. Następnie musimy udekorować to menu za pomocą stylów CSS.
Poziome menu rozwijane w CSS
Style CSS dla menu rozwijanych i nie tylko są niezbędne jak powietrze. Przecież zakładka rozwijana jest tworzona w oparciu o pseudoklasę:hover.
W przypadku poziomego menu rozwijanego potrzebujemy następujących stylów:
#menu1( pozycja: względna; wyświetlacz: blok; szerokość: 100%; wysokość: auto; z-index: 10; ) #menu1 ul( pozycja: względna; wyświetlacz: blok; margines: 0 pikseli; dopełnienie: 0 pikseli; szerokość: 100 %; wysokość: auto; styl listy: brak; tło: #F3A601; ) #menu1 > ul::po(wyświetlanie:blok; szerokość:100%; wysokość:0px; wyczyść:obie; treść:" "; ) # menu1 ul li( pozycja: względna; wyświetlacz: blok; pływak: lewo; szerokość: auto; wysokość: auto; ) #menu1 ul li a ( wyświetlacz: blok; dopełnienie: 9px 25px 0px 25px; rozmiar czcionki: 14px; czcionka- rodzina: Arial, bezszeryfowa; wysokość linii: 1,3 em; grubość czcionki: wielkie litery; ) #menu1 ul li > a:hover, #menu1 ul li:hover > a( tło:#EBBD5B; kolor:#2B45E0; )
To jeszcze nie koniec, to tylko część CSS dla głównego menu poziomego. Następnie napiszemy style dla listy rozwijanej menu:
#menu1 ul li ul(pozycja:absolutna; góra:36px; lewa:0px; wyświetlacz:brak; szerokość:200px; tło:#EBBD5B; ) #menu1 ul li:hover ul(display:block;)/*ta linia implementuje mechanizm opuszczania*/ #menu1 ul li ul li( float:brak; szerokość:100%; ) #menu1 ul li ul li a(display:block;text-transform:brak; wysokość:auto; padding:7px 25px; szerokość: 100%; rozmiar pudełka: obramowanie-góra: 1px solid #ffffff; ) #menu1 ul li ul li:pierwsze-dziecko a(góra obramowania:0px;) #menu1 ul li a:hover (tło:#FDDC96;kolor:#6572BC)
To tyle. Sam mechanizm drop-out jest realizowany w jednej linii.
Zobacz skórkę z tym menu:
Ryż. 2 (poziome menu rozwijane)
Poniżej znajduje się demonstracja działania menu rozwijanego, a także link do pobrania źródeł. (Demo zostanie otwarte z menu rozwijanego u góry tej strony, nie trzeba klikać Otwórz w nowym oknie 🙂 ani kółkiem myszy)
Poziome menu rozwijane o pełnej szerokości
Większość z Was może mi zarzucić, że takie menu, jakie pokazałem powyżej, to przywitanie z przeszłością i po części ma rację, chociaż widziałem ostatnio układy z takimi menu.
Mam nadzieję, że pobrałeś powyższy przykład. Nasz HTML pozostaje taki sam, ale całkowicie zmienimy CSS. Możesz po prostu pobrać stąd kod CSS i wkleić go do pobranego przykładu lub obejrzeć w trybie demonstracyjnym, jak to działa.
#container( szerokość: 1000 pikseli; wysokość: auto; margines: 0 pikseli auto; dopełnienie-top: 10 pikseli; ) #menu1 ( pozycja: względna; wyświetlacz: blok; szerokość: 100%; wysokość: auto; z-index: 10; ) #menu1 ul( pozycja: względna; wyświetlacz: blok; margines: 0 pikseli; dopełnienie: 0 pikseli; szerokość: 100%; wysokość: auto; styl listy: brak; tło: # F3A601; ) #menu1 > ul ( wyrównanie tekstu: uzasadnij; rozmiar czcionki: 1 px; wysokość linii: 1 px; ) #menu1 > ul:: after( display:inline-block; szerokość: 100%; wysokość: 0px; treść:" "; ) #menu1 ul li( pozycja :względny; wyświetlacz: blok inline; szerokość: auto; wyrównanie do pionu: do lewej) #menu1 ul li a( wyświetlacz: blok; dopełnienie: 9 pikseli 35 pikseli; rozmiar czcionki: 14 pikseli; rodzina czcionek: bezszeryfowa; linia wysokość: 1,3 em; grubość czcionki: wielkie litery; :border-box; ) #menu1 ul li > a:hover, #menu1 ul li:hover > a(tło:#EBBD5B; kolor:#2B45E0; ) #menu1 ul li ul(pozycja:absolutna; góra:36px; lewa:0px;
wyświetlacz: brak;
W przypadku bardzo długich pozycji menu ta opcja może nie być zbyt wygodna, ponieważ wykraczają poza limity. Aby wyłączyć tę właściwość, po prostu znajdź właściwość „white-space:nowrap;” w selektorze #menu1 ul li ul i usuń go.
Poniżej możesz obejrzeć demo lub pobrać źródła poziomego menu rozwijanego:
Bez separatorów to menu wygląda tak sobie. Separatory można dodać do HTML ręcznie, ale jeśli masz CMS, taki jak WordPress, to ręczne dodanie ich nie jest zbyt wygodne.
Poziome menu rozwijane z przekładkami
Istnieje kilkadziesiąt opcji dodawania paska (separatora) pomiędzy pozycjami menu przy użyciu czystego CSS. Nie będę powielać opcji, które używają::before lub::after lub znacznie prostszych border-left, border-right.
Są sytuacje, gdy układ jest zbudowany tak wspaniale, że nie da się obejść bez jquery.
Nasz kod HTML pozostaje ten sam, dodajemy jedynie bibliotekę jQuery i plik, który z niej korzysta:
Zaraz potem.
Jak rozumiesz, musisz utworzyć plik menu skryptu-3.js i dodaj tam ten mały kod:
$(dokument).ready(function())( $("#menu1 > ul > li:not(:last-child)").after(" "); ));
Style CSS dla takiego menu należy pozostawić bez zmian, + dodać na końcu ten fragment:
) #menu1 ul li ul(pozycja:absolutna; góra:36px; lewa:0px; wyświetlacz:brak; szerokość:auto; tło:#EBBD5B; biała spacja:nowrap; ) #menu1 > ul > li:last-child > ul(/*ostatni element zostanie dołączony do prawej krawędzi*/ left:auto; Right:0px; ) #menu1 ul li:hover > ul(display:block;)/*ta linia implementuje mechanizm drop-out* / #menu1 ul li ul li(wyświetlanie:blok; szerokość:auto; ) #menu1 ul li ul li a(wyświetlanie:blok; transformacja tekstu:brak; wysokość:auto; dopełnienie:7px 45px; szerokość:100%; pudełko -sizing:border-box ; border-top:1px solid #ffffff ) #menu1 ul li ul li:first-child > a(border-top:0px;) #menu1 ul li ul li a:hover, #menu1 ul li ul li:hover > a( tło:#FDDC96; kolor:#6572BC; ) #menu1 ul li ul li ul(góra:0px; lewa:100%; wyświetlacz:brak; tło:#fddc96; ) #menu1 > ul > li:last-child > ul ul(lewy:auto; prawy:100%;) #menu1 ul li ul li ul a(color:#F38A01;) Kopiujemy pliki dla jQuery tak jak w poprzednim przykładzie. Postanowiłam zrezygnować z przegródek, aby menu wyglądało choć trochę lepiej. Oczywiście, że da się to zrobić bez nich.
Oto jak to się stało:
Zrobiłem 2 skórki w jednej, żeby pokazać jak wygląda kropla po prawej i pośrodku.
Poniżej możesz obejrzeć demo i pobrać przykład:
Wielopoziomowe menu rozwijane z wyskakującym panelem po najechaniu myszką
Nie będę zmieniać kodu HTML; można go zaczerpnąć z poprzedniego przykładu. Separatory pozostawiamy także w jQuery.
) #menu1 ul li ul( pozycja:absolutna; góra:36px; lewa:0px; wyświetlacz:brak; szerokość:100%; tło:#EBBD5B; ) #menu1 > ul > li > ul::po( clear:both; float:brak; szerokość:100%; wysokość:0px; treść:" " ) #menu1 ul li:hover > ul(display:block;)/*ta linia implementuje mechanizm odrzucania*/ #menu1 ul li li(display: blok; szerokość: 30%; float: lewy; ) #menu1 ul li ul li a (wyświetlanie: blok; transformacja tekstu: brak; wysokość: auto; dopełnienie: 7 pikseli 45 pikseli; szerokość: 100%; rozmiar pudełka: obramowanie - box; ) #menu1 ul li ul li:pierwsze-dziecko > a(border-top:0px;) #menu1 ul li ul li a:hover, #menu1 ul li ul li:hover > a(tło:#FDDC96; kolor :#6572BC; ) #menu1 ul li ul li ul( góra:0px; lewa:100%; wyświetlacz:brak; tło:#fddc96; z-index:15; ) #menu1 ul li ul li ul li(wyświetlanie: blok ; float: brak; szerokość: 100%;) #menu1 ul li ul li ul a( kolor: #F38A01; górna granica: 1px solidna #ffffff; )
Oto jak będzie wyglądać menu: Jedynym punktem jest to, że witryna musi mieć wystarczająco dużo miejsca, ponieważ ostatnia pozycja po prawej stronie nie ma miejsca na menu rozwijane. Ten problem można rozwiązać za pomocą:nth-child, ale nie zawracałem sobie tym głowy.
To wszystko dla mnie, mam nadzieję, że przynajmniej jeden z moich przykładów Ci odpowiada. Dziękuję za uwagę.
będzie to z pożytkiem zarówno dla nich, jak i dla mnie :)
Jeśli przeczytałeś cały post, ale nie znalazłeś sposobu na utworzenie własnego poziomego menu rozwijanego w css, zadaj pytanie w komentarzach lub skorzystaj z wyszukiwarki w witrynie.
Radzę również odwiedzić stronę nadrzędną https://site/vypadayushhee-menu/, tam znajdują się wszystkie przykłady i typy menu rozwijanych.
Menu poziome to lista sekcji witryny, dlatego bardziej logiczne jest umieszczenie go wewnątrz elementu
, a następnie zastosuj style CSS do jego elementów. Ten układ menu jest najczęstszy ze względu na oczywiste zalety jego pozycjonowania na stronie internetowej. Jak zrobić menu poziome: przykłady układu i projektu Znaczniki HTML i podstawowe style menu poziomego
Domyślnie wszystkie elementy listy są ułożone pionowo, zajmując całą szerokość elementu kontenera, który z kolei zajmuje całą szerokość jego bloku kontenera.
Poziome menu znajdujące się wewnątrz tagu można dodatkowo umieścić wewnątrz elementu ... i/lub .... Dzięki temu znacznikowi HTML nadawane jest i pojawia się również znaczenie semantyczne dodatkowa szansa aby sformatować blok menu.
Istnieje kilka sposobów ułożenia ich 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 równy 1em*/ padding-left: 0; /*usuń lewe wypełnienie równe 40px*/ ) a (dekoracja tekstu: brak; /*usuń podkreślenie tekstu linku*/)
Metoda 1. li (wyświetlacz: inline;)
Tworzenie elementów listy małymi literami. W rezultacie są one umieszczone poziomo, z prawa strona między nimi dodaje się odstęp 0,4 em (obliczony w stosunku do rozmiaru czcionki). Aby go usunąć, dodaj ujemny prawy margines dla li li (margines-prawy: -4px;) . Następnie stylizujemy linki według własnego uznania.
Metoda 2. li (pływak: w lewo;)
Tworzenie ruchomych elementów listy. W rezultacie są one ustawione poziomo. Wysokość bloku kontenerowego ul staje się zerowa. Aby rozwiązać ten problem dodajemy (przepełnienie: ukryte;) do ul, rozszerzając ją i pozwalając tym samym na umieszczenie w niej elementów pływających. W przypadku linków dodaj (display: block;) i nadaj im styl według własnego uznania.
Metoda 3. li (wyświetlacz: blok inline;)
Tworzenie elementów listy w bloku inline. Są one umieszczone poziomo, po prawej stronie tworzy się szczelina, jak w pierwszym przypadku. W przypadku linków dodaj (display: block;) i nadaj im styl 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. Do linków dodajemy (display: block;) i stylizujemy je według potrzeb.
1. Menu adaptacyjne z efektem podkreślenia po najechaniu kursorem na link
Ryż. 2 (poziome menu rozwijane)
Kopiujemy pliki dla jQuery tak jak w poprzednim przykładzie. Postanowiłam zrezygnować z przegródek, aby menu wyglądało choć trochę lepiej. Oczywiście, że da się to zrobić bez nich.
