Jak rozciągnąć menu poziome do szerokości strony. Poziome menu rozwijane „zrób to sam” przy użyciu CSS i HTML

Dom / Technologie

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:

Do menu poziome z rozwijaniem 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;

szerokość:automatyczna;

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;)/*this linia implementuje mechanizm dropouts*/ #menu1 ul li ul li( display:block; szerokość:auto; ) #menu1 ul li ul li a( display:block; text-transform:none; height:auto; padding:7px 35px; 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;

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 taki 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.razd(wysokość:28px; szerokość:1px; tło:#ffffff; górny margines:4px; )

Poziome menu rozwijane z ogranicznikami w jQuery będzie wyglądać następująco:

Możesz obejrzeć w trybie demonstracyjnym lub pobrać szablon menu poziomego poniżej:

Zalety tego rozwiązania to:

menu będzie rysowane dynamicznie;
wcięcia od separatora do akapitu są wszędzie takie same;
piękniejszy i bardziej elastyczny projekt.

Poziome, wielopoziomowe menu rozwijane CSS+HTML

Skoro mowa o wielopoziomowych rozwijanych menu po najechaniu myszką, to chyba warto podzielić je na podgrupy:

z podkładką vip, gdy wskazujesz na bok

z wyskakującym menu rozwijanym trzeciego poziomu

Na moich przykładach pokażę menu wielopoziomowe CSS na 3 poziomy, to myślę, że nie będzie trudno zgadnąć, co należy zrobić.

Wielopoziomowe menu rozwijane z paskiem bocznym po najechaniu myszką

Na początek musimy nieco poprawić nasz kod HTML. Zostanie tam dodanych kilka linii dla poziomu 3:

Dom
O nas
Nasze usługi
- Nasz serwis nr 1
  - Dodatek do usługi 1
  - Dodatek do usługi 2
- Nasz serwis nr 2
  - Dodatek do usługi 3
  - Dodatek do usługi 4
- Nasz serwis nr 3
- Nasz serwis nr 4
- Usługa 5
Aktualności
Łączność
- Mapa wskazówek
  - Dodatek do mapy
  - Dodatek do mapy 2
- Formularz opinii

#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 :relative; display:inline-block; wysokość:auto; wyrównanie tekstu:do lewej; margines na górze:4px; ) #menu1 ul li a(wyświetlanie:blok; dopełnienie: 9px 45px 0px 45px; rozmiar czcionki:14px; -rodzina: Arial, bezszeryf; kolor: #ffffef; wysokość linii: 1,3 em; dekoracja tekstu: wielkie litery; rozmiar ramki: ramka; (tło:#EBBD5B;

kolor:#2B45E0;

) #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:automatyczny; prawy:100%;) #menu1 ul li ul li ul a(kolor:#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.

Tylko CSS zmieni się całkowicie:

#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 :relative; display:inline-block; szerokość:auto; wyrównanie do pionu:do lewej) #menu1 > ul > li(pozycja:statyczny;) #menu1 ul li.razd:28px; szerokość:1px tło:#ffffff; -top:4px; ) #menu1 ul li a(wyświetlacz:blok; dopełnienie: 9px 45px 0px 45px; rodzina czcionek:Arial, bezszeryfowa; kolor:#ffffef; dekoracja tekstu: brak; transformacja tekstu: wielkie litery; rozmiar-pudełka:border-box; 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; szerokość:100%; tło:#EBBD5B; ) #menu1 > ul > li > ul::po( clear:both; float:brak; szerokość:100%; wysokość:0px; zawartość:" ") #menu1 ul li:hover > ul(display:block;)/*ta linia implementuje mechanizm usuwania*/ #menu1 ul li( wyświetlacz: 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: border -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; po lewej: 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ć poprzez: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.

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= "#" >Bloga< 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+	-	-

Cześć. Już dawno nie pisałem postów na temat pracy z HTML/CSS. Niedawno zacząłem składać nowy układ i przy okazji natknąłem się na ciekawy trik, który pozwala na uelastycznienie menu (możesz dodawać do niego nowe pozycje, a jego rozmiar nie będzie się zwiększał, ale zawsze będzie w 100% blok nadrzędny). Zatem dzisiaj zaimplementujemy gumowe menu za pomocą CSS.

Jeśli jesteś zbyt leniwy, aby przeczytać artykuł, możesz obejrzeć ten film. Autor również wszystko bardzo dobrze wyjaśnia:

Gumowe menu z CSS - krok 1

Pierwszym krokiem jest zawsze znacznik HTML. Gdzie bylibyśmy bez niego? Ale w naszym przypadku wszystko będzie proste:

opakowanie blokowe dla menu

samo menu, wyświetlane przez lista punktowana(znacznik ul)

Cóż, w środku znajdują się pozycje menu, a w nich są już linki

Wszystko jest jasne, oto mój kod znaczników:

Wszystko wygląda standardowo, tak:

Teraz wszystko wprowadzimy właściwy typ, CSS zaczyna działać.

Krok 2 – Podstawowe style

Następnie dodam style do bloku opakowania. Mianowicie ustawię maksymalną szerokość na 600 pikseli (żeby ułatwić wykonanie zrzutu ekranu, aby menu się zmieściło), a także wyśrodkuję blok.

Zawinąć(
tło: #fff;
maksymalna szerokość: 600px;
margines: 0 auto;
}

Krok 3 - zaimplementuj gumę

