Jak rozciągnąć menu do pełnej szerokości css. Piękne poziome menu o pełnej szerokości. Menu adaptacyjne z przegrzebkami

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 w formie listy punktowanej (tag 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 umieścimy wszystko w pożądanej formie, CSS zacznie 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 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 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ściach CSS 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 pozostaje szerokie na 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 ustawisz blok owijający na 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 na urządzeniach mobilnych lub szerokich ekranach, zapytania o media Ci pomogą! Powodzenia w tworzeniu strony internetowej!

Dzień dobry

Często konieczne jest utworzenie poziomego menu, które będzie rozciągać się na całą szerokość bloku nadrzędnego, niezależnie od tego, ile zawiera elementów.

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ść: 47px; obramowanie: 1px solid #dadbda; z-index: 1000; pozycja: względna; obramowanie po lewej stronie: brak; ) .inner_table ( szerokość: 100%; wysokość: 100%; ) .inner_table td ( dopełnienie: 0px; wyrównanie do pionu: środek; obramowanie: brak; wyrównanie tekstu: do lewej; szerokość: 150px; dopełnienie do lewej: 4px; ) .td.inner_table_title ( góra dopełnienia: 4px; waga czcionki: pogrubienie; ) .td.inner_table_img ( szerokość: 40px!ważne; ) .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: 10px; transformacja tekstu: wielkie litery; wysokość linii: 13px; ) .inner_table_menu td.inner_table_img ( szerokość: 30px!ważne; wysokość: 30px!ważne; dopełnienie-lewe: 15px; )

Dla urody zaokrąglijmy rogi po bokach menu:

First_point_menu ( -webkit-border-promień-lewego-górnego-górnego: 5px; -webkit-border-promień-dolnego-lewego-promień: 5px; -moz-border-promień-topleft: 5px; -moz-promień-border-dolny-lewy-dolny: 5px; promień-obramowania-lewego-górnego: 5px; promień-dolnego-lewego-dolnego: 5px; obramowanie-prawe: 1px solid #dadbda; ) .last_point_menu ( -webkit-border-promień-górnego-prawego-górnego: 5px; -webkit-border -promień-prawy-dolny: 5px; -moz-border-promień-górny: 5px; -moz-border-promień-dolny: 5px; promień-obramowania-prawy-górny: 5px; promień-obramowania-dolnego-prawego: 5px ;)

Teraz nasze menu ma piękniejszy wygląd:

Jak dotąd pierwszy punkt nie ma lewej krawędzi. Naprawimy to trochę później.

Dodajmy teraz efekty najechania 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-linear- gradient (góra, #CAE285, #9FCB56); obraz tła: -webkit-gradient (liniowy, 0 0, 0 100%, od (#CAE285), do (#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); obramowanie: 1px solid #9FCB56; kolor obramowania: #aec671 #9fbb62 #87ac4a; obramowanie po lewej stronie: brak; z-index: 5000; ) /* obliczy obramowanie po najechaniu myszką */ .first_point_menu ( obramowanie: 1px solid #dadbda ; ) .first_point_menu:hover, .first_point_menu.active ( obramowanie: 1px pełne #9FCB56; kolor obramowania: #aec671 #9fbb62 #87ac4a; ) .last_point_menu ( obramowanie: 1px stałe #dadbda; obramowanie po lewej stronie: brak; ) .last_point_menu :hover ( obramowanie: 1px solid #9FCB56; obramowanie po lewej stronie: brak; kolor obramowania: #aec671 #9fbb62 #87ac4a; ) .last_point_menu.active ( obramowanie po lewej stronie: brak; )

Teraz nasze menu wygląda znacznie ładniej, ale na razie nie mamy obramowań dla wyróżnionych pozycji menu. Naprawmy to!

/* style obramowań bocznych */ .borderLeftSecond, .borderRightSecond ( display: none; pozycja: bezwzględna; szerokość: 1px; wysokość: 47px; kolor tła: #9fbb62; góra: 0px; z-index: 1000; ) /* bezwzględne przesunięcia granic */ .borderLeftSecond ( po lewej: 0px; ). , .middle_point_menu:hover > .borderRightSecond, .last_point_menu:hover > .borderLeftSecond .first_point_menu:hover > .borderRightSecond ( display: block; ) /* obsługuje przypadki pierwszy i ostatni element */ .first_point_menu.active .borderLeftSecond ( display: none; ) .last_point_menu.active .borderRightSecond ( display: none; ) .last_point_menu:hover .borderLeftSecond ( display: block; )

To wszystko!

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.

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ą 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 tworzymy menu uniwersalne, chcę je maksymalnie upodobnić do wyjścia menu WordPress. Moim zdaniem jest to jeden z najprostszych i najbardziej uniwersalnych 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
- 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 stylizacji 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:: after( display:block; szerokość: 100%; wysokość: 0px; clear: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; kolor: #ffffef; wysokość linii: 1,3 em; dekoracja tekstu: brak; waga czcionki: pogrubiona; transformacja tekstu: wielkie litery; wysokość: 36 pikseli; rozmiar pudełka: obramowanie; ) #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:border-box; border-top:1px solid #ffffff; ) #menu1 ul li ul li:pierwsze-dziecko a(border-top:0px;) #menu1 ul li ul li a: najedź(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: justify; rozmiar czcionki:1px; wysokość linii:1px; ) #menu1 > ul::after( display:inline-block; szerokość:100%; wysokość:0px; treść:" "; ) #menu1 ul li(pozycja :relative; display:inline-block; szerokość:auto; wysokość: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; waga 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:absolutna; góra:36px; lewa :0px; Nie wyświetla się; 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:border-box; border-top:1px solid #ffffff; ) #menu1 ul li ul li:pierwsze-dziecko a(border-top:0px;) #menu1 ul li ul li a: najedź(tło: #FDDC96; kolor:#6572BC; )

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

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 taki sam, dodajemy jedynie bibliotekę jQuery i plik, który z niej korzysta:

Zaraz po .

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

W moich przykładach pokażę wielopoziomowe menu CSS z 3 poziomami, wtedy 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 drogowa
  - Dodatek do mapy
  - Dodatek do mapy 2
- Formularz zwrotny

#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: justify; rozmiar czcionki:1px; wysokość linii:1px; ) #menu1 > ul::after( display:inline-block; szerokość:100%; wysokość:0px; treść:" "; ) #menu1 ul li(pozycja :relative; display:inline-block; szerokość:auto; wysokość:auto; wyrównanie do pionu:góra; wyrównanie tekstu:do lewej; ) #menu1 ul li.razd( wysokość:28px; szerokość:1px; tło:#ffffff; margines-top:4px; ) #menu1 ul li a(display:block; padding:9px 45px 0px 45px; rozmiar czcionki:14px; rodzina czcionek:Arial, bezszeryfowa; kolor:#ffffef; wysokość linii:1,3 em; dekoracja tekstu: brak; waga czcionki: pogrubiona; transformacja tekstu: wielkie litery; wysokość: 36 pikseli; box-sizing: 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ść: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ą

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

Istotą tego przykładu jest utworzenie poziomego menu rozwijanego o pełnej szerokości z menu rozwijanego o pełnej szerokości i wielu poziomów.

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: justify; rozmiar czcionki:1px; wysokość linii:1px; ) #menu1 > ul::after( display:inline-block; szerokość:100%; wysokość:0px; treść:" "; ) #menu1 ul li(pozycja :relative; display:inline-block; szerokość:auto; wysokość:auto; wyrównanie do pionu: góra; wyrównanie tekstu: do lewej; ) #menu1 > ul > li(pozycja:statyczny;) #menu1 ul li.razd(wysokość :28px; szerokość:1px; tło:#ffffff; margines-top:4px; ) #menu1 ul li a(display:block; padding:9px 45px 0px 45px; rozmiar czcionki:14px; rodzina czcionek:Arial, sans- serif; kolor: #ffffef; wysokość linii: 1,3 em; dekoracja tekstu: brak; waga czcionki: pogrubiona; transformacja tekstu: wielkie litery; wysokość: 36 pikseli; rozmiar pudełka: obramowanie; ) #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ść:100%; tło:#EBBD5B; ) #menu1 > ul > li > ul::po( clear:both; float:none; szerokość:100%; wysokość:0px; treść:" "; ) #menu1 ul li:hover > ul(display:block;)/*ta linia implementuje mechanizm drop-out*/ #menu1 ul li ul li(wyświetlanie:blok; szerokość:30%; pływak:lewy; ) #menu1 ul li ul li a(wyświetlanie:blok; transformacja tekstu:brak; wysokość:automatyczna; dopełnienie:7px 45px; szerokość:100%; pudełko- sizing: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; lewa: 100%; wyświetlacz: brak; tło: #fddc96; z-index:15; ) #menu1 ul li ul li ul li (wyświetlanie: blok; pływak: 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.

Zobacz demonstrację poziomego, wielopoziomowego menu rozwijanego:

Jak zapewne zauważyłeś: dolna matryca ma również pełną szerokość. W ten sposób powstają krople w kilku blokach.

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

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

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 znaczenie semantyczne, a także zapewnia 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 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 ułożone poziomo, z dodanym po prawej stronie odstępem wynoszącym 0,4 em (liczonym 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 elementów listy pływających. 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.

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 przy użyciu 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.

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.

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; /* sprawia, że pozycje menu stają się tekstowe */ ) 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-lewy: 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:

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.


6.0+	6.0+	10.5+	5.0+	3.6+	-	-

Foka

Również interesujące:

Lwowski Uniwersytet Narodowy im. Iwana Franki (LNU): wstęp, wydziały i recenzje

Przedmiot do wyboru „Olimpiada Informatyczna

Pobierz Battleship na Androida v

Zalecamy przeczytanie:

2023-11-29 00:09:13

C pobiera główne argumenty z funkcji

2023-11-29 00:09:13

Wyprowadzenie wyrażenia na okres orbitalny satelity planetarnego

2023-11-29 00:09:13

Bezpieczeństwo informacji systemów zautomatyzowanych Kim jest specjalista ds. bezpieczeństwa informacji

Kontynuując temat:

Internet

Prezentacja metody geoinformacyjnej

Konovalova N.V., Kapralov E.G. Wprowadzenie do GIS-u. –M.: Sp. z oo „Biblion”, s. 10-10 De Mers M., Systemy informacji geograficznej. M.: „Dane+”, Korolew Yu.K. Geoinformatyka ogólna. -M.:...