Od dawna chciałem napisać artykuł o tym, jak to zrobić podmenu w CSS. Wiele osób to robi JQuery i całkiem nieźle wychodzi jednak cała podstawowa zasada stworzenia podmenu w CSS Podam to tutaj. A następnie, zaczynając od tej bazy, możesz dalej ulepszać podmenu.
Zaraz to przyniosę Kod CSS:
* html ulli (
pływak: w lewo;
}
* html ulli a (
wysokość: 1%;
}
ul (
obramowanie na dole: 1px bryła #000;
styl listy: brak;
margines: 0;
dopełnienie: 0;
szerokość: 100px;
}
ulli (
pozycja: względna;
}
ulli a (
wyświetlacz: blok;
obramowanie: 1px stała #000;
obramowanie na dole: 1px;
dopełnienie: 5px;
dekoracja tekstu: brak;
}
Li ul (
wyświetlacz: brak;
po lewej: 99px;
pozycja: absolutna;
góra: 0;
}
li:najedź ul (
wyświetlacz: blok;
}
Najważniejszą rzeczą jest tutaj selektor” li:hover ul". W rzeczywistości pokazuje zawartość menu. Domyślnie " wyświetlacz: brak", a kiedy najedziesz kursorem na element menu, podmenu stanie się: " wyświetlacz: blok", czyli widoczne. To jest najważniejsze. Również w dwóch pierwszych selektorach (które z * ) nadchodzi Włamanie do CSS Dla TJ., w przeciwnym razie bez niego nic nie będzie działać w tej przeglądarce. Cała reszta to wygląd, który oczywiście można zmienić.
Przynoszę i Kod HTML:
Jeśli dokładnie przemyślisz tę strukturę, wszystko stanie się bardzo jasne. Etykietka ul- tworzy menu. Jeśli ul jest w innym ul, to jest to już podmenu. Znacznik li odpowiada za konkretną pozycję menu.
Oczywiście menu jest najprostsze, zarówno pod względem logiki i struktury, jak i pod względem designu. Oczywiście, że możesz skorzystać JQuery wykonaj gładkie otwarcie. Możesz także zmienić projekt, ale cała zasada pozostanie taka sama jak w tym podmenu napisane w CSS i HTML.
Zrealizujmy nasz pomysł używając najzwyklejszego CSS. W następnym artykule, jeśli pamiętam, opiszę ten sam efekt za pomocą jQuery. Ale na razie zacznijmy analizować tę metodę. Ale najpierw sugeruję przyjrzenie się temu, co dzieje się na końcu:
Przede wszystkim napiszmy HTML nasz kod menu. Menu będzie proste. Na przykład będzie zawierał 2 elementy, z których każdy będzie miał listę rozwijaną z podelementami.
Myślę, że tutaj wszystko jest jasne, najprostsze 2-poziomowe menu. Jak powiedziałem, menu składa się z dwóch głównych pozycji, w razie potrzeby możesz dodać tyle, ile chcesz. Następnie wystarczy dodać style, które zrobią całą magię :)
#slow_nav > ul(szerokość: 500 pikseli; margines: 25 pikseli auto 0; ) #slow_nav > ul > li(styl listy: brak; wyświetlacz: blok inline; pozycja: względna; dopełnienie: 0; ) #slow_nav a(text- dekoracja: brak;) #slow_nav > ul > li > a(rozmiar czcionki: 18 pikseli; dopełnienie: 5 pikseli; kolor tła: #333; kolor: #fff; ) #slow_nav li ul( pozycja: bezwzględna; styl listy: brak; text-align: center: rozmiar czcionki: 15 pikseli; margines: 0; /* Te linie są potrzebne do poprawnego działania animacji */ max-height:Hidden; -webkit-transition:max-height 0,4s linear; ; -moz-przejście: maksymalna wysokość 0,4 s liniowa; /* koniec */ ) #slow_nav ul( maksymalna wysokość: 300px; ) #slow_nav li ul li( kolor tła: #333; brzeg-dół: bryła 1px # 888; ) #slow_nav li ul li:last-child( border-bottom:none; ) #slow_nav li ul li a ( padding:5px 12px; color:#fff; display:block; ) #slow_nav li ul li:hover( kolor tła:#444; ) #slow_nav li ul li:pierwsze-dziecko(górny margines:25px; pozycja: względna; ) #slow_nav li ul li:first-child:before(treść:""; pozycja:absolutna; szerokość:1px; wysokość:1px; border:5px solid transparent; border-bottom-color:#333; left:10px; top :-10px)
Kod CSS nie jest mały, ale nie jest z natury skomplikowany. Jeśli masz umiejętności układania układu, możesz łatwo dowiedzieć się, co i jak. Zwrócę tylko uwagę na kilka ważnych punktów.
Pierwszą rzeczą jest sama animacja. Wymagany kod jest podświetlony w komentarzach w kodzie - /* Te linie są potrzebne do poprawnego działania animacji */. Nie możesz usunąć z, w przeciwnym razie animacja przestanie działać. W tym fragmencie kodu początkowo ustawiamy wysokość na zero pikseli -
maksymalna wysokość: 0px; i ustaw właściwość przepełnienie:ukryte; aby ukryć nasze menu potomne, czyli menu rozwijane. Następnie konfigurujemy właściwość obejmującą różne przeglądarki przemiana, który wykona animację.
Przejście Webkit: maksymalna wysokość 0,4 s, liniowa; -moz-przejście: maksymalna wysokość 0,4 s liniowa; przejście: maksymalna wysokość 0,4 s liniowa;
Tutaj możesz zmienić jedynie czas animacji. Czas jest obecnie ustawiony na 0,4 sekundy. Zaraz po ustawieniu animacji dodana została właściwość umożliwiająca ustawienie nowej wysokości po najechaniu kursorem na pozycje menu głównego:
#slow_nav li:hover ul(maksymalna wysokość:300px;)
Oto zdjęcie. Wysokość jest ustawiona na stałe maksimum. Jeśli wysokość menu rozwijanego jest większa, zmień wartość na większą. W przeciwnym razie wysokość menu zostanie zmniejszona do 300 pikseli.
Metodę tę można zastosować nie tylko do samodzielnie napisanych menu, ale także do tych samych dynamicznych menu, które są tworzone na przykład przez systemy zarządzania treścią WordPressa. Aby to zrobić, musisz trochę zmodyfikować style i to wszystko. Oznacza to, że nie musisz używać pierwszego kodu HTML, a jedynie style. W stylach musisz zastąpić nazwę ID #slow_nav tym, co masz i być może poprawić inne drobne rzeczy. Nie będę wchodził w szczegóły. Każdy przypadek wymaga indywidualnego podejścia, więc przepraszam :) Podałem pomysł i metodę, a Ty decydujesz, czy ją zastosujesz, czy nie.
To wszystko, dziękuję za uwagę. 🙂
Poziome menu rozwijane służy do organizowania struktury nawigacji witryny. Optymalna liczba poziomów zagnieżdżenia to jeden lub dwa. Im mniej poziomów załączników, tym łatwiej odwiedzającemu witrynę znaleźć potrzebne informacje. Sposób tworzenia zwykłego poziomego menu opisano szczegółowo w.
Znacznik HTML poziomego menu rozwijanego różni się od zwykłego menu tym, że prowadzi do żądanego elementu listy
Aby ustawić podmenu względem menu głównego, deklarowane są następujące style:
— dla elementu listy, w którym zagnieżdżona jest lista rozwijana: li (pozycja: względna;) ;
— dla menu rozwijanego ul (pozycja: absolutna;) , a także wartości lewej i górnej.
Dla przejrzystości i łatwości formatowania dodajmy górne menu klasy do menu głównego i podmenu do menu rozwijanego.
Istnieje kilka sposobów ukrycia menu rozwijanego:
1) wyświetlacz: brak;
2) widoczność: ukryta;
3) nieprzezroczystość: 0;
4) transformacja: skalaY(0);
5) korzystając z biblioteki jQuery.
Menu rozwijane jest ukryte za pomocą .submenu (display: none;) , po najechaniu myszką jest wyświetlane za pomocą .topmenu li:hover .submenu (display: block;) .
Menu jest ukryte za pomocą .submenu (widoczność: ukryte;) , a pokazane za pomocą .topmenu li:hover .submenu (widoczność: widoczne;).
Menu jest ukryte za pomocą .submenu (opacity: 0;) i pokazane za pomocą .topmenu li:hover .submenu (opacity: 1;) . Aby menu nie pojawiało się po najechaniu myszką na obszar, w którym się znajduje, dodaj widoczność: ukryta; , a po najechaniu zmień na widoczność: widoczny; .
Menu jest ukryte za pomocą .submenu (transformacja: skalaY(0);) i pokazane za pomocą .topmenu li:hover .submenu (transformacja: skalaY(1);). Ponieważ domyślna transformacja elementu następuje od środka, należy dodać for .submenu (transform-origin: 0 0;) , tj. z lewego górnego rogu.
Ciekawe efekty można stworzyć stosując przekształcenia CSS3, np. wyświetlenie menu z głębi ekranu.
* ( rozmiar pudełka: obramowanie; ) treść ( margines: 0; tło: gradient promieniowy (#BFD6E2 1px, rgba(255,255,255,0) 2px); rozmiar tła: 10px 10px; ) nav ul (styl listy : brak; margines: 0; dopełnienie: 0; ) nav a (wyświetlanie: blok; dekoracja tekstu: brak; kontur: brak; przejście: wysuwanie .4s; ) .topmenu ( widoczność tylnej powierzchni: ukryta; tło : rgba(255,255,255,.8); .topmenu > li (wyświetlanie: blok inline; pozycja: względna; ) .topmenu > li > a (rodzina czcionek: „Exo 2”, bezszeryfowa; wysokość: 70 pikseli; linia -wysokość: 70px; dopełnienie: 0 30px; grubość czcionki: pogrubiona; transformacja tekstu: wielkie litery; .down:after (treść: "\f107"; margines po lewej stronie: 8px; rodzina czcionek: FontAwesome; ) .topmenu li a:hover ( kolor: #E6855F; ) .submenu ( tło: białe; obramowanie: 2px stałe #003559; pozycja: bezwzględna; po lewej: 0; widoczność: ukryta; krycie: 0; indeks Z: 5; szerokość: 150px; transformacja: perspektywa (600px) obrótX(-90 stopni); początek transformacji: 0% 0%; przejście: widoczne wydłużenie o 0,6 s;
transformacja: perspektywa (600px) obrótX(0 stopni); ) .submenu li a ( kolor: #7f7f7f; rozmiar czcionki: 13px; wysokość linii: 36px; dopełnienie: 0 25px; rodzina czcionek: "Kurale", serif; )
przejście: 0,5 s swobodnego wejścia; ) .submenu a ( kolor: biały; wyrównanie tekstu: do lewej; dopełnienie: 12px 15px; rozmiar czcionki: 13px; obramowanie-dół: 1px solid rgba(255,255,255,.1); ) .submenu li:last-child a ( border-bottom: brak; ) .topmenu > li:hover .submenu ( krycie: 1; transformacja: skalaY(1); )
* ( box-sizing: border-box; ) body ( margines: 0; tło: url(https://html5book.ru/wp-content/uploads/2015/10/background54.png) ) nav ( tło: biały; ) nav ul ( styl listy: brak; margines: 0; dopełnienie: 0; ) nav a ( dekoracja tekstu: brak; konspekt: brak; wyświetlanie: blok; przejście: .4s ułatwienie wyjścia; ) .topmenu ( wyrównanie tekstu: środek; dopełnienie: 10 pikseli 0; .topmenu > li ( display: inline-block; pozycja: względna; ) .topmenu > li: after ( treść: ""; pozycja: bezwzględna; prawa: 0; szerokość: 1 piksele ; wysokość: 12 pikseli; tło: #d2d2d2; cień ramki: 4px -2px 0 #d2d2d2; transform(30deg); .topmenu > li:ostatnie-dziecko:po ( tło: brak; pole -cień: brak; ) > li > a ( dopełnienie: 12px 26px; kolor: #767676; transformacja tekstu: wielkie litery; grubość czcionki: pogrubienie; odstępy między literami: 1px; rodzina czcionek: "Exo 2", bezszeryfowa; ) .topmenu li a:hover ( kolor: #c0a97a; ) .submenu ( pozycja: bezwzględna; lewa: 50%; górna: 100%; szerokość: 210px; lewy margines: -105px; tło: #fafafa ;
indeks Z: 5;
@import url("https://fonts.googleapis.com/css?.jpg); pozycja tła: środek w środku; powtórzenie tła: brak powtórzeń; rozmiar tła: okładka; wysokość: 100vh; pozycja: względna; ) body:before (treść: ""; pozycja: absolutna; lewa: 0; dół: 0; wysokość: 100%; szerokość: 100%; tło: gradient liniowy (45 stopni, rgba (0,0,0,0) , rgba(255,255,255,.8)); nav ( wyrównanie tekstu: środek; dopełnienie: 40px 0 0; ) nav ul ( styl listy: brak; margines: 0; dopełnienie: 0; ) nav a ( dekoracja tekstu: brak; wyświetlacz: blok; kolor: #222; .topmenu > li (wyświetlanie: blok inline; pozycja: względna; ) .topmenu > li > a ( pozycja: względna; dopełnienie: 10px 15px; rodzina czcionek: " Skrypt Kaushan ", kursywa; rozmiar czcionki: 1,5 em; wysokość linii: 1; odstęp między literami: 3 piksele; ) .topmenu > li > a:before ( treść: ""; pozycja: bezwzględna; indeks Z: 5; po lewej: 50%; szerokość: 10 pikseli; tło: promień obramowania: 50%; krycie: 0 .topmenu li:hover a:before ( transformacja: tłumaczenie(-50%, 0);
nieprzezroczystość: 1; ) .submenu ( pozycja: bezwzględna; indeks Z: 4; lewa: 50%; góra: 100%; szerokość: 150px; dopełnienie: 15px 0 15px; górny margines: 5px; tło: biały; promień obramowania: 5px; box-shadow: 0 0 30px rgba(0,0,0,.2); rozmiar pudełka: obramowanie; widoczność: krycie: 0; transform(-50%, 20px); .submenu ( widoczność: widoczna; krycie: 1; transformacja: tłumaczenie(-50%, 0); ) .submenu a ( rodzina czcionek: „Libre Baskerville”, serif; rozmiar czcionki: 11px; odstępy między literami: 1px; dopełnienie: 5px 10px; przejście: .3s liniowe; .submenu a:hover (tło: #e8e8e8;)
Habr, witaj!
Na Codepen pojawia się wiele dobrych rozwiązań od różnych specjalistów i uważam, że najlepsze z nich należy zebrać w jednym miejscu. Dlatego 2 lata temu zacząłem zapisywać na swoim komputerze ciekawe skrypty o różnej tematyce.
Kiedyś publikowałem je w grupie produktów Mr Cloud IDE. Gefest, były to zestawy 5-8 rozwiązań. Ale teraz zacząłem gromadzić 15-30 skryptów o różnej tematyce (przyciski, menu, podpowiedzi itp.).
Tak duże zestawy warto pokazywać większej liczbie specjalistów. Dlatego zamieszczam je na Habr. Mam nadzieję, że będą dla Was przydatne.
W tej recenzji przyjrzymy się menu wielopoziomowym.
Płaska nawigacja pozioma
http://codepen.io/andytran/pen/kmAEy
Nagłówek nawigacji materiału z wyrównanymi listami rozwijanymi
Adaptacyjny pasek łączy z dwukolumnowym podmenu. Wszystko odbywa się w css i html. Używane selektory css3, które nie są obsługiwane w ie8.
http://codepen.io/colewaldrip/pen/KpRwgQ
Płynne menu rozwijane akordeonu
Stylowe menu pionowe z płynnie otwierającymi się elementami. Używane jest przejście, transformacja kodu js.
http://codepen.io/fainder/pen/AydHJ
Ciemne, wbudowane menu nawigacyjne czystego CSS
Ciemny pionowy pasek nawigacyjny z ikonami z ionicons. Używany jest JavaScript. W ie8 najprawdopodobniej będzie działać bez animacji.
http://codepen.io/3lv3n_snip3r/pen/XbddOO
Mega rozwijane menu czystego CSS3 z animacją
Stylowe menu z dwoma formatami wyjściowymi: poziomym i pionowym. Stosowane są ikony i animacje CSS3. Na ie8 na pewno będzie to wyglądać okropnie, ale w innych przeglądarkach wszystko jest spoko.
Link pionowy: http://codepen.io/rizky_k_r/full/sqcAn/
Link do poziomu: http://codepen.io/rizky_k_r/pen/xFjqs
Rozwijane menu CSS3
Poziome menu z dużymi elementami i rozwijaną listą linków. Czysty i minimalistyczny kod bez js.
http://codepen.io/ojbravo/pen/tIacg
Proste menu rozwijane czystego CSS
Proste, ale stylowe menu poziome. Używa świetnej czcionki. Wszystko działa na css i html, bez js. Będzie działać w ie8.
http://codepen.io/Responsive/pen/raNrEW
Mega rozwijane menu Bootstrap 3
Doskonałe rozwiązanie dla sklepów internetowych. Wyświetla kilka poziomów kategorii i duże obrazy (na przykład produkt w promocji). Opiera się na boostrapie 3.
http://codepen.io/organizedchaos/full/rwlhd/
Płaska nawigacja
Stylowy pasek nawigacyjny z płynnym podmenu. W starszych przeglądarkach będzie wyświetlać problemy.
http://codepen.io/andytran/pen/YPvQQN
Nawigacja zagnieżdżona 3D
Poziome menu z bardzo fajną animacją bez js!
http://codepen.io/devilishalchemist/pen/wBGVor
Responsywne Mega Menu - Nawigacja
Poziome menu responsywne. Wygląda nieźle, ale wersja mobilna jest trochę kiepska. Stosowane są CSS, HTML i js.
http://codepen.io/samiralley/pen/xvFdc
Czyste menu CSS3
Oryginalne menu. Z prostym i czystym kodem bez js. Użyj, aby uzyskać efekt „wow”.
http://codepen.io/Sonick/pen/xJagi
Pełne menu rozwijane CSS3
Kolorowe menu rozwijane z jednym poziomem zagnieżdżenia. Używane są ikony z Font-Awesome, HTML i CSS.
http://codepen.io/daniesy/pen/pfxFi
Menu rozwijane tylko w CSS3
Całkiem niezłe menu poziome z trzema poziomami zagnieżdżenia. Działa bez js.
http://codepen.io/riogrande/pen/ahBrb
Menu rozwijane
Minimalistyczne menu z oryginalnym efektem pojawiania się zagnieżdżonej listy elementów. Cieszę się, że to rozwiązanie jest również pozbawione JavaScript.
http://codepen.io/kkrueger/pen/qfoLa
Menu rozwijane czystego CSS
Prymitywne, ale skuteczne rozwiązanie. Tylko css i html.
http://codepen.io/andornagy/pen/xhiJH
Menu ściągane — koncepcja interakcji menu
Ciekawa koncepcja menu dla telefonu komórkowego. Nigdy wcześniej nie widziałem czegoś takiego. Używa HTML, CSS i JavaScript.
http://codepen.io/fbrz/pen/bNdMwZ
Utwórz proste menu rozwijane
Czysty i prosty kod, bez js. Na pewno zadziała w ie8.
http://codepen.io/nyekrip/pen/pJoYgb
Lista rozwijana czystego CSS
Rozwiązanie nie jest złe, ale wykorzystuje zbyt wiele klas. Cieszę się, że nie ma js.
http://codepen.io/jonathlee/pen/mJMzgR
Menu rozwijane
Ładne pionowe menu z minimalnym kodem JavaScript. JQuery nie jest używany!
http://codepen.io/MeredithU/pen/GAinq
Menu rozwijane CSS3
Poziome menu z dodatkowymi podpisami może dobrze ozdobić Twoją witrynę. Kod jest prosty i przejrzysty. JavaScript nie jest używany.
http://codepen.io/ibeeback/pen/qdEZjR
Piękne rozwiązanie z dużą ilością kodu (html, css i js). Utworzono 3 formaty podmenu. Rozwiązanie doskonale sprawdza się w przypadku sklepów internetowych.
http://codepen.io/martinridgway/pen/KVdKQJ
Rozwijane menu CSS3 (specjalne rozwiązanie)!
Ciemne poziome menu z trzynastoma (13) opcjami animacji! Zdecydowanie polecam przeczytać, przyda się w życiu codziennym.
http://codepen.io/cmcg/pen/ofFiz
P.S.
Mam nadzieję, że spodobała Ci się kolekcja 23 rozwiązań. Jeśli chcesz je dalej czytać, wypełnij poniższą ankietę.
Cieszcie się wszyscy ze swojej pracy.
Dzień dobry, drodzy czytelnicy. Dzisiaj przyjrzymy się tematowi „ jak zrobić poziome menu za pomocą HTML i CSS" Menu z reguły znajduje się w nagłówku witryny i stanowi listę linków do najważniejszych stron, jest również nazywane menu główne. Użytkownicy będą stale klikać te linki. Sposób ich rozmieszczenia i układ menu będzie miał wpływ na zachowanie użytkowników, konwersję, ogólne wrażenie na temat Twojej witryny i oczywiście.
Dawno, dawno temu menu główne witryny robione było na obrazkach, tabelach, flashu i może jeszcze czymś innym, ale obecnie istnieje najpopularniejsza i zarazem poprawna metoda tworzenia menu za pomocą tagów „list”.
Tagi służą do tworzenia menu
,
- I .
Przykład wykorzystania tagów HTML do stworzenia menu w kodzie poniżej:
W nagłówku otrzymujemy gotowe górne menu, bez żadnych specjalnych stylów i bajerów, można to nazwać ramą Twojego przyszłego pięknego menu. Jeśli skopiujesz i wkleisz ten kod HTML i CSS, będzie to wyglądało tak.
Wszystko okazało się dość proste, oczywiście chcesz od razu piękne menu główne, ale bez zrozumienia podstaw po prostu nie będziesz w stanie stworzyć dobrego menu bez błędów w HTML i CSS.
Oprócz float:left; np. display:inline-block; lub wyświetlacz:flex; , ale zaleca się skorzystanie z metody opisanej powyżej.
Wypełnijmy nasz szablon menu różnymi stylami i zróbmy to Piękny.
Teraz podam kilka gotowych przykładów z gotowym poziomym projektem menu.
Możesz sam stworzyć wszystkie „piękności” dla swojej witryny, zamiast szukać w Internecie. Najłatwiej to zrobić, korzystając z jednego z poniższych przykładów.
Poniżej znajdują się style dla tego menu. HTML pozostaje taki sam jak w menu „framework”.
Ul ( styl listy: brak; /*usuń znaczniki listy*/ margines: 0; /*usuń dopełnienie*/ dopełnienie-lewo: 0; /*usuń dopełnienie*/ margines u góry:25px; /*ustaw dopełnienie u góry* / ) a ( dekoracja tekstu: brak; /*usuń podkreślenie tekstu linku*/ tło:#30A8E6; /*dodaj tło do pozycji menu*/ color:#fff; /*zmień kolor linków */ padding:10px; /*dodaj wcięcie*/ rodzina czcionek: arial; /*zmień czcionkę*/ border-radius:4px; /*dodaj zaokrąglenie*/ -moz-przejście: wszystko 0,3 s 0,01 s łatwość; /*dokonaj płynnego przejścia*/ -o-przejście: wszystkie 0,3 s 0,01 s łatwość; -webkit-przejście: wszystkie 0,3 s 0,01 s łatwość; ) a:hover ( tło:#1C85BB;/*dodaj efekt najechania*/ ) li ( float:left; /*Umieść listę poziomo, aby zaimplementować menu*/ margines-right:5px; /*Dodaj wcięcie do pozycji menu*/ )
Do wdrożenia dodatkowe menu rozwijane (rozwijane) na stronie Dla dowolnej pozycji menu musimy dodać do kodu HTML dodatkową listę pozycji dla dowolnego linku z menu poziomego i zmienić style CSS. W stylach zastosujemy prosty trik - zmianę sposobu wyświetlania rozwijanego menu poprzez najechanie kursorem na potrzebną nam pozycję w górnym menu. Weźmy na przykład element „usługi”.
góra: 25 pikseli;
wyświetlacz: brak;
) /*Ustaw ukrytą część jako widoczną*/ li:hover > ul ( display:block; szerokość:250px; /*Ustaw szerokość menu rozwijanego*/ ) li:hover > ul > li ( float:none; /*Usuń położenie poziome* / )