Zajmijmy się teraz samym menu. Usunę z niego znaczniki (tag ul), zrobię liniowy gradient tła i, co najważniejsze, użyję właściwości display: table-row, aby kontener menu zachowywał się jak wiersz tabeli. Jest to ważne w przypadku dalszych manipulacji.

Menu R(
tło: gradient liniowy (w prawo, #b0d4e3 0%, #88bacf 100%);
wyświetlacz: wiersz tabeli;
styl listy: brak;
}

Jak widać, powyższy kod właśnie rozwiązał wszystko, o czym pisałem. Nawiasem mówiąc, wygodnie jest generować gradienty za pomocą narzędzia generatora gradientów Ultimate CSS. Kiedyś jeszcze o nim napiszę.

Menu R(
wyrównanie w pionie: dół;
wyświetlacz: komórka-tabela;
szerokość: automatyczna;
wyrównanie tekstu: do środka;
wysokość: 50px;
obramowanie po prawej: 1px bryła #222;
}

pionowo-align: dół - ta właściwość jest konieczna, aby tekst w pozycji menu zajmujący 2 linie był wyświetlany równomiernie. Kiedy tworzymy menu, możesz usunąć tę właściwość, powiększyć tak, aby elementy zostały skompresowane, a tekst został przeniesiony do dwóch linii, co spowoduje problem z wyświetlaniem. Zwróć nieruchomość i wszystko będzie dobrze.
display: table-cell - ponieważ samo menu wyświetlania ustawiamy jako wiersz tabeli, logiczne byłoby ustawienie jego elementów tak, aby były wyświetlane jako komórki w tabeli. To konieczność.
szerokość: auto — szerokość zostanie obliczona automatycznie w zależności od długości tekstu w akapicie
text-align: center - służy do wyśrodkowania tekstu wewnątrz
wysokość: 50px — ustaw wysokość na 50 pikseli
cóż, border-right to po prostu obramowanie po prawej stronie, separator elementów

Na razie menu wygląda nieestetycznie, ale to nic, czas sobie o tym przypomnieć.

Ostatnią rzeczą do zrobienia jest nadanie stylu linkom wewnątrz elementów. Tutaj mam ten kod:

Menu R li a(
dekoracja tekstu: brak;
szerokość: 1000px;
wysokość: 50px;
wyrównanie w pionie: środek;
wyświetlacz: komórka-tabela;
kolor: #fff;
czcionka: normalna 14px Verdana;
}

A tak wygląda teraz menu:

Jeszcze raz wyjaśnię kilka linijek:

właściwość tekst-dekoracja zastępuje domyślne podkreślenie łączy
szerokość: 1000 pikseli jest prawdopodobnie najważniejszą linią. Musisz ustawić linki na mniej więcej tę szerokość, może mniejszą, ale zdecydowanie większą niż najszerszy możliwy element menu. Linki nie będą miały szerokości 1000 pikseli, ponieważ szerokość będzie ograniczona przez pozycję menu li, której szerokość jest ustawiona na auto, ale dzięki temu będzie można mieć pewność, że dla dowolnej liczby pozycji w menu będzie ona zawsze wynosić 100 procent szerokości.
Vertical-align: Middle i Display: table-cell - pierwszy wyrówna tekst pionowo do środka, a drugi wyświetli także linki jako komórki. Obie właściwości są potrzebne.
czcionka - cóż, to tylko zestaw ustawień czcionki. Przeczytaj o właściwości CSS dla czcionek w tym artykule.

Krok 4 (opcjonalnie) Możesz dodać interaktywność

Na przykład, aby kolor elementu menu zmieniał się po najechaniu kursorem. Można to zaimplementować po prostu, używając pseudoklasy hover:

Menu R li:hover(
kolor tła: #6bba70;
}

Testowanie menu pod kątem gumowatości

Świetnie, menu gotowe, ale nie sprawdziliśmy najważniejszego – jak bardzo jest gumowate, tak jak obiecałem. Cóż, dodam jeszcze 2 pozycje do menu:

Menu ma szerokość 600 pikseli. Pozostałe elementy zostały po prostu nieco zmniejszone, aby pomieścić 2 nowe.

Dodam jeszcze jeden długi punkt:

Jak widać menu nieco się skurczyło i długa pozycja wyświetla się całkiem normalnie. A gdyby nie właściwość Vertical-align: Bottom, o której Ci mówiłem, menu wyglądałoby gorzej.

Ograniczę menu do trzech pozycji.

Pozycje stały się znacznie bardziej swobodne, ale samo menu nie zmieniło się pod względem szerokości. Stworzyliśmy więc menu w 100% gumowe!

Jak to dostosować?

W zasadzie, jeśli nadasz blokowi owijającemu maksymalną szerokość, a nie stałą, nie trzeba go nawet dostosowywać. W moim przypadku mam właściwość max-width: 600px i gdy szerokość spadnie poniżej 600 pikseli, blok po prostu zmniejszy się wraz z ekranem, bez tworzenia poziomego przewijania.

Cóż, jeśli chcesz w jakiś sposób zmienić lub poprawić menu urządzenia mobilne lub szerokie ekrany, wtedy zapytania o media Ci pomogą! Powodzenia w tworzeniu strony internetowej!

Menu poziome to lista sekcji witryny, dlatego bardziej logiczne jest umieszczenie go wewnątrz elementu

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.

Znaczniki HTML do nawigacji poziomej

Pozycja menu
Pozycja menu
Pozycja menu

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*/)

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-right: -4px;) . Następnie stylizujemy linki według własnego uznania.

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.

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.

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.

Wybór redaktora