1. Čisti CSS / HTML padajući izbornik U ovom tutorialu napravit ćemo klasični horizontalni izbornik...
2. Dok usmjeravamo, animiramo horizontalni izbornik.
3. Opišite CSS / HTML padajući izbornik

Čisti CSS / HTML padajući izbornik

U ovom tutorialu napravit ćemo klasični horizontalni izbornik na čistom CSS-u. Na popisu se nalaze ikone. Kada pokazuje na stavku, glatko mijenja boju gumba i teksta, dodaje se sjena. Padajuće liste mogu se izraditi na više razina, a glavna stvar je da je sve jednostavno izvedeno na čistom CSS3.

Nastavak ove lekcije ovdje - 2. dio MOBILNA VERZIJA horizontalni izbornik ”.

Pogledajte olovku POyzbW autor: Denis ( @Dwstroy ) uključeno CodePen ,

U lekciji koristite:

• zaslon: flex;
• korištenje prijelaza;
• pozicionirajte elemente u položaj.

HTML horizontalna struktura izbornika

Najprije upišite oznaku ispod horizontalnog izbornika. Otvorimo razvojno okruženje u mom slučaju, to je PhpStorm, kreiram index.html datoteku, propisujem okvir html: 5, zamijenimo lang s ru.

Svi meta će biti izbrisani osim kodiranja, registrirat ću svoj naslov “ Tom menu ”.

Između tijela zapisujemo zaglavlje oznake, au njoj se nalazi blok s klasom .dws-izbornik koji će sadržavati naš izbornik. Dalje, struktura će biti kako slijedi, mi ćemo stvoriti popise u iznosu od pet komada. U svakom popisu bit će veza s atributom href = "#". Tada ću otići na ikonu s klasom .fa .fa-

<header> <nav class = "dws-izbornik"> ul> li * 5> a [href = "#"]> i.fa.fa- </ nav> </ zaglavlje>

Priopćavamo da se prijavimo.

Zapišite naziv stavki izbornika ( Home, Products, Services, News, Contacts ).

Zatim odaberite i povežite ikone. Idite na web-lokaciju, mi ćemo odabrati ikone za ove stavke izbornika:

<i class = "fa fa- home "> </ i> <i class = "fa fa- shopping- cart "> </ i> <i class = "fa faogs"> </ i> <i class = "fa - th - lista "> </ i> <i class = "fa - envelope - open "> </ i>

Preuzmite arhivu s web-lokacije pomoću ikona, izdvojite sadržaj na računalo, kopirajte mapu fontova i css mapu u razvojno okruženje.

Mapa s fontovima sadrži fontove ikona, a css mapa sadrži njihove stilove. Komprimirani stilovi mogu se ukloniti font-awesome.min, povezujemo nekomprimirani font-awesome.css.

U index.html povezujemo ikone i svaku stavku registriramo s vlastitim stilom ikona ( dom , shopping-cart , cogs , th-list , envelope-open ).

Napravili smo glavni okvir, kreirali podizbornik nakon opisa glavnog stila, a sada ćemo napraviti datoteku u kojoj ćemo opisati glavne stilove horizontalnog izbornika style.css i spojiti ga na index.html. Da biste provjerili jesu li stilovi povezani, napravite img mapu, u njoj ću postaviti pozadinsku sliku. Zapišimo sliku vezu pomoću pozadine.

tijelo {pozadina-slika: url ("../ img / ep_naturalwhite.png"); }

Kao što vidimo, sve je prikazano i tada ćemo nastaviti s opisom stilova.

Prije svega, vratimo sve alineje koje različiti preglednici mogu postaviti prema zadanim postavkama:

.dws-menu * {margin: 0; padding: 0; }

Postavite zaglavlje na 200 vrhova. i dodijeliti koje možete preuzeti i zasebno se spojiti na sebe na web-lokaciji, za svaki slučaj, napišite dodatne fontove.

header {margin: 200px; obitelj fontova: Cuprum, Arial, Helvetica, sans-serif; }

Sakrij oznake na popisima:

.dws-izbornik ul, .dws-izbornik ol {list-style: none; }

Popisi će biti prikazani vodoravno s prikazom: lan, a mi ćemo to učiniti u centru:

.dws-menu> ul {display: flex; justify-content: centar; }

U zaglavlju ćemo uvlačiti samo vrh, napisati ćemo marginu.

zaglavlje { margin-top: 200px; obitelj fontova: Cuprum, Arial, Helvetica, sans-serif; }

