dom / programy/ Bootstrap 4 rozciągnij menu do pełnej szerokości. Poziome menu rozwijane zrób to sam w css i html

Rozciągnij menu Bootstrap 4 do pełnej szerokości. Poziome menu rozwijane zrób to sam w css i html

Cześć. Przez długi czas nie pisałem postów na temat działania html/css. Ostatnio właśnie zacząłem wymyślać nowy layout i przy okazji natknąłem się na ciekawy trik, który pozwala zrobić menu gumowym (można dodawać do niego nowe pozycje i rozmiar się nie powiększy, ale zawsze będzie 100 % bloku macierzystego). Więc dzisiaj wdrażamy gumowe menu w css.

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

Płynne menu CSS Krok 1

Pierwszym krokiem jest zawsze znacznik html, gdzie bez niego. Ale w naszym przypadku wszystko będzie proste:

blok opakowania menu

samo menu, renderowane za pomocą wypunktowanej listy (tag ul)

cóż, pozycje menu w środku, aw nich odpowiednio, są już linki

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

Całość wygląda standardowo, tak:

Teraz doprowadzimy wszystko do pożądanej formy, CSS zostanie zabrany do pracy.

Krok 2 — podstawowe style

Następnie dodam style do bloku opakowującego. Mianowicie ustawię maksymalną szerokość na 600 pikseli (tylko po to, aby wygodnie było zrobić zrzut ekranu, aby menu się zmieściło), a także wycentruję blok.

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

Krok 3 - zaimplementuj gumowatość

Teraz zajmujemy się samym menu. Usunę z niej znaczniki (z tagu ul), zrobię gradient liniowy tła, a co najważniejsze właściwością display: table-row sprawię, że kontener dla menu będzie zachowywał się jak wiersz tabeli. Jest to ważne dla dalszych manipulacji.

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

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

R-menu li(
wyrównanie w pionie: dół;
wyświetlacz: komórka tabeli;
szerokość: automatyczna;
wyrównanie tekstu: środek;
wysokość: 50 pikseli;
obramowanie po prawej: 1 piksel pełny #222;
}

vertical-align: bottom - ta właściwość jest konieczna, aby jeśli tekst w pozycji menu zajmował 2 linie, został wyświetlony dokładnie. Kiedy tworzymy menu, możesz usunąć tę właściwość, powiększyć tak, aby elementy się zmniejszyły, a tekst zawijał się na dwóch wierszach, a zobaczysz problem z wyświetlaniem. Zwróć nieruchomość, a wszystko będzie dobrze.
display: table-cell - ponieważ ustawiliśmy samo menu wyświetlania jako wiersz tabeli, logiczne byłoby ustawienie jego elementów do wyświetlania jako komórki w tabeli. Czy to jest to konieczne.
width: auto - szerokość zostanie obliczona automatycznie w zależności od długości tekstu w akapicie
text-align: center służy tylko do wyrównania tekstu wewnątrz na środku
wysokość: 50px - ustaw wysokość na 50 pikseli
cóż, border-right to po prostu obramowanie po prawej stronie, taki separator dla przedmiotów

O ile menu wygląda nieestetycznie, ale to nic, czas o tym przypomnieć.

Ostatnią rzeczą do zrobienia jest stylizacja linków w akapitach. Tutaj mam ten kod:

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

A tak wygląda teraz menu:

Ponownie wyjaśnię kilka linii:

właściwość text-decoration usuwa domyślne podkreślenia z linków
szerokość: 1000px to chyba najważniejsza linia. Musisz ustawić linki na mniej więcej taką samą szerokość, może mniejszą, ale zawsze większą niż najszersza pozycja menu. Łącza nie będą miały szerokości 1000 pikseli, ponieważ szerokość będzie ograniczona przez pozycję menu li, która ma szerokość ustawioną na auto, ale sprawi, że dla dowolnej liczby pozycji w menu zawsze będzie 100 procent szerokości.
vertical-align: middle i display: table-cell - pierwszy wyrówna tekst pionowo do środka, a drugi również wyświetli linki jako komórki. Obie właściwości są wymagane.
czcionka - cóż, to tylko zestaw ustawień czcionki. Przeczytaj o właściwościach css dla czcionek w tym artykule.

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

Na przykład, aby zmienić kolor pozycji menu po najechaniu myszką. Jest to realizowane w prosty sposób za pomocą pseudoklasy hover:

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

Testowanie menu pod kątem gumowatości

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

Menu pozostaje szerokie na 600 pikseli. Reszta elementów po prostu kurczy się trochę, aby zmieścić 2 nowe.

Dodam jeszcze jeden długi akapit:

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 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 swojej szerokości. Zrobiliśmy więc w 100% gumowe menu!

Jak to zaadaptować?

W zasadzie, jeśli ustawisz blok owijania nie na stałą, ale na maksymalną szerokość, to nawet nie trzeba go dostosowywać. W moim przypadku mam właściwość max-width: 600px, a gdy szerokość staje się mniejsza niż 600px, blok po prostu zmniejszy się zgodnie z ekranem, bez tworzenia poziomego przewijania.

Cóż, jeśli chcesz jakoś zmienić lub naprawić menu na urządzeniach mobilnych lub szerokich ekranach, to zapytania o media Ci pomogą! Powodzenia w budowaniu strony!

Dzień dobry

Często zdarza się, że trzeba zrobić menu poziome, które rozciągnie się na całą szerokość bloku nadrzędnego, niezależnie od tego, ile elementów zawiera.

Dziś chciałabym Wam pokazać jak stworzyć właśnie takie menu.

Zatem nasze menu będzie wyglądało następująco:

Jest rozciągnięty do pełnej szerokości, po najechaniu kursorem jest podświetlony. Menu jest zaokrąglone po bokach.

ZNACZNIKI HTML

...

dom

Ciekawe wiadomości

Kolejna pozycja w menu!

Aby menu było pełne, użyłem tabel o szerokości 100%. Każda tabela ma element div kontenera elementu menu. W zależności od tego, czy pierwsza, ostatnia czy pośrednia pozycja menu - div ma przypisaną odpowiednią klasę.

Każdy kontener div ma 2 absolutnie ustawione paski boczne, które są potrzebne do prawidłowego wyświetlania. Jeśli używasz standardowych ramek, to po zmianie pozycji menu tekst przeskoczy o 1-2 piksele, co jest dobre.

Aktywna klasa odpowiada za wybraną pozycję menu i ją podświetla.

Każdy element ma obraz i tekst. Aby to wszystko było wyrównane ściśle w środku w pionie, używamy tabeli. Dzięki właściwości wyrównania w pionie nasze pozycje menu zawsze będą wyświetlane płynnie i nie będą się przesuwać.

ZASADY CSS

Najpierw ustawimy style dla ogólnego wyświetlania menu:

