Jak rozciągnąć poziome menu, aby dopasować je do szerokości nagłówka. Poziome menu rozwijane „zrób to sam” przy użyciu CSS i HTML. Poziome menu rozwijane o pełnej szerokości

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.

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; /* 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:

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

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ń-obramowania-dolnego-lewego: 5px; obramowanie-prawe: 1px solid #dadbda; .last_point_menu ( -webkit-border-prawy-górny-promień: 5px; -webkit-border - promień-prawy dolny: 5px; -moz-promień-obramowania-górny: 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); -gradient-webkit (liniowy, 0 0, 0 100%, od (#CAE285), do (#9FCB56)); -gradient (góra, #CAE285, #9FCB56); obraz tła: -o-gradient liniowy (na górze, #CAE285, #9FCB56); obraz tła: gradient liniowy (na dole, #CAE285, #9FCB56); -color: #aec671 #9fbb62 #87ac4a; obramowanie po lewej stronie: brak; indeks z: 5000; .first_point_menu:hover, .first_point_menu.active ( obramowanie: 1px solid #9FCB56; kolor obramowania: #aec671 #9fbb62 #87ac4a; ) .last_point_menu ( obramowanie: 1px pełne #dadbda; obramowanie po lewej stronie: brak; ) .last_point_menu:hover ( obramowanie: 1px pełne #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 ( lewy: 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.

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:

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

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

• Ustęp 1


• Punkt 2


• Punkt 3


• Punkt 4


• Punkt 5

Wszystko wygląda standardowo, tak:

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

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;
}

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. Czytać o właściwości CSS dla czcionek w tym artykule.

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;
}

Ś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!

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 urządzenia mobilne lub szerokie ekrany, wtedy zapytania o media Ci pomogą! Powodzenia w tworzeniu strony internetowej!

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 za pomocą jQuery i JavaScript, a także bez użycia tabel

Przede wszystkim zanim zaczniemy pisać kod, musimy to zrobić 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.

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)

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 :relative; display:inline-block; szerokość:auto; wyrównanie do pionu:do lewej;:14px;rodzina czcionek:bezszeryf;wysokość linii:1.3em; 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: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)

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:

Poziome menu rozwijane z przekładkami Opcji jest kilkadziesiąt, jak np dodaj pasek (separator) pomiędzy pozycjami menu. 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.

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

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

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: 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: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:

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: 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; wysokość linii: 1,3 em; waga czcionki: pogrubiona; wysokość: 36 pikseli; 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; treść:" " ) #menu1 ul li:hover > ul(display:block;)/*ta linia implementuje mechanizm odrzucania*/ #menu1 ul li li(display: blok; szerokość: 30%; float: lewy; ) #menu1 ul li ul li a (wyświetlanie: blok; transformacja tekstu: brak; wysokość: auto; dopełnienie: 7 pikseli 45 pikseli; szerokość: 100%; rozmiar pudełka: obramowanie - box; ) #menu1 ul li ul li:pierwsze-dziecko > a(border-top:0px;) #menu1 ul li ul li a:hover, #menu1 ul li ul li:hover > a(tło:#FDDC96; kolor :#6572BC; ) #menu1 ul li ul li ul( góra:0px; lewa:100%; wyświetlacz:brak; tło:#fddc96; z-index:15; ) #menu1 ul li ul li ul li(wyświetlacz: 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: Jedyną kwestią 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ę.

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.