Osmislimo naš izbornik, postavimo boju gumba, font i sl.

Odaberite veze nav> ul li i učinite ih blokiranim elementima. Postavite pozadinu izbornika, upišite uvlake, odredite veličinu, boju, uklonite donju crtu i izradite zaglavlja velikim slovima.

.dws-izbornik> ul li a {display: block; pozadina: #ececed; obloga: 15px 30px 15px 40px; veličina fonta: 14px; boja: # 454547; tekst-dekoracija: nema; transformacija teksta: velika slova; }

Zatim postavite ikone, dodijelite popise položaju: relativna; za daljnje poravnanje ikona:

.dws-menu> ul li {pozicija: relativna; }

Zatim odabiremo ikone, apsolutno ih smjestimo, napravimo uvlačenje odozgo na 15 vrhova, s lijevih 12 vrhova, povećamo veličinu na 18 vrhova.

.dws-izbornik> ul li> i.fa {položaj: apsolutno; vrh: 15px; lijevo: 12px; veličina fonta: 18px; }

Dodijelite separator u obliku obruba popisima, odaberite prvi LI element, postavite granicu. Odabiremo posljednji element LI i dodijelimo mu sličnu granicu.

.dws-izbornik> ul li: prvo dijete {border-left: 1px solid # b2b3b5; } .dws-izbornik> ul li: posljednje dijete {border-right: 1px solid #babbbd; }

Izrada razdjelnika za LI liste:

.dws-menu> ul li {pozicija: relativna; granica desno: 1px solid # c7c8ca; }

Izbornik je dobio izgled, a zatim možete nastaviti s opisom stilova tijekom lebdenja.

Dok usmjeravamo, animiramo horizontalni izbornik.

Odaberite veze i dodijelite boju bloku i dodijelite boju same veze s ikonom na bijelo. Dodajmo još jednu tamnu sjenu. Uz pomoć prijelaza za 0,3 sekunde napravit ćemo glatki izgled:

.dws-izbornik li a: hover {pozadina: # 454547; boja: #ffffff; kutija-sjena: 1px 5px 10px -5px crna; prijelaz: sve 0.3s lako; }

A kako bi ovaj efekt nestao glatko, dodajte ovaj stil na vezu na jednostavnost:

.dws-izbornik> ul li a {display: block; pozadina: #ececed; obloga: 15px 30px 15px 40px; veličina fonta: 14px; boja: # 454547; tekst-dekoracija: nema; transformacija teksta: velika slova; prijelaz: sve 0.3s lako; }

Glavni izbornik je završen i možete nastaviti s opisom podizbornika i podizbornika koji su ugrađeni u njih.

Opišite CSS / HTML padajući izbornik

O tome otvaramo index.html i dodajemo, na primjer, dodatni izbornik proizvodima. Umetnite UL između LI popisa i stavite pet popisa u njega, koji će sadržavati veze s atributom herf = ”#”.

ul> li * 5> a [href = "#"]

Pritiskamo da se prijavimo, napišemo naziv predmeta ( Odjeća, Elektronika, Hrana, Alati, Život. Kemija ).

<ul> <li> <a href="#"> Odjeća </a> </ li> <li> <a href="#"> Elektronika </a> </ li> <li> <a href = "#"> Hrana </a> </ li> <li> <a href="#"> Alati </a> </ li> <li> <a href="#"> Život. kemija </a> </ li> </ ul>

Zatim otvorite style.css i opišite stilove podizbornika.

Odabiramo drugi popis i dodijelimo mu položaj: apsolutni; , Postavimo minimalnu širinu na 150 vrhova.

/ * podmeni * / .dws-izbornik li ul {položaj: apsolutni; min-width: 150px; }

Pišite na popise granica na 1 vrhuncu.

.dws-izbornik li> ul li {border: 1px solid # c7c8ca; }

Za linkove u podizborniku postavit ćemo uvlake na 10 vrhova., Ukloniti transformaciju teksta i učiniti pozadinu nekoliko tonova tamnijom pozadinom: # e4e4e5; ,

.dws-izbornik li> dodavanje (padding: 10px; text-transform: nema; pozadina: # e4e4e5; }

Zatim stvorite još jedan podizbornik. Idite na datoteku za označavanje i, na primjer, u obrazac "Elektronika" po analognom izborniku kao što smo to učinili i prije. Opisujemo naslove stavki ( Kamere, Računala, Telefoni ) i spremamo ih.

<li> <a href="#"> Elektronika </a> <ul> <li> <a href="#"> Fotoaparati </a> </ li> <li> <a href="#"> Računala </a> </ li> <li> <a href="#"> Telefoni </a> </ li> </ ul> </ li>

Izvedeni su, ali skriveni pod glavnim izbornikom, sada položaj: apsolutni; ugniježđena UL i premjestiti je na vrh 150. sa strane:

.dws-izbornik li> ul ul (položaj: apsolutni; desno: -150px; na vrh: 0; }

Zatim ćemo napraviti podizbornik kada ciljate glavne stavke glavnog izbornika, za to dodamo zaslon: none; i tako sakriti sve unutarnje točke.

/ * podmeni * / .dws-izbornik li ul {položaj: apsolutni; min-width: 150px; prikaz: nema; }

A za njihov izgled odabrat ćemo popise na lebdenju i prikazati ih uz pomoć zaslona: blok; ,

.dws-menu li: hover> ul {display: block; }

Sada možete dodati izbornike na više razina jednostavnim kopiranjem UL bloka, mijenjajući njegove stavke.

<ul> <li> <a href="#"> <i class = "fa fa-home"> </ i> Početna stranica </ li> <li> <a href="#"> < i class = "fa fa-shopping-cart"> </ i> Proizvodi </a> <ul> <li> <a href="#"> Odjeća </a> <ul> <li> <a href = "#"> Cipele </a> </ li> <li> <a href="#"> Jakne </a> </ li> <li> <a href="#"> Hlače </a> < / li> </ ul> </ li> <li> <a href="#"> Elektronika </a> <ul> <li> <a href="#"> Fotoaparati </a> </ li> <li> <a href="#"> Računala </a> </ li> <li> <a href="#"> Telefoni </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="#"> Hrana </a> </ li> <li> <a href="#"> Alati </ h a> </ li> <li> <a href="#"> Gener. kemija </a> </ li> </ ul> </ li> <li> <a href="#"> <i class = "fa fa-cogs"> </ i> Usluge </a> <ul > <li> <a href="#"> Usluga 1 </a> </ li> <li> <a href="#"> Usluga 2 </a> </ li> <li> <a href = "#"> Usluga 3 </a> </ li> </ ul> </ li> <li> <a href="#"> <i class = "fa fa-th-list"> </ i> Vijesti </a> </ li> <li> <a href="#"> <i class = "fa fa envelope-open"> </ i> Kontakti </a> </ li> </ ul>

Onda završimo s gumbima. Koristim, stvorio sam nekoliko preseta, možete kreirati vlastite, u mom slučaju, ja samo kopiram ovaj kod i smjestim ga u pozadinu mjesto koje sam napisao prije.

.dws-izbornik> ul li a {display: block; / * Permalink - ovaj gradijent: http://colorzilla.com/gradient-editor/#c9c9c9+0,f6f6f6+2,c4c5c7+98.757577+100;Custom+3 * / background: # c9c9c9 ; / * Stari preglednici * / background: -moz-linear-gradient (gore, # c9c9c9 0%, # f6f6f6 2%, # c4c5c7 98%, # 757577 100%); / * FF3.6-15 * / pozadina: -webkit-linearnog gradijenta (gore, # c9c9c9 0%, # f6f6f6 2%, # c4c5c7 98%, # 757577 100%); / * Chrome10-25, Safari5.1-6 * / pozadina: linearni gradijent (do dna, # 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; veličina fonta: 14px; boja: # 454547; tekst-dekoracija: nema; transformacija teksta: velika slova; prijelaz: sve 0.3s lako; } .dws-izbornik li a: hover {/ * Permalink - ovaj gradijent: http://colorzilla.com/gradient-editor/#e0e1e5+0.454547+2.454547+98,e0e1e5+100 * / pozadina: # e0e1e5; / * Stari preglednici * / background: -moz-linear-gradient (gore, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * FF3.6-15 * / pozadina: -webkit-linearni gradijent (gore, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * Chrome10-25, Safari5.1-6 * / pozadina: linearni gradijent (na dnu, # 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 * / boja: #ffffff; kutija-sjena: 1px 5px 10px -5px crna; prijelaz: sve 0.3s lako; }

Ako želite, ovaj izbornik može biti dizajniran za stil koji smo mi pogodni za vas na stranici, dovoljno je samo generirati boju i zamijeniti je u kodu. Ispostavilo se da je jednostavan i istovremeno lijep horizontalni izbornik, izrađen u čistom CSS-u.

Ostavite komentar: