Menu
Jest wolny
Zameldować się
główny  /  Programy/ Rozciągnij menu do pełnej szerokości CSS. Jak zrobić elastyczne responsywne menu w css? Znaczniki HTML i podstawowe style menu poziomego

Rozciągnij menu do pełnej szerokości CSS. Jak zrobić elastyczne responsywne menu w css? Znaczniki HTML i podstawowe style menu poziomego

Dość powszechny układ menu witryny, gdy kontener z nim zajmuje całą szerokość dostępną na stronie. W tym przypadku pierwszy element przylega do lewej krawędzi, a ostatni do prawej, a odległość między wszystkimi elementami jest równa. Dzisiaj powiemy Ci, jak to się robi.

Oferujemy przykład, jak zaimplementować płynne menu za pomocą CSS dla Twojego zasobu. W tym menu pozycje będą znajdować się w jednej linii. Javascript nie będzie używany. Zawartość menu zostanie umieszczona na regularnej liście. Główną cechą takiego menu jest jego wszechstronność, która wyraża się w tym, że zarówno ilość, jak i długość elementów może być dowolna.

Jak to zrealizować?

Każdy programista może zaproponować własny sposób rozwiązania 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. Ci, którzy sugerowaliby użycie właściwości display z wartością stół lub komórka stołowa- Spieszę się zdenerwować. Ta metoda nie jest wystarczająco kompatybilna z różnymi przeglądarkami.

Nasze rozwiązanie

Nasza propozycja zostanie zbudowana na solidnych podstawach wiedzy o HTML5 i CSS3.

Rdzeń procesu opiera się na właściwości text-align z wartością uzasadnienia. Dla tych, którzy zapomnieli - przypominam: ta właściwość orientuje wyrównanie tekstu na całej szerokości pojemnika.

Podczas korzystania z naszego rozwiązania obowiązują dwie podstawowe zasady. Po pierwsze, szerokość kontenera pozycji menu musi być mniejsza niż tekst. To znaczy nie w jednej linii. Drugą ważną zasadą jest to, że słowa są rozciągnięte równo, niezależnie od tego, czy należą do tego samego punktu, czy nie.

Poniżej znajduje się kod, który służy jako przykład tworzenia „gumowego” menu:

HTML

< ul> < li>< a href= "#" >główny < li>< a href= "#" >Blog < li>< a href= "#" >Aktualności < li>< a href= "#" >Popularny < li>< a href= "#" >Nowe przedmioty

ul (text-align: justify; overflow: hidden; /* usuwa skutki uboczne metody */ wysokość: 20px; /* usuwa niepotrzebne zbyt * / kursor: domyślny; / * ustawia oryginalny kształt kursora * / margines: 50px 100px 0 100px; tło: #ee; wypełnienie: 5px; ) li (wyświetlacz: wbudowany; / * tworzy tekst z pozycji menu * /) li a (wyświetlacz: inline-block; / * napraw łamanie wyrazów w menu * / kolor: # 444; ) a: hover (kolor: # ff0000;) ul: po ( /* utworzenie drugiej linii do opracowania metody */ treść: „1”; margines lewy: 100%; wysokość: 1px; przelew: ukryty; wyświetlacz: wbudowany blok; )

Aby pracować w starym dobrym Internet Explowerze, musisz dodać następujący kod do CSS

