Witam. Przez długi czas nie pisałem postów na temat działania html/css. Ostatnio dopiero zacząłem wymyślać nowy layout i przy okazji natrafiłem na ciekawy trik, który pozwala zrobić gumkę menu (można do niego dodawać nowe elementy i rozmiar nie wzrośnie, ale zawsze będzie 100 % bloku nadrzędnego). Tak 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:
Menu płynów 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ą listy punktowanej (znacznik ul)
- cóż, elementy menu 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 zabiera się do pracy.
Krok 2 — Style podstawowe
Następnie dodam style do bloku opakowującego. Mianowicie ustawię maksymalną szerokość na 600 pikseli (aby było wygodnie zrobić zrzut ekranu tak, aby menu się zmieściło), a także wycentruję blok.
zawinąć(
tło: #fff;
maksymalna szerokość: 600px
margines: 0 auto;
}
Krok 3 - zaimplementuj gumowatość
Teraz zajmiemy się samym menu. Usunę z niego znaczniki (ze znacznika ul), zrobię liniowy gradient tła, a co najważniejsze przy 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%);
display: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 Ultimate CSS Gradient generator. Napiszę o tym kiedyś.
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 zawinął się w dwie linie, a zobaczysz problem z wyświetlaniem. Zwróć nieruchomość i wszystko będzie dobrze.
- display: table-cell - ponieważ ustawiamy samo menu wyświetlania na 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 wyrównania tekstu w środku
- 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 to w porządku, 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 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 możliwa pozycja menu. Linki nie będą miały szerokości 1000px, ponieważ szerokość będzie ograniczona przez pozycję menu li, która ma szerokość ustawioną na auto, ale sprawi to, że bez względu na liczbę pozycji w menu zawsze będzie to 100 procent szerokości.
- vertical-align: middle i display: table-cell - pierwsza wyrówna tekst w pionie do środka, a druga wyświetli również 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 elementu menu po najechaniu myszą. Jest to zaimplementowane 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. Pozostałe przedmioty po prostu się trochę kurczą, 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 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 ustawisz blok owijarki nie na stałą, ale na maksymalną szerokość, nie trzeba go nawet dostosowywać. W moim przypadku mam właściwość max-width: 600px, a gdy szerokość spadnie poniżej 600px, blok po prostu zmniejszy się po ekranie, bez tworzenia poziomego przewijania.
Cóż, jeśli chcesz jakoś zmienić lub naprawić menu na urządzeniach mobilnych lub szerokich ekranach, to media kwerendy Ci pomogą! Powodzenia w budowaniu stron internetowych!
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. Dziś pokażemy, jak to się robi.
Oferujemy przykład implementacji gumowego 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 opakowana w normalną listę. 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 wyświetlania z wartością stół lub komórka tabeli- Spieszę się zdenerwować. Ta metoda nie zapewnia wystarczającej zgodności z różnymi przeglądarkami.
Nasze rozwiązanie
Nasza propozycja zostanie zbudowana na solidnych podstawach wiedzy o HTML5 i CSS3.
Istota 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 do pełnej szerokości kontenera.
Korzystając z naszego rozwiązania, należy przestrzegać dwóch obowiązkowych zasad. Po pierwsze, szerokość kontenera elementu 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 akapitu, czy nie.
Poniżej znajduje się kod, który służy jako przykład tworzenia „gumowego” menu:
HTML
< ul> < li>< a href= "#" >Dom < li>< a href= "#" >Blog < li>< a href= "#" >Aktualności < li>< a href= "#" >Popularny < li>< a href= "#" >Nowy
ul (text-align: justify; overflow: hidden; /* usuń efekt uboczny metody */ wysokość: 20px; /* eliminuje również niepotrzebne */ kursor: domyślnie ; /* ustawia początkowy kształt kursora */ margines: 50px 100px 0 100px; tło: #eee; wypełnienie: 5px ) li ( wyświetlacz: wbudowany; /* tworzenie tekstu pozycji menu */) li a (wyświetlacz: inline-block; /* usuwa podziały wyrazów w menu */ kolor: #444; ) a: hover ( kolor: #ff0000; ) ul: po ( /* tworzenie drugiej linii do opracowania metody */ zawartość: "1" ; margines lewy: 100%; wysokość: 1px; przelew: ukryty; wyświetlacz: inline-block; )
Aby pracować w starym, dobrym Internet Explorerze, musisz dodatkowo dodać następujący kod do CSS
ul ( z-index: expression(runtimeStyle. zIndex = 1 , insertAdjacentHTML("beforeEnd&apos, "< li class = "last" > ")); ) ul .last ( margin-left: 100%; ) * html ul ( /* wystarczy ie6 */ height: 30px; )
Po zarejestrowaniu niezbędnych wartości właściwości i kodu otrzymujemy następujące gumowe menu:
Wady metody
- Kod głośności
- Niemożność określenia aktywnego stanu elementu za pomocą selektora klasy. Wynika to z podziału słów w akapitach (jeśli istnieje). Rozwiązaniem tego problemu jest dodanie kolejnego kontenera wewnątrz elementów listy.
- W przypadku menu rozwijanego musisz dostosować kod ze względu na negatywny wpływ przepełnienia .
Na jakich przeglądarkach to działa?
| 6.0+ | 6.0+ | 10.5+ | 5.0+ | 3.6+ | - | - |
Kontynuujemy serię lekcją dotyczącą rozwijanych menu. Następne w kolejce jest poziome menu „zrób to sam” w CSS.
Jeśli trafiłeś tu przypadkiem lub szukałeś innej realizacji z 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:
tworzyć poziome menu rozwijane css (na listach ul li) bez użycia jQuery i Javascript, a także bez używania tabel
W kodzie.
html poziome menu rozwijane
Przede wszystkim zanim zaczniemy pisać kod, 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 WordPressa. 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 menu bez stylizacji CSS:
Powiedzmy, że wygląda brzydko, jak zwykła lista. Następnie musimy udekorować to menu stylami CSS.
Poziome menu CSS
Style CSS dla menu rozwijanych i nie tylko są niezbędne. W końcu zakładka rozwijana jest tworzona na podstawie pseudoklasy:hover.
Do poziomego menu rozwijanego potrzebujemy następujących stylów:
#menu1( pozycja:względna; display:block; width:100%; height:auto; z-index:10; ) #menu1 ul( pozycja:względna; display:block; margin:0px; padding:0px; width:100 %; height:auto; list-style:none; background:#F3A601; ) #menu1 > ul::after( display:block; width:100%; height:0px; clear:both; content:" "; ) # menu1 ul li( position:relative; display:block; float:le; width:auto; height:auto; ) #menu1 ul li a( display:block; padding:9px 25px 0px 25px; font-size:14px; font- family: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:najechanie, #menu1 ul li:najechanie > a(tło:#EBBD5B; kolor:#2B45E0;)
To jeszcze nie koniec, tylko część CSS dla głównego menu poziomego. Następnie napiszemy style dla menu rozwijanego:
#menu1 ul li ul( pozycja:bezwzględna; góra:36px; lewa:0px;wyświetlacz:brak;szerokość:200px;tło:#EBBD5B; ) #menu1 ul li:hover ul(wyświetlacz:blok;)/*ta linia implementuje mechanizm dropout*/ #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 menu rozwijane)
Poniżej znajduje się demonstracja działania menu rozwijanego, a także link do pobrania kodu źródłowego. (Demo otworzy się na liście rozwijanej na tej stronie, nie trzeba klikać Otwórz w nowym oknie 🙂 ani używać 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 po części macie rację, chociaż spotkałem się ze świeżymi layoutami 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 działa w trybie demonstracyjnym.
#conteiner( width:1000px; height:auto; margin:0px auto; padding-top:10px; ) #menu1( position:relative; 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; font-size:1px; line-height:1px; ) #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; rozmiar czcionki :14px; font-family: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:hover, #menu1 ul li:hover > a( background:#EBBD5B; color:#2B45E0; ) #menu1 ul li ul( position:absolute; top:36px; left :0px; Nie wyświetla się; szerokość:auto; tło:#EBBD5B; odstęp:nowrap; ) #menu1 ul li:last-child ul(/*ostatnia pozycja zostanie zakotwiczona po prawej*/ left:auto; right:0px; ) #menu1 ul li:hover ul(display:block;)/*ta linia implementuje mechanizm przerywania*/ #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ż wyjdą 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 dodawać do html ręcznie, ale jeśli masz CMS, taki jak WordPress, ręczne dodawanie go nie jest zbyt wygodne.
Poziome menu rozwijane z separatorami
Istnieją dziesiątki opcji, jak dodać pasek (separator) między pozycjami menu za pomocą czystego CSS. Opcje używające::before lub::after lub znacznie prostsze border-left, border-right, nie będę duplikować.
Zdarzają się sytuacje, kiedy layout jest tak cudownie zbudowany, że jquery jest nieodzowne.
Nasz kod HTML pozostaje bez zmian, 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:
$(document).ready(function()( $("#menu1 > ul > li:not(:last-child)").after(" "); ));
Style CSS dla takiego menu należy pozostawić bez zmian, + wrzucić ten kawałek na koniec:
#menu1 ul li.razd(wysokość:28px;szerokość:1px;tło:#ffffff;margines-góra:4px;)
Takie poziome rozwijane menu z separatorami w jQuery będzie wyglądać tak:
Poniżej możesz obejrzeć demo 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 warstw
Ponieważ mówimy o wielopoziomowych rozwijanych menu po najechaniu myszą, prawdopodobnie warto podzielić je na podgrupy:
- z vipadashką wskazując na bok
- z wyskokiem trzeciego poziomu
W moich przykładach pokażę wielopoziomowe menu CSS dla 3 poziomów, wtedy myślę, że nie będzie trudno odgadnąć, co należy zrobić.
Wielopoziomowe menu rozwijane z vipadem z boku po najechaniu kursorem
Na początek musimy nieco poprawić nasz html. Zostanie tam dodanych kilka linijek dla poziomu 3:
#conteiner( width:1000px; height:auto; margin:0px auto; padding-top:10px; ) #menu1( position:relative; 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; font-size:1px; line-height:1px; ) #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.razd( height:28px; width:1px; background:#ffffff; margin-top:4px; ) #menu1 ul li a( display:block; padding:9px 45px 0px 45px; font-size:14px; font-family:Arial, sans-serif; color:#ffffef; line-height: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( position:absolute; top:36px; left:0px; display:none; width:auto; background:#EBBD5B; white-space:nowrap; ) #menu1 > ul > li:last-child > ul(/*ostatnia pozycja zostanie zakotwiczona po prawej*/ 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-sizing:border -box ; border-top:1px solid #ffffff; ) #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( background:#FDDC96; color:#6572BC; ) #menu1 ul li ul li ul( góra:0px; lewa:100%; display:brak; background:#fddc96; ) #menu1 > ul > li:last -child > ul ul(lewo:auto; prawo:100%;) #menu1 ul li ul li ul a(kolor:#F38A01;)
Pliki dla jQuery są kopiowane tak jak z poprzedniego przykładu. Postanowiłem zostawić separatory, żeby menu wyglądało choć trochę lepiej. Oczywiście bez nich jest to możliwe.
Tak to się stało:
Zrobiłem 2 skórki w jednym, aby pokazać jak wygląda lonża po prawej i pośrodku.
Poniżej możesz zobaczyć demo i pobrać przykład:
Warstwowe menu rozwijane z rozwijanym menu po najechaniu myszą
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 + wielopoziomowym.
Nie będę zmieniał kodu HTML, można go zaczerpnąć z poprzedniego przykładu. Pozostawiono również separatory w jQuery.
Tylko CSS zmieni się całkowicie:
#conteiner( width:1000px; height:auto; margin:0px auto; padding-top:10px; ) #menu1( position:relative; 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; font-size:1px; line-height:1px; ) #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(position:static;) #menu1 ul li.razd( height :28px; width:1px; background:#ffffff;margin-top:4px;) #menu1 ul li a( display:block; padding:9px 45px 0px 45px; font-size:14px; font-family: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: unosić się, #menu1 ul li:najedź > a(tło:#EBBD5B; kolor:#2B45E0; ) #menu1 ul li ul( pozycja:bezwzględna; góra:36px; lewa: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 pomijania*/ #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(obramowanie-góra: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; lewo:100%;wyświetl:brak;tło:#fddc96;z-index:15;) #menu1 ul li ul li ul li(wyświetl : block; float:none; width:100%;) #menu1 ul li ul li ul a( color:#F38A01; border-top:1px solid #ffffff; )
Oto jak będzie wyglądało menu: Jedynym punktem jest to, że strona powinna mieć wystarczająco dużo miejsca, ponieważ ostatnia pozycja po prawej stronie nie ma miejsca na odrzucenie. Ten problem można rozwiązać przez: n-dziecko ale nie zawracałam sobie głowy ogrodzeniem ogrodu.
Zobacz demo poziomego wielopoziomowego menu rozwijanego:
Jak mogłeś zauważyć: dolna płyta również ma pełną szerokość. 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 to korzyści zarówno im, jak i mnie 🙂 .Jeśli przeczytałeś post w całości, ale nie znalazłeś, jak zrobić własne poziome rozwijane menu w css, zadaj pytanie w komentarzach lub skorzystaj z wyszukiwarki na stronie.
Również radzę odwiedzić stronę nadrzędną https://strona internetowa/vypadayushhee-menu/, zebrane są wszystkie przykłady i odmiany menu rozwijanych.
Menu poziome to lista sekcji witryny, więc bardziej logiczne jest zaznaczenie wewnątrz elementu
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 zlokalizowane są wszystkie elementy listy pionowo, obejmujący całą szerokość elementu kontenera, który z kolei obejmuje 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
... . Ten znacznik HTML nadaje znaczenie semantyczne, a także dodatkową 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órne i dolne marginesy z 1em*/ padding-left: 0; /*usuń lewe dopełnienie 40px*/ ) a ( text-decoration: none; /*usuń podkreślenie tekstu linku*/)
Metoda 1. li (wyświetlacz: inline;)
Ustaw pozycje listy w linii. W efekcie są one ułożone poziomo, po prawej stronie dodawana jest między nimi przerwa równa 0,4em (obliczona względem rozmiaru czcionki). Aby go usunąć, dodaj ujemny prawy margines do li li (margin-right: -4px;) . Następnie dostosuj linki do własnych upodobań.
Metoda 2. li (float: lewy;)
Sprawiamy, że elementy listy są pływające. Dzięki temu są ułożone 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 na zawieranie elementów pływających. W przypadku linków dodaj a (display: block;) i stylizuj je tak, jak chcesz.
Metoda 3. li (wyświetlacz: inline-block;)
Tworzenie elementów listy w trybie inline-block. Są ułożone poziomo, po prawej stronie powstaje szczelina, tak jak w pierwszym przypadku. W przypadku linków dodaj a (display: block;) i stylizuj je tak, jak chcesz.
Metoda 4. ul (wyświetlacz: flex;)
Tworzenie z listy ul elastycznego kontenera za pomocą . W rezultacie elementy listy są ułożone poziomo. Dodaj (wyświetl: blok;) dla linków i stylizuj je tak, jak chcesz.
1. Responsywne menu z efektem podkreślenia po najechaniu na link
@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 ( content: "|"; color: #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; dopełnienie-dół: 20px; margines: 0 34px 0 30px; rozmiar czcionki: 17px; transformacja tekstu: wielkie litery; wyświetlanie: blok liniowy; przejście: kolor .2s; ) .menu-main a, .menu-main a:visited (kolor: #9d999d;) .menu-main a.current, .menu- main a:hover(kolor: #feb386;) .menu-main a:before, .menu-main a:after (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:before, .menu-main .current:before (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: 030px; ) )2. Responsywne menu dla strony ślubnej
@import url("https://fonts.googleapis.com/css?family=PT+Sans"); .top-menu ( pozycja: względne; tło: #fff; box-shadow: wstawka 0 0 10px #ccc; ) .top-menu:before, .top-menu:after ( content: ""; display: block; height : 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; pozycja: względna; ) .menu-main:before, .menu-main:after ( content: "\25C8"; line-height: 1; pozycja: bezwzględna; top: 50%; transform: translateY(-50% ); ) .menu-main:before (po lewej: 15px;) .menu-main:after (po prawej: 15px;) .menu-main li (wyświetlacz: inline-block; padding: 5px 0; ) .menu-main a ( text-decoration: brak; display: inline-block; margines: 2px 5px; padding: 6px 15px; font-family: "PT Sans", sans-serif; font-size: 16px; color: #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. Responsywne menu z przegrzebkami
@import url("https://fonts.googleapis.com/css?family=PT+Sans+Caption"); .menu-main ( styl listy: brak; dopełnienie: 0 30px; margines: 0; rozmiar czcionki: 18px; text-align: center; position: relatywne; background: white; ) .menu-main:after ( content: ""; pozycja: bezwzględna; szerokość: 100%; wysokość: 20px; lewy: 0; dół: -20px; tło: radial-gradient(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 (wyświetlacz: inline-block;) .menu-main a ( dekoracja tekstowa: brak; 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:before, .menu-main a:after ( content: ""; pozycja: bezwzględna; góra: calc(50% - 3px); szerokość: 6px; wysokość: 6px; obramowanie-promień: 50%; tło: ). current:before, .menu-main a.cur rent:after, .menu-main a:hover:before, .menu-main a:hover:after (przezroczystość: 1;) .menu-main a.current, .menu-main a:hover (kolor: #F58262; ) @media(max-width:680px) ( .menu-main li (wyświetlanie: blok;) )4. Responsywne menu wstążki
@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); ) ; z-index: 2; lewy: 0; szerokość: 100%; wysokość: 3px; ) . top-menu:before ( top: 0; border-bottom: 1px kreskowana rgba(255,255,255,.2); ) .top- menu:after ( bottom: 0; border-top: 1px kreskowana rgba(255,255,255,.2); ) .menu-main ( styl listy: brak; dopełnienie: 0; margines: 0; wyrównanie tekstu: środek; ). width: 50px; height: 0; top: 8px; border-top: 18px solid #5A394E; border-bottom: 18px solid # 5A394E; transform: rotate(360deg); z-index: -1; .menu-main: przed ( left: -30px; border-left: 12px solid rgba(255, 255, 255, 0); ) .menu- main:after ( right: -30px; border-right: 12px solid 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 ( display: block; margin-right: 0; ) .menu-main:before, .menu-main:after (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:after ( content: ""; 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świetlanie: blok;) )6. Responsywne menu z logo po lewej stronie
@import url("https://fonts.googleapis.com/css?family=Arimo"); .top-menu ( background: rgba(255,255,255,.5); box-shadow: 3px 0 7px rgba(0,0,0,.3); padding: 20px; ) .top-menu:after ( content: "" ;wyświetlacz: tabela; wyczyść: oba; ) .navbar-logo (wyświetlacz: blok liniowy;) .menu-main ( styl listy: brak; margines: 0; dopełnienie: 0; pływak: prawo; ) .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; font-family: "Arimo", sans-serif; font-weight: bold; color: #F73E24; transition:.3s linear; ) .menu-main a:before ( content: ""; width: 9px; wysokość: 9px; tło: #F73E24; pozycja: bezwzględna; lewy: 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;) )Dzień dobry!
Często zdarza się, że trzeba zrobić poziome menu, które rozciągnie się na całą szerokość bloku nadrzędnego, niezależnie od tego, ile elementów zawiera.
Dziś chciałbym Wam pokazać jak stworzyć takie właśnie menu.
Nasze menu będzie więc wyglądało następująco:
Jest rozciągnięty do pełnej szerokości, gdy najedziesz na niego, zostanie podświetlony. Menu jest zaokrąglone po bokach.
Znacznik HTML
Dom ...
Ciekawe wieści
Kolejna pozycja w menu! Aby menu miało pełną szerokość, użyłem tabel o szerokości 100%. Każdy stół ma div kontener pozycji menu. W zależności od tego, czy pierwsza, ostatnia czy pośrednia pozycja menu - div-y ma przypisaną odpowiednią klasę.
W każdym div Kontener ma 2 absolutnie ustawione krawędzie boczne, które są potrzebne do prawidłowego wyświetlania. Jeśli używasz standardowych ramek, to po przełączeniu elementów menu tekst przeskoczy o 1-2 piksele, co jest dobre.
Klasa aktywny odpowiada za wybraną pozycję menu i podświetla ją.
Każdy element ma obraz i tekst. Aby wszystko to było wyrównane ściśle pośrodku w pionie, używamy stołu. 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ę oddalać.
ZASADY CSS
Najpierw ustawimy style ogólnego wyświetlania menu:
Menu_container ( padding-top: 40px; szerokość: 100%; wysokość: 47px; odstępy obramowania: 0px; ) .menu_container td ( vertical-align: middle; /* 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; border-left: brak; ) .inner_table (szerokość: 100%; wysokość: 100%; ) .inner_table td ( padding: 0px; vertical-align: środek; border: none; text-align: left; width: 150px; padding-left: 4px; ) .td.inner_table_title ( padding-top: 4px; font-weight: bold; ) .td.inner_table_img ( szerokość: 40px!important; ) .inner_table_menu ( wysokość: 100%; padding: 0px; vertical-align: środek; border: none; text-align: left; ) .inner_table_title ( padding-left: 10px; padding-right: 10px; text-transform: wielkie litery; line-height: 13px; .inner_table_menu td.inner_table_img ( szerokość: 30px!important; wysokość: 30px!important; padding-left: 15px; )
Dla urody zaokrąglij rogi po bokach menu:
First_point_menu ( -webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 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 -bottom-right-radius: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px ; )
Teraz nasze menu nabrało piękniejszego wyglądu:
Jak dotąd pierwszy akapit nie ma lewego obramowania. Naprawimy to później.
Dodajmy teraz do menu efekty najechania kursorem.
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(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 w tle: -o-linear-gradient(góra, #CAE285, #9FCB56); obraz w tle: linear-gradient(do dołu, #CAE285, #9FCB56); border: 1px solid #9FCB56; border-color: #aec671 #9fbb62 #87ac4a; border-left: none; z-index: 5000; ) /* pracuj na granicy po najechaniu*/ .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-l eft:brak; kolor obramowania: #aec671 #9fbb62 #87ac4a; ) .last_point_menu.active ( obramowanie po lewej: 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: brak; pozycja: bezwzględna; szerokość: 1px; wysokość: 47px; background-color: #9fbb62; top: 0px; z-index: 1000; ) /* bezwzględne przesunięcia dla obramowań */ .borderLeftSecond ( lewy: 0px; ) .borderRightSecond ( prawy: -1px; ) /* pokaż obramowania dla 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ługuje przypadki pierwszego i ostatniego elementu */ .first_point_display:ft_menu. none;) .last_point_menu.active .borderRightSecond (wyświetlanie: brak; ) .last_point_menu:hover .borderLeftSecond (wyświetlanie: blok; )
To wszystko!
Dostaliśmy świetne menu rozciągnięte na całą szerokość bloku nadrzędnego! Punkty na sobie po najechaniu myszą nie biegną, a układ nie przeskakuje.
