- Czyste menu rozwijane CSS / HTML W tym samouczku stworzymy klasyczne menu poziome na czystym CSS....
- Animujemy poziome menu podczas wskazywania.
- Opisz menu rozwijane CSS / HTML
Czyste menu rozwijane CSS / HTML
W tym samouczku stworzymy klasyczne menu poziome na czystym CSS. Ma ikony na listach. Wskazując element, płynnie zmienia kolor przycisku i tekstu, dodawany jest cień. Listy rozwijane można tworzyć wielopoziomowo, a najważniejsze jest to, że są one w prosty sposób implementowane na czystym CSS3.
Kontynuacja tej lekcji tutaj - część 2 WERSJA MOBILNA menu poziome „
Zobacz pióro POyzbW przez Denis ( @Dwstroy ) na Codepen .
W lekcji użyj:
- wyświetlacz: flex;
- użyj przejścia;
- ustaw elementy w pozycji.
Struktura poziomego menu HTML
Najpierw zapisz znaczniki poniżej poziomego menu. Otwieramy nasze środowisko programistyczne w moim przypadku, to jest PhpStorm, stwórz plik index.html, przepisz ramkę html: 5, zastąp lang ru.
Wszystkie meta zostaną usunięte z wyjątkiem kodowania, zarejestruję swój tytuł „ Menu Toma ”.
Między ciałem piszemy tag nagłówka, aw nim blok z menu .dws klasy, które zawiera nasze menu. Następnie struktura będzie wyglądać następująco: stworzymy listy w ilości pięciu sztuk. Na każdej liście będzie link z atrybutem href = "#". Następnie przejdę do ikony z klasą .fa .fa-
<header> <nav class = "dws-menu"> ul> li * 5> a [href = "#"]> i.fa.fa- </ nav> </ header>
Naciskamy, aby złożyć wniosek.
Zapiszmy nazwy pozycji menu ( Dom, Produkty, Usługi, Wiadomości, Kontakty ).
Następnie wybierz i połącz ikony. Przejdź do witryny, wybierz ikony dla tych elementów menu:
<i class = "fa fa- home "> </ i> <i class = "fa fa- shopping- cart "> </ i> <i class = "fa faycogs"> </ i> <i class = "fa fa- th-list "> </ i> <i class = "fa fa -envelope-open "> </ i>
Pobierz archiwum z witryny za pomocą ikon, wyodrębnij jego zawartość na komputer, skopiuj folder czcionek i folder css do środowiska programistycznego.
Folder czcionek zawiera czcionki ikon, a folder css zawiera ich style. Skompresowane style można usunąć font-awesome.min, podłączamy nieskompresowany font-awesome.css.
W index.html łączymy ikony i rejestrujemy każdy element z własnym stylem ikon ( strona główna , koszyk na zakupy , trybiki , lista-stron , koperty otwarte ).
Stworzyliśmy ramkę główną, utworzyliśmy podmenu po opisie głównego stylu, a teraz utworzymy plik, w którym opiszemy główne style poziomego menu style.css i połączymy go z index.html. Aby sprawdzić, czy style są połączone, utwórz folder img, w którym umieściłem dowolne zdjęcie w tle. Napiszmy połączenie obrazu za pomocą tła.
body {background-image: url ("../ img / ep_naturalwhite.png"); }
Jak widzimy, wszystko zostało wyświetlone, a następnie przejdziemy do opisu stylów.
Przede wszystkim zresetujmy wszystkie wcięcia, które domyślnie mogą ustawić różne przeglądarki:
.dws-menu * {margin: 0; wypełnienie: 0; }
Ustaw nagłówek na 200 pików. i przypisz, które możesz pobrać i osobno połącz się ze sobą na stronie, na wszelki wypadek, napisz dodatkowe czcionki.
header {margin: 200px; font-family: Cuprum, Arial, Helvetica, sans-serif; }
Ukryj znaczniki na listach:
.dws-menu ul, .dws-menu ol {list-style: none; }
Listy będą wyświetlane poziomo z wyświetlaczem: len, a my zrobimy to na środku:
.dws-menu> ul {display: flex; justify-content: center; }
W nagłówku wcniemy tylko górę, napiszemy margines.
header { margin-top: 200px; font-family: Cuprum, Arial, Helvetica, sans-serif; }
Zaprojektujmy nasze menu, ustaw kolor przycisków, czcionki itp.
Wybierz linki nav> ul li, i zablokuj je. Ustaw tło menu, wpisz wcięcia, określ rozmiar, kolor, usuń podkreślenie i utwórz nagłówki wielkimi literami.
.dws-menu> ul li a {display: block; tło: #ececed; dopełnienie: 15px 30px 15px 40px; rozmiar czcionki: 14px; kolor: # 454547; dekoracja tekstowa: brak; text-transform: wielkie litery; }
Następnie ustaw ikony, przypisz listy do pozycji: względne; dla dalszego wyrównania ikon:
.dws-menu> ul li {position: relative; }
Następnie wybieramy ikony, ustawiamy je absolutnie, wykonujemy wcięcia od góry na 15 pikach, od lewej 12 pików, zwiększamy rozmiar do 18 pików.
.dws-menu> ul li> a i.fa {position: absolute; top: 15px; left: 12px; rozmiar czcionki: 18px; }
Przypisz separator w postaci obramowania do list, wybierz pierwszy element LI, ustaw granicę. Wybieramy ostatni element LI i przypisujemy mu podobną granicę.
.dws-menu> ul li: first-child {border-left: 1px solid # b2b3b5; } .dws-menu> ul li: last-child {border-right: 1px solid #babbbd; }
Wprowadzanie separatorów dla list LI:
.dws-menu> ul li {position: relative; border-right: 1px solid # c7c8ca; }
Menu uzyskało wygląd, a następnie możesz przejść do opisu stylów podczas zawisu.
Animujemy poziome menu podczas wskazywania.
Wybierz łącza i przypisz kolor do bloku, a następnie przypisz kolor samego linku ikoną do bieli. Dodajmy kolejny ciemny cień. Z pomocą przejścia w 0,3 sekundy zrobimy gładki wygląd:
.dws-menu li a: hover {tło: # 454547; kolor: #ffffff; box-shadow: 1px 5px 10px -5px czarny; przejście: łatwość wszystkich 0.3s; }
Aby ten efekt zniknął płynnie, dodaj ten styl do linku bez problemu:
.dws-menu> ul li a {display: block; tło: #ececed; dopełnienie: 15px 30px 15px 40px; rozmiar czcionki: 14px; kolor: # 454547; dekoracja tekstowa: brak; text-transform: wielkie litery; przejście: łatwość wszystkich 0.3s; }
Menu główne zostanie zakończone i możesz przejść do opisu podmenu i zawartych w nich podmenu.
Opisz menu rozwijane CSS / HTML
O nas otwieramy index.html i dodajemy na przykład dodatkowe menu do produktów. Wstaw UL między listami LI i umieść w niej pięć list, które będą zawierały linki z atrybutem herf = ”#”.
ul> li * 5> a [href = "#"]
Naciskamy, aby złożyć wniosek, wpisz nazwę przedmiotów ( odzież, elektronika, żywność, narzędzia, życie. Chemia ).
<ul> <li> <a href="#"> Odzież </a> </ li> <li> <a href="#"> Elektronika </a> </ li> <li> <a href = „#”> Żywność </a> </ li> <li> <a href="#"> Narzędzia </a> </ li> <li> <a href="#"> Życie. chemia </a> </ li> </ ul>
Następnie otwórz style.css i opisz style podmenu.
Wybieramy drugą listę i przypisujemy jej pozycję: absolutna; , ustawmy minimalną szerokość na 150 pików.
/ * podmenu * / .dws-menu li ul {position: absolute; min-width: 150px; }
Napiszmy do list granicznych przy 1 piku.
.dws-menu li> ul li {border: 1px solid # c7c8ca; }
Dla linków w podmenu ustawimy wcięcia na 10 pikach., Usuń transformację tekstu i spraw, by tło było o kilka tonów ciemniejszym tłem: # e4e4e5; .
.dws-menu li> ul li a {padding: 10px; text-transform: none; tło: # e4e4e5; }
Następnie utwórz kolejne podmenu. Przejdź do pliku znaczników i na przykład w formularzu „Elektronika” przez analogiczne menu, tak jak wcześniej. Opisujemy nagłówki artykułów ( aparaty fotograficzne, komputery, telefony ) i oszczędzamy.
<li> <a href="#"> Elektronika </a> <ul> <li> <a href="#"> Kamery </a> </ li> <li> <a href="#"> Komputery </a> </ li> <li> <a href="#"> Telefony </a> </ li> </ ul> </ li>
Zostały wyprowadzone, ale ukryte pod głównym menu, teraz pozycja: absolutna; zagnieżdżony UL i przenieś go na szczyt 150. z boku:
.dws-menu li> ul li ul {position: absolute; right: -150px; top: 0; }
Następnie sprawimy, że podmenu pojawi się podczas kierowania głównych elementów górnego menu, do tego dodamy wyświetlacz: brak; i tym samym ukryć wszystkie wewnętrzne punkty.
/ * podmenu * / .dws-menu li ul {position: absolute; min-width: 150px; wyświetlacz: brak; }
A dla ich wyglądu wybieramy listy w dymku i wyświetlają je za pomocą display: block; .
.dws-menu li: hover> ul {display: block; }
Teraz możesz dodawać wielopoziomowe menu po prostu kopiując blok UL, zmieniając jego elementy.
<ul> <li> <a href="#"> <i class = "fa fa-home"> </ i> Home </a> </ li> <li> <a href="#"> < i class = "fa fa-shopping-cart"> </ i> Produkty </a> <ul> <li> <a href="#"> Odzież </a> <ul> <li> <a href = „#”> Buty </a> </ li> <li> <a href="#"> Kurtki </a> </ li> <li> <a href="#"> Spodnie </a> < / li> </ ul> </ li> <li> <a href="#"> Elektronika </a> <ul> <li> <a href="#"> Kamery </a> </ li> <li> <a href="#"> Komputery </a> </ li> <li> <a href="#"> Telefony </a> <ul> <li> <a href="#"> Samsung </a> </ li> <li> <a href="#"> Flf </a> </ li> <li> <a href="#"> Apple </a> </ li> < / ul> </ li> </ ul> </ li> <li> <a href="#"> Żywność </a> </ li> <li> <a href="#"> Narzędzia </ h a> </ li> <li> <a href="#"> Gen. chemia </a> </ li> </ ul> </ li> <li> <a href="#"> <i class = "fa fa-cogs"> </ i> Usługi </a> <ul > <li> <a href="#"> Usługa 1 </a> </ li> <li> <a href="#"> Usługa 2 </a> </ li> <li> <a href = „#”> Usługa 3 </a> </ li> </ ul> </ li> <li> <a href="#"> <i class = „fa fa-th-list”> </ i> Wiadomości </a> </ li> <li> <a href="#"> <i class = "fa fa-envelope-open"> </ i> Kontakty </a> </ li> </ ul>
Następnie zakończmy przyciski przyciskami. Używam, stworzyłem kilka ustawień wstępnych, możesz stworzyć swój własny, w moim przypadku po prostu skopiowałem ten kod i umieściłem go w miejscu, które wcześniej napisałem.
.dws-menu> ul li a {display: block; / * Permalink - ten gradient: http://colorzilla.com/gradient-editor/#c9c9c9+0,f6f6f6+2,c4c5c7+98.757577+100;Custom+3 * / background: # c9c9c9 ; / * Stare przeglądarki * / tło: -moz-linear-gradient (góra, # c9c9c9 0%, # f6f6f6 2%, # c4c5c7 98%, # 757577 100%); / * FF3.6-15 * / background: -webkit-linear-gradient (góra, # c9c9c9 0%, # f6f6f6 2%, # c4c5c7 98%, # 757577 100%); / * Chrome10-25, Safari5.1-6 * / background: gradient liniowy (do dołu, # c9c9c9 0%, # f6f6f6 2%, # c4c5c7 98%, # 757577 100%); / * W3C, IE10 +, FF16 +, Chrome26 +, Opera12 +, Safari7 + * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# c9c9c9', endColorstr = '# 757577', GradientType = 0); / * IE6-9 * / padding: 15px 30px 15px 40px; rozmiar czcionki: 14px; kolor: # 454547; dekoracja tekstowa: brak; text-transform: wielkie litery; przejście: łatwość wszystkich 0.3s; } .dws-menu li a: hover {/ * Permalink - ten gradient: http://colorzilla.com/gradient-editor/#e0e1e5+0.454547+2.454547+98,e0e1e5+100 * / background: # e0e1e5; / * Stare przeglądarki * / tło: -moz-liniowy-gradient (góra, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * FF3.6-15 * / background: -webkit-linear-gradient (góra, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * Chrome10-25, Safari5.1-6 * / tło: gradient liniowy (do dołu, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * W3C, IE10 +, FF16 +, Chrome26 +, Opera12 +, Safari7 + * / filter: progid: DXImageTransform. Microsoft.gradient (startColorstr = '# e0e1e5', endColorstr = '# e0e1e5', GradientType = 0); / * IE6-9 * / color: #ffffff; box-shadow: 1px 5px 10px -5px czarny; przejście: łatwość wszystkich 0.3s; }
Jeśli chcesz, to menu może być zaprojektowane dla stylu, który jest dla Ciebie odpowiedni na stronie, wystarczy wygenerować kolor i zastąpić go kodem. Okazało się, że proste i jednocześnie ładne poziome menu, wykonane w czystym CSS.