ul (indeks z: wyrażenie (runtimeStyle. zIndex = 1, insertAdjacentHTML ("beforeEnd & apos,"< li class = "last" > "));) ul .last (margin-lewy: 100%;) * html ul (/ * wystarczy ie6 * / wysokość: 30px;)

Po zarejestrowaniu niezbędnych wartości właściwości i kodu otrzymujemy następujące gumowe menu:

Wady metody

  1. Kod zbiorczy
  2. Niemożność określenia aktywnego stanu elementu za pomocą selektora klasy. Wynika to z łamania słów w akapitach (jeśli takowe jest). Rozwiązaniem tego problemu jest dodanie kolejnego kontenera wewnątrz elementów listy.
  3. W przypadku menu rozwijanego musisz 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+ - -

Menu poziome to lista sekcji witryny, więc bardziej logiczne jest oznaczenie jej wewnątrz elementu the

    a następnie zastosować style CSS do jego elementów. Taki układ menu jest najczęstszy ze względu na oczywiste zalety jego pozycjonowania na stronie internetowej.

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

    Znaczniki HTML i podstawowe style menu poziomego

    Domyślnie wszystkie pozycje listy są pozycjonowane pionowo, zajmując całą szerokość elementu kontenera na szerokość, który z kolei zajmuje całą szerokość jego bloku kontenera.

    Znaczniki HTML do nawigacji poziomej

    Poziome menu wewnątrz tagu można opcjonalnie umieścić wewnątrz elementu

    i / lub
    ...
    ... Dzięki temu znacznikowi html nadaje się znaczenie semantyczne, a także dodatkowa możliwość formatowania bloku menu.

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

    Ul (list-style: none; / * usuń znaczniki listy * / margin: 0; / * usuń górny i dolny margines równy 1em * / padding-left: 0; / * usuń lewy margines równy 40px * /) a ( text-decoration: brak; / * usuń podkreślenie tekstu linku * /)

    Metoda 1.li (wyświetlanie: inline;)

    Pozycje listy zapisujemy małymi literami. W efekcie są one ustawione poziomo, po prawej stronie między nimi dodawana jest przerwa równa 0,4em (obliczona względem rozmiaru czcionki). Aby go usunąć, dodaj ujemny li prawy margines dla li (margin-right: -4px;). Następnie dostosujemy styl linków według własnego uznania.

    Metoda 2.li (zmiennoprzecinkowa: lewa;)

    Pływające elementy listy. W rezultacie są ustawione poziomo. Wysokość bloku kontenerowego ul wynosi zero. Aby rozwiązać ten problem, dodajemy (overflow: hidden;) do ul, rozszerzając go i tym samym pozwalając, by zawierał elementy pływające. Dla linków dodaj a (display: block;) i dostosuj je jak chcesz.

    Metoda 3.li (wyświetlacz: inline-block;)

    Wykonujemy elementy listy inline-block. Znajdują się poziomo, po prawej stronie powstaje szczelina, tak jak w pierwszym przypadku. Dla linków dodaj a (display: block;) i dostosuj je jak chcesz.

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

    Wykonanie z ul elastycznego pojemnika za pomocą modelu. W rezultacie elementy listy są ułożone poziomo. Dodaj (wyświetlaj: blok;) dla linków i stylizuj je tak, jak chcesz.

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

    • Praca
    • O
    • Blog
    • Kontakt
    @import URL („https://fonts.googleapis.com/css?family=Ubuntu+Condensed”); .menu-main (list-style: brak; margines: 40px 0 5px; padding: 25px 0 5px; text-align: center; background: white;) .menu-main li (display: inline-block;) .menu- main li: after (treść: "|"; kolor: # 606060; display: inline-block; vertical-align: top;) .menu-main li: last-child: after (content: none;) .menu-main a (dekoracja tekstu: brak; rodzina czcionek: "Ubuntu Condensed", sans-serif; odstępy między literami: 2px; pozycja: względna; padding-bottom: 20px; margines: 0 34px 0 30px; rozmiar czcionki: 17px; transformacja tekstu: wielkie litery; wyświetlanie: blok liniowy; przejście: kolor .2s;) .menu-główne a, .menu-główne a: odwiedzone (kolor: # 9d999d;) .menu-główne a.bieżące, .menu- main a: hover (kolor: # feb386;) .menu-main a: przed, .menu-main a: po (treść: ""; pozycja: bezwzględna; wysokość: 4px; góra: auto; prawo: 50%; dół : -5px; lewy: 50%; tło: # feb386; przejście: .8s;) .menu-main a: hover: przed, .menu-main .current: przed (po lewej: 0;) .menu-main a: hover: after, .menu-main .current: after (po prawej: 0; ) @media (max-width: 550px) (.menu-main (padding-top: 0;) .menu-main li (wyświetlacz: blok;) .menu-main li: after (content: none;) .menu- główna a (dopełnienie: 25px 0 20px; margines: 0 30px; ))

    2. Responsywne menu dla strony weselnej

    @import URL („https://fonts.googleapis.com/css?family=PT+Sans”); .top-menu (pozycja: względna; tło: #fff; box-shadow: wstawka 0 0 10px #ccc;) .top-menu: przed, .top-menu: po (treść: ""; wyświetlacz: blok; wysokość : 1px; border-top: 3px solid # 575350; border-bottom: 1px solid # 575350; margin-bottom: 2px;) .top-menu: after (border-bottom: 3px solid # 575350; border-top: 1px solid # 575350; box-shadow: 0 2px 7px #ccc; margin-top: 2px;) .menu-main (list-style: brak; padding: 0 30px; margin: 0; font-size: 18px; text-align: center; position: relatywne;) .menu-main: before, .menu-main: after (treść: "\ 25C8"; line-height: 1; pozycja: bezwzględna; top: 50%; transform: translateY (-50% );) .menu-main: przed (po lewej: 15px;) .menu-main: po (po prawej: 15px;) .menu-main li (wyświetlanie: inline-block; padding: 5px 0;) .menu-main a (dekoracja tekstu: brak; display: inline-block; margines: 2px 5px; padding: 6px 15px; rodzina czcionek: "PT Sans", sans-serif; rozmiar czcionki: 16px; kolor: # 777777; border-bottom : 1px stały przezroczysty; n: .3s liniowy; ) .menu-main .current, .menu-main a: hover (border-radius: 3px; background: # f3ece1; color: # 313131; text-shadow: 0 1px 0 #fff; border-color: # c6c6c6;) @media (max-width: 500px) (.menu-main li (wyświetlanie: blok;))

    3. Adaptacyjne menu z przegrzebkami

    • Praca
    • O
    • Blog
    • Kontakt
    @import URL („https://fonts.googleapis.com/css?family=PT+Sans+Caption”); .menu-main (list-style: brak; padding: 0 30px; margin: 0; font-size: 18px; text-align: center; position: relatywne; background: white;) .menu-main: after (treść: ""; pozycja: bezwzględna; szerokość: 100%; wysokość: 20px; lewa: 0; dół: -20px; tło: gradient promieniowy (biały 0%, biały 70%, rgba (255,255,255,0) 70%, rgba ( 255,255,255,0) 100%) 0 -10px;background-size: 20px 20px;background-repeat: repeat-x;) .menu-main li (display: inline-block;) .menu-main a (tekst-dekoracja: none; display: inline-block; margines: 0 15px; padding: 10px 30px; rodzina czcionek: "PT Sans Caption", sans-serif; kolor: # 777777; przejście: .3s linear; pozycja: względna;) .menu -main a: przed, .menu-main a: po (treść: ""; pozycja: bezwzględna; góra: calc (50% - 3px); szerokość: 6px; wysokość: 6px; obramowanie-promień: 50%; tło: # F58262; krycie: 0; przejście: .5s złagodzenie;) .menu-main a: przed (po lewej: 5px;) .menu-main a: po (po prawej: 5px;) .menu-main a. aktualny: przed, .menu-main a.cur wynajem: po, .menu-main a: najechanie: przed, .menu-main a: najechanie: po (przezroczystość: 1;) .menu-main a.current, .menu-main a: najechanie (kolor: # F58262; ) @media (max-width: 680px) (.menu-main li (wyświetlanie: blok;))

    4. Responsywne menu na wstążce

    @import URL („https://fonts.googleapis.com/css?family=PT+Sans+Caption”); .top-menu (margines: 0 60px; pozycja: względna; tło: # 5A394E; box-shadow: wstawka 1px 0 0 rgba (255,255,255, .1), wstawka -1px 0 0 rgba (255,255,255, .1), wstawka 150px 0 150px -150px rgba (255,255,255, .12), wstawka -150px 0 150px -150px rgba (255,255,255, .12);) .top-menu: przed, .top-menu: po (treść: ""; pozycja: bezwzględna ; z-index: 2; lewy: 0; szerokość: 100%; wysokość: 3px;) .top-menu: przed (góra: 0; obramowanie-dół: 1px kreskowana rgba (255,255,255, .2);) .top- menu: after (dół: 0; border-top: 1px dashed rgba (255,255,255, .2);) .menu-main (styl listy: brak; dopełnienie: 0; margines: 0; wyrównanie tekstu: środek;). menu-main: przed, .menu-main: after (treść: ""; pozycja: bezwzględna; szerokość: 50px; wysokość: 0; góra: 8px; border-top: 18px solid # 5A394E; border-bottom: 18px solid # 5A394E; przekształcenie: obrót (360 stopni); indeks z: -1;) .menu-main: przed (po lewej: -30px; obramowanie po lewej: 12px solid rgba (255, 255, 255, 0);) .menu- main: after (po prawej: -30px; obramowanie po prawej: 12px stałe rgba (2 55, 255, 255, 0); ) .menu-main li (display: inline-block; margin-right: -4px;) .menu-main a (text-decoration: none; display: inline-block; padding: 15px 30px; font-family: "PT Sans Caption ", sans-serif; kolor: biały; przejście: .3s linear;) .menu-main a.current, .menu-main a: hover (tło: rgba (0,0,0, .2);) @media (max-width: 680px) (.top-menu (margin: 0;) .menu-main li (wyświetlanie: blok; margines-prawy: 0;) .menu-main: przed, .menu-main: po (treść: brak;) .menu-main a (wyświetlanie: blok;))

    5. Responsywne menu z logo pośrodku

    @import URL („https://fonts.googleapis.com/css?family=Arimo”); .top-menu (pozycja: względne; tło: rgba (34,34,34, .2);) .menu-main (styl listy: brak; margines: 0; dopełnienie: 0;) .menu-main: po (treść: ""; display: table; clear: obie;) .left-item (float: left;) .right-item (float: right;) .navbar-logo (position: absolute; left: 50%; top : 50%; transform: translate (-50%, - 50%);) .menu-main a (dekoracja tekstu: brak; display: block; line-height: 80px; padding: 0 20px; font-size: 18px ; odstępy między literami: 2px; rodzina czcionek: "Arimo", sans-serif; grubość czcionki: pogrubiona; kolor: biały; przejście: .3s linear;) .menu-main a: hover (tło: rgba (0, 0,0, .3);) @media (max-width: 830px) (.menu-main (padding-top: 90px; text-align: center;) .navbar-logo (pozycja: bezwzględna; lewa: 50% ; top: 10px; transform: translateX (-50%);) .menu-main li (float: brak; display: inline-block;) .menu-main a (line-height: normal; padding: 20px 15px; font -size: 16px;)) @media (max-width: 630px) (.menu-main li (wyświetlacz: blok;))

    6. Responsywne menu z logo po lewej stronie

    @import URL („https://fonts.googleapis.com/css?family=Arimo”); .top-menu (tło: rgba (255,255,255, .5); box-shadow: 3px 0 7px rgba (0,0,0, .3); padding: 20px;) .top-menu: after (treść: "" ; display: table; clear: oba;) .navbar-logo (display: inline-block;) .menu-main (list-style: none; margin: 0; padding: 0; float: right;) .menu-main li (wyświetlacz: inline-block;) .menu-main a (dekoracja tekstu: brak; wyświetlacz: blok; pozycja: względna; wysokość linii: 61px; padding-left: 20px; rozmiar czcionki: 18px; odstępy między literami : 2px; rodzina czcionek: "Arimo", sans-serif; grubość czcionki: pogrubiona; kolor: # F73E24; przejście: .3s linear;) .menu-main a: before (treść: ""; szerokość: 9px; wysokość: 9px; tło: # F73E24; pozycja: bezwzględna; po lewej: 50%; przekształcenie: obrót (45deg) translateX (6,5px); krycie: 0; przejście: .3s linear;) .menu-main a: hover: before (krycie: 1;) @media (max-width: 660px) (.menu-main (float: brak; padding-top: 20px;) .top-menu (text-align: center; padding: 20px 0 0 0; ) .menu-main a (dopełnienie: 0 10px;) .menu-main a: be fore (transform: rotate (45deg) translateX (-6px);)) @media (max-width: 600px) (.menu-main li (wyświetlanie: blok;))

    Kontynuujemy serię z samouczkiem na temat rozwijanych menu. Następnym krokiem jest poziome rozwijane menu w css własnymi rękami.

    Jeśli trafiłeś tu przypadkiem lub szukałeś innej implementacji rozwijanego menu, radzę przejść do sekcji nadrzędnej.

    Ta sekcja opisuje poziome menu rozwijane w CSS i HTML.

    Nawigacja po stronie:

    Więc, nasze zadanie:

    utwórz poziome menu z rozwijanym css (na listach ul li) bez użycia jQuery i Javascript, a także bez użycia tabel

    w kodzie.

    Rozwijane poziome menu html

    Przede wszystkim przed przystąpieniem do pisania kodu musimy stworzyć szablon html dla menu.

    Ze względu na to, że tworzymy menu uniwersalne, chcę, aby było ono jak najbardziej zbliżone do wyjścia menu WordPress. Moim zdaniem jest to jeden z najprostszych i najbardziej wszechstronnych kodów menu HTML. To wygląda tak:

    Jak widać z kodu, nasze rozwijane menu zostanie zaimplementowane na listach ul i li. Tak wygląda to menu bez stylów CSS:

    Powiedzmy, że wygląda brzydko, jak zwykła lista. Następnie musimy pokolorować to menu stylami CSS.

    Poziome menu rozwijane CSS

    Style CSS dla menu rozwijanych i nie tylko są tak samo ważne jak powietrze. W końcu zakładka rozwijana jest oparta na pseudoklasie: hover.

    W przypadku poziomego menu rozwijanego potrzebujemy następujących stylów:

    # menu1 (pozycja: względna; display: blok; szerokość: 100%; wysokość: auto; z-index: 10;) # menu1 ul (pozycja: względna; display: blok; margines: 0px; padding: 0px; szerokość: 100 %; wysokość: auto; styl listy: brak; tło: # F3A601;) # menu1> ul :: after (wyświetlacz: blok; szerokość: 100%; wysokość: 0px; wyczyść: oba; zawartość: "";) # menu1 ul li (pozycja: względna; display: block; float: left; width: auto; height: auto;) # menu1 ul li a (display: block; padding: 9px 25px 0px 25px; font-size: 14px; font- rodzina: Arial, bezszeryfowa; kolor: #ffffef; wysokość linii: 1,3 em; dekoracja tekstu: brak; grubość czcionki: pogrubiona; transformacja tekstu: wielkie litery; wysokość: 36 pikseli; rozmiar pola: obramowanie; ) # menu1 ul li> a: najechanie, # menu1 ul li: najechanie> a (tło: # EBBD5B; kolor: # 2B45E0;)

    To nie koniec, a jedynie fragment CSS dla głównego poziomego menu. Następnie napiszemy style dla menu rozwijanego:

    # menu1 ul li ul (pozycja: bezwzględna; góra: 36px; lewo: 0px; wyświetlacz: brak; szerokość: 200px; tło: # EBBD5B;) # menu1 ul li: hover ul (wyświetlacz: blok;) / * ta linia implementuje mechanizm upuszczania * / # menu1 ul li ul li (float: brak; szerokość: 100%;) # menu1 ul li ul li a (wyświetlanie: blok; transformacja tekstu: brak; wysokość: auto; dopełnienie: 7px 25px; szerokość: 100%; box-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 ( tło: # FDDC96; kolor: # 6572BC;)

    Teraz to wszystko. Sam mechanizm rozwijania jest zaimplementowany w jednej linii.

    Zobacz skórkę z tym menu:

    Figa. 2 (poziome menu rozwijane)

    Poniżej znajduje się widok demo menu rozwijanego, a także link do pobrania źródła. (Demo zostanie otwarte jako rozwijane menu na górze tej strony, nie musisz klikać w nowym oknie 🙂 ani kółka myszy)

    Poziome menu rozwijane o pełnej szerokości

    Większość z Was może mi zarzucić, że takie menu, jak pokazałem powyżej, to pozdrowienia z przeszłości i częściowo macie rację, chociaż natknąłem się na świeże layouty z takimi menu.

    Mam nadzieję, że pobrałeś powyższy przykład. Html pozostaje ten 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.

    #conteiner (szerokość: 1000px; wysokość: auto; margines: 0px auto; padding-top: 10px;) # menu1 (pozycja: względna; wyświetlacz: blok; szerokość: 100%; wysokość: auto; z-index: 10;) # menu1 ul (pozycja: względna; wyświetlacz: blok; margines: 0px; dopełnienie: 0px; szerokość: 100%; wysokość: auto; styl listy: brak; tło: # F3A601;) # menu1> ul (wyrównanie tekstu: justify; font-size: 1px; line-height: 1px;) # menu1> ul :: after (display: inline-block; width: 100%; height: 0px; content: "";) # menu1 ul li (pozycja : względne; display: inline-block; width: auto; height: auto; vertical-align: top; text-align: left;) # menu1 ul li a (display: block; padding: 9px 35px 0px 35px; rozmiar czcionki : 14px; rodzina czcionek: Arial, sans-serif; kolor: #ffffef; wysokość linii: 1,3 em; dekoracja tekstu: brak; grubość czcionki: pogrubiona; transformacja tekstu: wielkie litery; wysokość: 36 pikseli; rozmiar pola : border-box;) # menu1 ul li> a: najechanie, # menu1 ul li: najechanie> a (tło: # EBBD5B; kolor: # 2B45E0;) # menu1 ul li ul (pozycja: bezwzględna; góra: 36px; lewo : 0px; Nie wyświetla się; szerokość: auto; tło: # EBBD5B; spacja: nowrap; ) # menu1 ul li: last-child ul (/ * ostatni element zostanie dołączony po prawej stronie * / left: auto; right: 0px;) # menu1 ul li: hover ul (wyświetlanie: blok;) / * ta linia implementuje mechanizm dropouts * / # menu1 ul li ul li (wyświetlacz: blok; szerokość: auto;) # menu1 ul li ul li a (wyświetlacz: blok; text-transform: none; height: auto; padding: 7px 35px; width : 100% ; box-size: 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 (tło: # FDDC96; kolor: # 6572BC;)

    Ponadto ten przykład różni się od pierwszego tym, że menu rozwijane, samo menu rozwijane, rozciąga się w zależności od szerokości wszystkich elementów menu.

    W przypadku bardzo długich pozycji menu ta opcja może nie być zbyt wygodna, ponieważ wyjdą poza granice. 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 dla poziomego menu rozwijanego:

    Bez separatorów to menu wygląda tak sobie. Separatory można dodawać do html ręcznie, ale jeśli masz CMS, na przykład WordPress, nie jest zbyt wygodne dodawanie ich ręcznie.

    Rozdzielane poziome menu rozwijane

    Istnieje kilkadziesiąt opcji, jak dodać pasek (separator) między pozycjami menu w czystym CSS. Warianty używające :: before lub :: after, lub znacznie prostsze border-left, nie będę powielał border-right.

    Zdarzają się sytuacje, w których layout jest zbudowany tak cudownie, że nie można obejść się bez jquery.

    Kod html pozostaje ten sam, dołączamy jedynie bibliotekę jQuery i plik, który z niej korzysta na samym początku:

    Zaraz po.

    Jak rozumiesz, musisz utworzyć plik menu skryptu-3.js i umieść tam ten mały kod:

    $ (dokument) .ready (funkcja () ($ ("# menu1> ul> li: not (: ostatnie-dziecko)")). po ("");));

    Style CSS dla takiego menu należy pozostawić bez zmian, + wrzuć ten fragment na koniec:

    # menu1 ul li.razd (wysokość: 28px; szerokość: 1px; tło: #ffffff; margines-góra: 4px;)

    Takie poziome menu rozwijane z ogranicznikami w jQuery będzie wyglądać tak:

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

    Zaletami tego rozwiązania są:

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

    Poziome menu rozwijane CSS + HTML

    Ponieważ mówimy o wielopoziomowych menu rozwijanych po najechaniu myszą, prawdopodobnie warto podzielić je na podgrupy:

    1. z vipadashką podczas unoszenia się w bok
    2. z rozwijanym menu trzeciego poziomu

    W moich przykładach pokażę 3-poziomowe wielopoziomowe menu CSS, wtedy myślę, że nie będzie trudno odgadnąć, co należy zrobić.

    Wielopoziomowe menu rozwijane z vipadash z boku po najechaniu kursorem

    Najpierw musimy nieco poprawić nasz html. Dodamy kilka linijek dla poziomu 3:

    #conteiner (szerokość: 1000px; wysokość: auto; margines: 0px auto; padding-top: 10px;) # menu1 (pozycja: względna; wyświetlacz: blok; szerokość: 100%; wysokość: auto; z-index: 10;) # menu1 ul (pozycja: względna; wyświetlacz: blok; margines: 0px; dopełnienie: 0px; szerokość: 100%; wysokość: auto; styl listy: brak; tło: # F3A601;) # menu1> ul (wyrównanie tekstu: justify; font-size: 1px; line-height: 1px;) # menu1> ul :: after (display: inline-block; width: 100%; height: 0px; content: "";) # menu1 ul li (pozycja : względny; display: inline-block; width: auto; height: auto; vertical-align: top; text-align: left;) # menu1 ul li.razd (height: 28px; width: 1px; background: #ffffff; margin-top: 4px;) # menu1 ul li a (wyświetlacz: blok; padding: 9px 45px 0px 45px; rozmiar czcionki: 14px; rodzina czcionek: Arial, bezszeryfowy; kolor: #ffffef; wysokość linii: 1,3 em; text-decoration: none; font-weight: bold; text-transform: uppercase; height: 36px; box-sizing: border-box;) # menu1 ul li> a: hover, # menu1 ul li: hover> a (tło: # EBBD5B; kolor: # 2B45E0; ) # menu1 ul li ul (pozycja: bezwzględna; góra: 36px; lewo: 0px; wyświetlacz: brak; szerokość: auto; tło: # EBBD5B; białe znaki: nowrap;) # menu1> ul> li: last-child> ul (/ * ostatni element zostanie dołączony po prawej stronie * / left: auto; right: 0px;) # menu1 ul li: hover> ul (display: block;) / * ta linia implementuje mechanizm dropout * / # menu1 ul li ul li (wyświetlacz: blok; szerokość: auto;) # menu1 ul li ul li a (wyświetlacz: blok; transformacja tekstu: brak; wysokość: auto; dopełnienie: 7px 45px; szerokość: 100%; rozmiar pudełka: 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; lewy: 100%; wyświetlacz: brak; tło: # fddc96;) # menu1> ul> li: ostatnie dziecko > ul ul (lewo: auto; prawo: 100%;) # menu1 ul li ul li ul a (kolor: # F38A01;)

    Skopiuj pliki dla jQuery tak, jak były z poprzedniego przykładu. Postanowiłem zostawić separatory, żeby menu wyglądało choć trochę lepiej. Możesz oczywiście bez nich.

    Tak to się stało:
    Zrobiłem 2 skórki w jednym, aby pokazać, jak wygląda lista rozwijana po prawej i pośrodku.

    Poniżej możesz obejrzeć demo i pobrać przykład:

    Wielopoziomowe menu rozwijane z wyskakującym okienkiem vipadash po najechaniu kursorem

    W tytule wyszło trochę oleju, ale zadziała, najważniejsze jest kod.

    Istotą tego przykładu jest stworzenie poziomego menu rozwijanego o pełnej szerokości z menu rozwijanym o pełnej szerokości + warstwami.

    Nie będę zmieniał kodu html, można go zaczerpnąć z poprzedniego przykładu. Zachowujemy również separatory jQuery.

    Zmieni się tylko cały CSS:

    #conteiner (szerokość: 1000px; wysokość: auto; margines: 0px auto; padding-top: 10px;) # menu1 (pozycja: względna; wyświetlacz: blok; szerokość: 100%; wysokość: auto; z-index: 10;) # menu1 ul (pozycja: względna; wyświetlacz: blok; margines: 0px; dopełnienie: 0px; szerokość: 100%; wysokość: auto; styl listy: brak; tło: # F3A601;) # menu1> ul (wyrównanie tekstu: justify; font-size: 1px; line-height: 1px;) # menu1> ul :: after (display: inline-block; width: 100%; height: 0px; content: "";) # menu1 ul li (pozycja : względne; display: inline-block; width: auto; height: auto; vertical-align: top; text-align: left;) # menu1> ul> li (pozycja: statyczna;) # menu1 ul li.razd (height : 28px; width: 1px; background: #ffffff; margin-top: 4px;) # menu1 ul li a (wyświetlacz: blok; padding: 9px 45px 0px 45px; rozmiar czcionki: 14px; rodzina czcionek: Arial, sans- serif; color: #ffffef; line-height: 1.3em; text-decoration: none; font-weight: bold; text-transform: uppercase; height: 36px; box-sizing: border-box;) # menu1 ul li> a: zawis, # menu1 ul li: hover> a (tło: # EBBD5B; kolor: # 2B45E0; ) # menu1 ul li ul (pozycja: bezwzględna; góra: 36px; lewo: 0px; wyświetlacz: brak; szerokość: 100%; tło: # EBBD5B;) # menu1> ul> li> ul :: after (wyczyść: oba; float: none; width: 100%; height: 0px; content: "";) # menu1 ul li: hover> ul (display: block;) / * ta linia implementuje mechanizm dropout * / # menu1 ul li ul li ( display : block; width: 30%; float: left;) # menu1 ul li ul li a (display: block; text-transform: none; height: auto; padding: 7px 45px; width: 100%; box-sizing: border -box;) # menu1 ul li ul li: pierwsze dziecko> a (góra granic: 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; lewy: 100%; wyświetlanie: brak; tło: # fddc96; z-index: 15;) # menu1 ul li ul li ul li (wyświetlanie : block; float: none; width: 100%;) # menu1 ul li ul li ul a (kolor: # F38A01; border-top: 1px solid #ffffff;)

    Oto jak będzie wyglądać menu: Jedyną rzeczą jest to, że strona musi mieć wystarczająco dużo miejsca, ponieważ skrajna pozycja po prawej stronie nie ma miejsca na rozwijane menu. Ten problem można rozwiązać przez: n-dziecko, ale nie zawracałam sobie głowy ogrodzeniem ogrodu.

    Zobacz demo poziomego, warstwowego menu rozwijanego:

    Jak mogłeś zauważyć: dolna płyta również ma pełną szerokość. W ten sposób tworzone są dropouty w kilku blokach.

    To wszystko dla mnie, mam nadzieję, że przynajmniej jeden z moich przykładów Ci odpowiada. Dziękuję za uwagę.

    przyniesie to korzyści zarówno im, jak i mnie 🙂.

    Jeśli przeczytałeś cały post, ale nie znalazłeś, jak zrobić swoje poziome menu rozwijane w css, zadaj pytanie w komentarzach lub skorzystaj z wyszukiwarki na stronie.

    Również radzę odwiedzić stronę nadrzędną https: // strona / vypadayushhee-menu /, gromadzone są tam wszystkie przykłady i odmiany menu rozwijanych.

    Cześć. Od bardzo dawna nie pisałem postów dotyczących pracy html/css. Ostatnio dopiero zacząłem wymyślać nowy layout i przy okazji natrafiłem na ciekawą sztuczkę, która pozwala sprawić, że menu będzie gumowate (można dodać do niego nowe pozycje i rozmiar się nie zwiększy, ale zawsze będzie 100% bloku nadrzędnego). Tak więc dzisiaj zaimplementujemy gumowe menu w css.

    Jeśli jesteś zbyt leniwy, aby przeczytać artykuł, możesz obejrzeć ten film. Autor też wszystko bardzo fajnie tłumaczy:

    CSS Gum Menu - Krok 1

    Pierwszym krokiem jest zawsze znacznik HTML, gdzie możemy się bez niego obejść? Ale w naszym przypadku wszystko będzie proste:

    1. opakowanie bloku dla menu
    2. samo menu, wyświetlane za pomocą listy punktowanej (znacznik ul)
    3. cóż, elementy menu są w środku, a w nich odpowiednio są już linki

    Wszystko jasne, oto mój kod znacznika:



    Wszystko wygląda standardowo, tak:

    Teraz sprowadzimy wszystko do pożądanej formy, CSS przejmie pracę.

    Krok 2 - podstawowe style

    Następnie dodam stylizację do bloku opakowania. Mianowicie ustawię maksymalną szerokość na 600 pikseli (aby wygodnie było zrobić zrzut ekranu, aby menu się zmieściło), a także wyśrodkować blok.

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

    Krok 3 – wprowadzenie gumowatości

    Przejdźmy teraz do samego menu. Usunę z niego znaczniki (przy tagu ul), zrobię liniowy gradient tła, a co najważniejsze użyję właściwości display: table-row, aby kontener dla menu zachowywał się jak wiersz tabeli. Ważne jest, aby to zrobić w przypadku dalszych manipulacji.

    Menu R (
    tło: gradient liniowy (po prawej, # b0d4e3 0%, # 88bacf 100%);
    wyświetlacz: tabela-wiersz;
    styl listy: brak;
    }

    Jak widać, podany kod rozwiązał wszystko, o czym pisałem. Nawiasem mówiąc, wygodnie jest generować gradienty za pomocą narzędzia Ultimate CSS Gradient generator. Napiszę o nim później.

    R-menu li (
    wyrównanie w pionie: dół;
    wyświetlacz: komórka tabeli;
    szerokość: auto;
    wyrównanie tekstu: środek;
    wysokość: 50px;
    obramowanie po prawej: 1px stałe # 222;
    }

    • vertical-align: bottom - ta właściwość jest niezbędna, aby tekst w pozycji menu, który zajmuje 2 wiersze, był wyświetlany dokładnie. Kiedy tworzymy menu, możesz usunąć tę właściwość, powiększyć, aby elementy się skurczyły, a tekst zawijał się w dwóch wierszach i zobaczysz problem z wyświetlaniem. Zwróć nieruchomość i wszystko powinno być w porządku.
    • display: table-cell - skoro ustawiliśmy samo menu wyświetlania jako wiersz tabeli, logiczne byłoby ustawienie wyświetlania jego elementów jako komórek w tabeli. Czy to jest to konieczne.
    • szerokość: auto - szerokość zostanie obliczona automatycznie, w zależności od długości tekstu w akapicie
    • text-align: center służy tylko do wyśrodkowania tekstu wewnątrz
    • wysokość: 50px - ustaw wysokość na 50 pikseli
    • cóż, border-right to tylko ramka po prawej, taki separator dla elementów

    Chociaż menu wygląda brzydko, ale nic, czas sobie o tym przypomnieć.

    Ostatnią rzeczą do zrobienia jest stylizowanie linków wewnątrz akapitów. Tutaj mam ten kod:

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

    A tak wygląda teraz menu:

    Ponownie wyjaśnię kilka linii:

    • właściwość text-decoration usuwa domyślne podkreślenie linków
    • szerokość: 1000px to prawdopodobnie najważniejsza linia. Musisz ustawić linki na mniej więcej taką samą szerokość, może to być mniej, ale koniecznie więcej niż najszerszy element menu. Łącza nie będą miały szerokości 1000 pikseli, ponieważ pozycja menu li z szerokością ustawioną na auto będzie ograniczać szerokość, ale spowoduje to, że dla dowolnej liczby pozycji w menu zawsze będzie miała szerokość 100 procent.
    • vertical-align: middle i display: table-cell - pierwsza wyrówna tekst pionowo do środka, a druga sprawi, że linki będą wyświetlane jako komórki. Obie właściwości są potrzebne.
    • czcionka to tylko kilka ustawień czcionek. Przeczytaj o właściwościach CSS dla czcionek w tym artykule.

    Krok 4 (opcjonalnie) dodaj interaktywność

    Na przykład, aby zmienić kolor elementu menu po najechaniu myszą. Odbywa się to po prostu za pomocą pseudoklasy hover:

    R-menu li: najedź (
    kolor tła: # 6bba70;
    }

    Testowanie menu pod kątem gumowatości

    Świetnie, menu gotowe, ale nie sprawdziliśmy najważniejszego - jaka jest guma, tak jak obiecałam. Cóż, dodam jeszcze 2 pozycje do menu:

    Menu ma szerokość 600 pikseli. Reszta przedmiotów po prostu trochę się skurczyła, aby zmieścić 2 nowe.

    Dodam jeszcze 1 długi punkt:

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

    Ograniczę menu do trzech pozycji.

    Pozycje stały się znacznie swobodniejsze, ale samo menu nie zmieniło się na szerokość. Zrobiliśmy więc w 100% gumowe menu!

    Jak to dostosować?

    Zasadniczo, jeśli nadałeś blokowi owijarki maksymalną szerokość, a nie stałą, to nawet nie trzeba jej dostosowywać. W moim przypadku mam właściwość max-width: 600px, a gdy szerokość spadnie poniżej 600 pikseli, blok po prostu skurczy się po ekranie, bez tworzenia poziomego przewijania.

    Cóż, jeśli chcesz w jakiś sposób zmienić lub poprawić menu na urządzeniach mobilnych lub szerokich ekranach, to media kwerendy Ci pomogą! Powodzenia w budowie strony!