Menu_container (wypełnienie na górze: 40px; szerokość: 100%; wysokość: 47px; odstępy między ramkami: 0px;) .menu_container td (wyrównanie w pionie: środek; /* wyrównanie w pionie */) .last_point_menu, .first_point_menu, .middle_point_menu ( width: 100%; height: 47px; border: 1px solid #dadbda; z-index: 1000; pozycja: względna; border-left: none; ) .inner_table ( width: 100%; height: 100%; ) .inner_table td ( dopełnienie: 0 pikseli; wyrównanie do pionu: środek; obramowanie: brak; wyrównanie tekstu: do lewej; szerokość: 150 pikseli; dopełnienie po lewej stronie: 4 piksele;) .td.inner_table_title ( dopełnienie u góry: 4 piksele; grubość czcionki: pogrubienie; ) .td.inner_table_img (szerokość: 40px!important;) .inner_table_menu (wysokość: 100%; dopełnienie: 0px; wyrównanie do pionu: środek; obramowanie: brak; wyrównanie tekstu: do lewej;) .inner_table_title (dopełnienie-do lewej: 10px; dopełnienie w prawo: 10 pikseli; przekształcenie tekstu: wielkie litery; wysokość linii: 13 pikseli;) .inner_table_menu td.inner_table_img (szerokość: 30 pikseli! ważne; wysokość: 30 pikseli! ważne; dopełnienie po lewej stronie: 15 pikseli;)

Dla urody zaokrąglij rogi po bokach menu:

First_point_menu( -webkit-border-górny-lewy-promień: 5px; -webkit-border-dolny-lewy-promień: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-right: 1px solid #dadbda;) .last_point_menu (-webkit-border-top-right-radius: 5px; -webkit-border -dolny-prawy-promień: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; obramowanie-prawy-górny-promień: 5px; obramowanie-dolny-prawy-promień: 5px ;)

Teraz nasze menu nabrało piękniejszego wyglądu:

Jak dotąd pierwszy akapit nie ma lewego obramowania. Naprawimy to później.

Teraz dodajmy efekty najechania kursorem do menu.

Middle_point_menu:hover, .last_point_menu:hover, .first_point_menu:hover, .middle_point_menu.active, .last_point_menu.active, .first_point_menu.active, .middle_point_menu.active (kolor tła: # CAE285; obraz tła: -moz-liniowy- gradient(top, #CAE285, #9FCB56); obraz tła: -webkit-gradient(linear, 0 0, 0 100%, from(#CAE285), to(#9FCB56)); obraz tła: -webkit-linear -gradient(góra, #CAE285, #9FCB56);obraz tła: -o-linear-gradient(góra, #CAE285, #9FCB56);obraz tła: gradient liniowy(do dołu, #CAE285, #9FCB56); border: 1px solid #9FCB56; border-color: #aec671 #9fbb62 #87ac4a; border-left: none; z-index: 5000; ) /* obramowania pracy po najechaniu kursorem*/ .first_point_menu ( border: 1px solid #dadbda; ) .first_point_menu:hover, .first_point_menu.active ( border: 1px solid #9FCB56; border-color: #aec671 #9fbb62 #87ac4a; ) .last_point_menu ( border: 1px solid #dadbda; border-left: none; ) .last_point_menu:hover (obramowanie: 1px stałe #9FCB56; obramowanie-lewo: brak; kolor obramowania: #aec671 #9fbb62 #87ac4a; ) .last_point_menu.active ( lewe obramowanie: brak; )

Teraz nasze menu wygląda o wiele ładniej, ale na razie nie mamy ramek dla wybranych pozycji menu. Naprawmy to!

/* style krawędzi bocznych */ .borderLeftSecond, .borderRightSecond ( display: none; position: absolute; width: 1px; height: 47px; background-color: #9fbb62; top: 0px; z-index: 1000; ) /* przesunięcia bezwzględne dla obramowań */ .borderLeftSecond ( left: 0px; ) .borderRightSecond ( right: -1px; ) /* pokaż obramowania obiektów aktywnych i najechanych kursorem */ .active .borderLeftSecond, .active .borderRightSecond, .middle_point_menu:hover > . borderLeftSecond , .middle_point_menu:hover > .borderRightSecond, .last_point_menu:hover > .borderLeftSecond .first_point_menu:hover > .borderRightSecond ( display: block; ) /* obsługa przypadków pierwszego i ostatniego elementu */ .first_point_menu.active .borderLeftSecond ( display: brak; ) .last_point_menu.active .borderRightSecond (wyświetlanie: brak; ) .last_point_menu:hover .borderLeftSecond (wyświetlanie: blok; )

To wszystko!

Mamy świetne menu rozciągnięte na całą szerokość bloku nadrzędnego! Punkty na sobie podczas najeżdżania myszką nie przejeżdżają, a układ nie przeskakuje.

Kontynuujemy serię lekcją na temat rozwijanych menu. Następne w kolejce jest poziome menu rozwijane zrób to sam w css.

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

W tej sekcji opisano poziome menu rozwijane w CSS i HTML.

Nawigacja po stronie:

Więc, nasze zadanie:

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

W kodzie.

poziome menu rozwijane HTML

Przede wszystkim zanim zaczniemy pisać kod, musimy stworzyć szablon html dla menu.

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

dom
O nas
Nasze Usługi
- Nasz serwis nr 1
- Nasz serwis nr 2
- Nasz serwis nr 3
- Nasz serwis nr 4
- Serwis 5
Aktualności
Łączność

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

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

Poziome rozwijane menu CSS

Style CSS dla rozwijanych menu i nie tylko są koniecznością jak powietrze. W końcu rozwijana zakładka jest zrobiona na podstawie pseudoklasy:hover.

Do 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:: after ( display: block; width: 100%; height: 0px; clear:both; content:" "; ) # menu1 ul li (pozycja: względna; wyświetlanie: blok; pływak: lewo; szerokość: auto; wysokość: auto; ) #menu1 ul li a ( wyświetlanie: blok; dopełnienie: 9px 25px 0px 25px; rozmiar czcionki: 14 pikseli; czcionka- rodzina: Arial, bezszeryfowa; kolor: #ffffef; wysokość linii: 1,3 em; dekoracja tekstu: brak; grubość czcionki: pogrubienie; transformacja tekstu: wielkie litery; wysokość: 36 pikseli; rozmiar pudełka: ramka; ) #menu1 ul li > a:hover, #menu1 ul li:hover > a( tło:#EBBD5B; kolor:#2B45E0; )

To jeszcze nie koniec, tylko część CSS dla głównego poziomego menu. Następnie napiszemy style dla menu rozwijanego:

#menu1 ul li ul( position:absolute; top:36px; left:0px; display:none; width:200px; background:#EBBD5B; ) #menu1 ul li:hover ul(display:block;)/*ta linia implementuje mechanizm opuszczania*/ #menu1 ul li ul li( float:none; width:100%; ) #menu1 ul li ul li a( display:block; text-transform:none; height:auto; padding:7px 25px; width: 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:

Ryż. 2 (poziome rozwijane menu)

Poniżej znajduje się demo działania rozwijanego menu, a także link do pobrania kodu źródłowego. (Demo otworzy się w rozwijanym menu nad tą stroną, nie trzeba klikać otwórz w nowym oknie 🙂 ani używać kółka myszy)

Menu rozwijane w poziomie 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 po części macie rację, choć spotkałem się ze świeżymi układami z takimi menu.

Mam nadzieję, że pobrałeś powyższy przykład. HTML pozostaje u nas taki sam, ale całkowicie zmienimy CSS. Możesz po prostu pobrać stąd kod CSS i wkleić go do pobranego przykładu lub zobaczyć, jak to działa w trybie demonstracyjnym.

#conteiner (szerokość: 1000px; wysokość: auto; margines: 0px auto; dopełnienie-top: 10px; ) #menu1( pozycja:względna; display:block; width:100%; height:auto; z-index:10; ) #menu1 ul( pozycja: względna; wyświetlacz: blok; margines: 0 pikseli; wypełnienie: 0 pikseli; szerokość: 100%; wysokość: auto; styl listy: brak; tło: # F3A601; ) #menu1 > ul ( wyrównanie tekstu: justify; rozmiar czcionki: 1 px; wysokość linii: 1 px; ) #menu1 > ul:: after( display: inline-block; width: 100%; height: 0px; content:" "; ) #menu1 ul li (pozycja :relative; display:inline-block; width:auto; height:auto; vertical-align:top; text-align:left; ) #menu1 ul li a( display:block; padding:9px 35px 0px 35px; font-size :14px; rodzina czcionek: Arial, bezszeryfowa; kolor: #ffffef; wysokość linii: 1,3 em; dekoracja tekstu: brak; grubość czcionki: pogrubiona; transformacja tekstu: wielkie litery; wysokość: 36 pikseli; rozmiar pudełka :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;lewa :0px; Nie wyświetla się; szerokość:automatyczna; tło:#EBBD5B; biała przestrzeń: nowrap; ) #menu1 ul li:last-child ul(/*ostatnia pozycja zostanie zakotwiczona w prawo*/ left:auto; right:0px; ) #menu1 ul li:hover ul(display:block;)/*ta linia implementuje mechanizm dropouts*/ #menu1 ul li ul li( display:block; width:auto; ) #menu1 ul li ul li a( display:block; text-transform:none; height:auto; padding:7px 35px; width :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; )

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ż będą wychodzić poza granice. Aby wyłączyć tę właściwość, po prostu wyszukaj właściwość „white-space: nowrap;” selektor #menu1 ul li ul i usuń go.

Poniżej możesz zobaczyć demo lub pobrać źródło 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 go nie jest zbyt wygodne.

Poziome rozwijane menu z separatorami

Istnieją dziesiątki opcji dodawania paska (separatora) między pozycjami menu przy użyciu czystego CSS. Opcje, które używają::before lub::after , lub znacznie prostsze border-left, border-right, nie będę powielać.

Są sytuacje, kiedy układ jest zbudowany tak cudownie, że jquery jest nieodzowne.

Nasz kod HTML pozostaje ten sam, dołączamy tylko bibliotekę jQuery i plik, który z niej korzysta na samym początku:

Zaraz po .

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

$(document).ready(function()( $("#menu1 > ul > li:not(:ostatnie-dziecko)").after(" "); ));

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

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

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

Poniżej możesz zobaczyć wersję demonstracyjną lub pobrać szablon menu poziomego:

Zaletami takiego rozwiązania są:

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

CSS+HTML poziome menu rozwijane z warstwami

Skoro mówimy o wielopoziomowych menu rozwijanych po najechaniu kursorem, warto chyba podzielić je na podgrupy:

z vipadashką, wskazując na bok

z wyskakującym wykrokiem trzeciego poziomu

W moich przykładach pokażę wielopoziomowe menu CSS dla 3 poziomów, wtedy myślę, że nie będzie trudno zgadnąć, co trzeba zrobić.

Wielopoziomowe menu rozwijane z vipadem z boku po najechaniu myszką

Na początek musimy nieco poprawić nasz 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
- Serwis 5
Aktualności
Łączność
- Mapa drogowa
  - Dodatek do mapy
  - Dodatek do mapy 2
- Formularz zwrotny

#conteiner (szerokość: 1000px; wysokość: auto; margines: 0px auto; dopełnienie-top: 10px; ) #menu1( pozycja:względna; display:block; width:100%; height: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: justify; rozmiar czcionki: 1 px; wysokość linii: 1 px; ) #menu1 > ul:: po (wyświetlanie: blok w linii; szerokość: 100%; wysokość: 0 pikseli; zawartość: " "; ) #menu1 ul li ( pozycja :relative; 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świetlanie: blok; dopełnienie: 9px 45px 0px 45px; rozmiar czcionki: 14px; rodzina czcionek: Arial, bezszeryfowa; kolor: #ffffef; wysokość linii: 1,3 em; dekoracja tekstu: brak; grubość czcionki: pogrubienie; transformacja tekstu: wielkie litery; wysokość: 36 pikseli; rozmiar pudełka: ramka; ) #menu1 ul li > a: najechanie kursorem, #menu1 ul li: najechanie kursorem > a (tło:#EBBD5B; kolor:#2B45E0; ) #menu1 ul li ul(pozycja:bezwzględna;góra:36px;lewo:0px;wyświetlanie:brak;szerokość:auto;tło:#EBBD5B;biała spacja:nowrap; ) #menu1 > ul > li:ostatnie-dziecko > ul(/*ostatnia pozycja zostanie zakotwiczona w prawo*/ left:auto; right:0px; ) #menu1 ul li:hover > ul(display:block;)/*ta linia implementuje mechanizm dropout*/ #menu1 ul li ul li( display: block; width: auto; ) #menu1 ul li ul li a ( display: block; text-transform: none; height: auto; padding: 7px 45px; width: 100%; box-size: border -box ; górna granica: 1px solid #ffffff; ) #menu1 ul li ul li: pierwsze dziecko > a(górna granica: 0px;) #menu1 ul li ul li a: najechanie, #menu1 ul li ul li: najechanie kursorem > a( tło:#FDDC96; kolor:#6572BC; ) #menu1 ul li ul li ul( góra: 0 pikseli; lewa: 100%; wyświetlacz: brak; tło: #fddc96; ) #menu1 > ul > li: ostatni -child > ul ul(lewa: auto; prawa: 100%;) #menu1 ul li ul li ul a (kolor: #F38A01;)

Pliki dla jQuery są kopiowane tak, jak w poprzednim przykładzie. Zdecydowałem się na pozostawienie separatorów, aby menu wyglądało choć trochę lepiej. Jest to oczywiście możliwe bez nich.

Oto jak to się stało:
Zrobiłem 2 skórki w jednej, żeby pokazać jak wygląda lonża z prawej i na środku.

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

Warstwowe menu rozwijane z wyskakującym menu rozwijanym po najechaniu myszką

Trochę oleju wyszło w tytule, ale będzie działać, najważniejsze to kod.

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

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

Tylko CSS zmieni się całkowicie:

#conteiner (szerokość: 1000px; wysokość: auto; margines: 0px auto; dopełnienie-top: 10px; ) #menu1( pozycja:względna; display:block; width:100%; height: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: justify; rozmiar czcionki: 1 px; wysokość linii: 1 px; ) #menu1 > ul:: po (wyświetlanie: blok w linii; szerokość: 100%; wysokość: 0 pikseli; zawartość: " "; ) #menu1 ul li ( pozycja :relative; display:inline-block; width:auto; height:auto; vertical-align:top; text-align:left; ) #menu1 > ul > li(position:static;) #menu1 ul li.razd( height :28px; szerokość: 1px; tło: #ffffff; margines-góra: 4px; ) #menu1 ul li a( display:block; padding:9px 45px 0px 45px; font-size:14px; font-family:Arial, sans- szeryf; kolor: #ffffef; wysokość linii: 1,3 em; dekoracja tekstu: brak; grubość czcionki: pogrubienie; transformacja tekstu: wielkie litery; wysokość: 36 pikseli; rozmiar pudełka: ramka; ) #menu1 ul li > a:hover, #menu1 ul li:hover > a( tło:#EBBD5B; kolor:#2B45E0; ) #menu1 ul li ul (pozycja: bezwzględna; góra: 36 pikseli; lewa: 0 pikseli; wyświetlacz: brak; szerokość: 100%; tło: #EBBD5B; ) #menu1 > ul > li > ul:: po ( wyczyść: oba; float:none; width:100%; height:0px; content:" "; ) #menu1 ul li:hover > ul(display:block;)/*ta linia implementuje mechanizm odrzucania*/ #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-size: border -box; ) #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( background:#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świetlacz : block; float:none; width:100%;) #menu1 ul li ul li ul a( color:#F38A01; border-top:1px solid #ffffff; )

Tak będzie wyglądać menu: Chodzi tylko o to, aby strona miała wystarczająco dużo miejsca, ponieważ ostatnia pozycja po prawej nie ma miejsca na wyrzucenie. Ten problem można rozwiązać poprzez: n-te dziecko, ale nie zawracałem sobie głowy ogrodzeniem ogrodu.

Zobacz demo poziomego wielopoziomowego menu rozwijanego:

Jak być może zauważyłeś: płyta dolna jest również pełnej szerokości. W ten sposób wykonuje się wypady w kilku blokach.

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

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

Jeśli przeczytałeś post w całości, ale nie znalazłeś sposobu na stworzenie własnego poziomego menu rozwijanego w css, zadaj pytanie w komentarzach lub skorzystaj z wyszukiwania na stronie.

Radzę również odwiedzić stronę nadrzędną https://website/vypadayushhee-menu/ , tam zebrane są wszystkie przykłady i odmiany rozwijanych menu.

Menu poziome to lista sekcji witryny, dlatego bardziej logiczne jest zaznaczenie 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 w menu
Pozycja w menu
Pozycja w menu

Menu poziome wewnątrz znacznika można opcjonalnie umieścić wewnątrz elementu ... i/lub .... Ten znacznik HTML nadaje znaczenie semantyczne, a także dodatkową możliwość formatowania bloku 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 1em*/ padding-left: 0; /*usuń lewe dopełnienie 40px*/ ) a (dekoracja tekstu: brak; /*usuń podkreślenie tekstu linku*/)

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.

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.

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.

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.

Rozciągnij menu Bootstrap 4 do pełnej szerokości. Poziome menu rozwijane zrób to sam w css i html

Odzyskiwanie hasła