• Главная
  • Карта сайта
Не найдено

Pure CSS / HTML nolaižamā izvēlne

  1. Pure CSS / HTML nolaižamā izvēlne Šajā apmācībā mēs izgatavosim klasisku horizontālu izvēlni tīrā...
  2. Norādot, mēs animējam horizontālo izvēlni.
  3. Aprakstiet nolaižamo izvēlni CSS / HTML

Pure CSS / HTML nolaižamā izvēlne

Šajā apmācībā mēs izgatavosim klasisku horizontālu izvēlni tīrā CSS. Sarakstos ir ikonas. Norādot uz vienumu, tas vienmērīgi maina pogu un teksta krāsu, pievieno ēnu. Nolaižamie saraksti var tikt izveidoti vairākos līmeņos, un vissvarīgākais ir vienkārši īstenot tīru CSS3.

Šīs stundas turpinājums - 2. daļa MOBILE VERSION horizontālā izvēlne ".

Skatiet pildspalvveida pilnšļirci POyzbW Denis ( @Dwstroy ) Codepen .

Nodarbībā:

  • displejs: flex;
  • izmantot pāreju;
  • novietojiet elementus pozīcijā.

HTML horizontālā izvēlnes struktūra

Pirmkārt, uzrakstiet atzīmi zem horizontālās izvēlnes. Manā gadījumā mēs atveram mūsu attīstības vidi, tas ir PhpStorm, izveido index.html failu, nosaka rāmi html: 5, nomainiet lang ar ru.

Visas metas tiks izdzēstas, izņemot kodējumu, es reģistrēšu nosaukumu “ Tom menu ”.

Starp ķermeni mēs rakstām galvenes tagu, un tajā ir bloks ar klases .dws izvēlni, kurā būs mūsu izvēlne. Tālāk struktūra būs šāda, mēs izveidosim sarakstus piecu gabalu apjomā. Katrā sarakstā būs saite ar atribūtu href = "#". Tad es dodos uz ikonu ar klasi .fa .fa-

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

Mēs nospiežam, lai pieteiktos.

Ierakstīsim izvēlnes elementu nosaukumu ( Sākums, Produkti, Pakalpojumi, Ziņas, Kontakti ).

Pēc tam atlasiet un pievienojiet ikonas. Dodieties uz vietni, mēs atlasīsim šo izvēlņu vienumu ikonas:

<i class = "fa fa home "> </ i> <i class = "fa fa- iepirkumu grozs "> </ i> <i class = "fa faogs"> </ i> <i klase = "fa fa -list "> </ i> <i class = "fa fa -open-open "> </ i>

<i class = fa fa home > </ i> <i class = fa fa- iepirkumu grozs > </ i> <i class = fa faogs> </ i> <i klase = fa fa -list > </ i> <i class = fa fa -open-open > </ i>

Lejupielādējiet arhīvu no vietnes ar ikonām, ekstrahējiet tās saturu datorā, kopējiet fontu mapi un css mapi savā attīstības vidē.

Fonta mapē ir ikonas fonti, un css mapē ir to stili. Saspiestus stilus var noņemt font-awesome.min, mēs savienojam nesaspiestus font-awesome.css.

In index.html mēs savienojam ikonas, un mēs reģistrējam katru vienumu ar savu ikonu stilu ( mājās , iepirkumu grozā , zobratus , th-list , aploksnes atvērts ).

Mēs esam izveidojuši galveno rāmi, izveidojuši apakšizvēlni pēc galvenā stila apraksta, un tagad mēs izveidosim failu, kurā mēs aprakstīsim horizontālās izvēlnes style.css galvenos stilus un pievienosim to index.html. Lai pārbaudītu, vai stili ir savienoti, izveidojiet img mapi, tajā es uzskatu patvaļīgu attēlu uz fona. Uzrakstiet attēla savienojumu, izmantojot fonu.

ķermenis {fona attēls: url ("../ img / ep_naturalwhite.png"); }

Kā redzams, viss ir parādīts, un tad mēs turpināsim stilu aprakstu.

Pirmkārt, atiestatīsim visus ievilkumus, kurus dažādas pārlūkprogrammas var iestatīt pēc noklusējuma:

.dws-menu * {starpība: 0; polsterējums: 0; }

Iestatiet galveni uz 200 virsotnēm. un piešķiriet, kuru vietni varat lejupielādēt un atsevišķi pieslēgt sev, tikai gadījumā, rakstiet papildu fontus.

header {margin: 200px; font-family: Cuprum, Arial, Helvetica, sans-serif; }

Slēpt marķierus sarakstos:

.dws-menu ul, .dws-menu ol {list-style: nav; }

Saraksti tiks rādīti horizontāli ar displeju: linu, un mēs to darīsim centrā:

.dws-menu> ul {displejs: flex; pamatot saturu: centrs; }

Virsrakstā mēs ievadīsim tikai augšējo daļu, mēs uzrakstīsim margas augšdaļu.

header { margin-top: 200px; font-family: Cuprum, Arial, Helvetica, sans-serif; }

Izveidosim mūsu izvēlni, iestatīsim pogas, fontu utt.

Izvēlieties saites nav> ul li, un padariet tās bloka elementus. Iestatiet izvēlnes fonu, ierakstiet ievilkumus, norādiet izmēru, krāsu, noņemiet pasvītrojumu un izveidojiet virsrakstus ar lielajiem burtiem.

.dws-menu> ul li a {displejs: bloks; fons: #ececed; polsterējums: 15px 30px 15px 40px; fonta lielums: 14px; krāsa: # 454547; teksta apdare: nav; teksta pārveidošana: lielie burti; }

Tad novietojiet ikonas, piešķiriet sarakstus pozīcijai: relatīvais; tālākai ikonas saskaņošanai:

.dws-menu> ul li {pozīcija: relatīvais; }

Pēc tam mēs izvēlamies ikonas, novietojam tās absolūti, liekamies no augšas uz 15 pīķiem, no kreisās 12 virsotnes, palielinot izmēru līdz 18 pīķiem.

.dws-menu> ul li> a i.fa {pozīcija: absolūta; tops: 15px; pa kreisi: 12px; fonta lielums: 18px; }

Piešķiriet separatoram robežu veidā sarakstus, atlasiet pirmo LI elementu, iestatiet robežu. Mēs izvēlamies pēdējo elementu LI un piešķiram tam līdzīgu robežu.

.dws-menu> ul li: pirmais bērns {left-left: 1px cietais # b2b3b5; } .dws-menu> ul li: pēdējais bērns {right-right: 1px solid #babbbd; }

Ierobežojumu noteikšana LI sarakstiem:

.dws-menu> ul li {pozīcija: relatīvais; labajā pusē: 1px cietais # c7c8ca; }

Izvēlne ir ieguvusi izskatu, tad varat doties uz stilu aprakstu lidojuma laikā.

Norādot, mēs animējam horizontālo izvēlni.

Atlasiet saites un piešķiriet blokam krāsu un piešķiriet saiknes krāsu ar ikonu uz balto. Pievienosim vēl vienu tumšu ēnu. Ar pārejas palīdzību 0,3 sekundēs mēs veiksim gludu izskatu:

.dws-menu li a: lidināties {fons: # 454547; krāsa: #ffffff; kastes ēna: 1px 5px 10px -5px melna; pāreja: visi 0.3s vieglumu; }

Lai padarītu šo efektu vienmērīgu, pievienojiet šo stilu saitei:

.dws-menu> ul li a {displejs: bloks; fons: #ececed; polsterējums: 15px 30px 15px 40px; fonta lielums: 14px; krāsa: # 454547; teksta apdare: nav; teksta pārveidošana: lielie burti; pāreja: visi 0.3s vieglumu; }

Galvenā izvēlne ir pabeigta, un jūs varat pāriet uz apakšizvēlnes un tajā iekļauto apakšizvēlņu aprakstu.

Aprakstiet nolaižamo izvēlni CSS / HTML

Par mums atvērsim index.html un pievienojiet, piemēram, papildu izvēlni produktiem. Ievietojiet UL starp LI sarakstiem un ievietojiet tajā piecus sarakstus, kas satur saites ar atribūtu herf = ”#”.

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

Mēs nospiežam, lai pieteiktos, uzrakstiet priekšmetu nosaukumu ( Apģērbs, elektronika, pārtika, rīki, dzīve. Ķīmija ).

<ul> <li> <a href="#"> Apģērbi </a> </ li> <li> <a href="#"> Elektronika </a> </ li> <li> <a href = "#"> Pārtika </a> </ li> <li> <a href="#"> Rīki </a> </ li> <li> <a href="#"> Dzīve. ķīmija </a> </ li> </ ul>

Tad atveriet style.css un aprakstiet apakšizvēlnes stilus.

Mēs izvēlamies otro sarakstu un piešķiram to pozīcijai: absolūts; , iestatīsim minimālo platumu līdz 150 pīķiem.

/ * apakšizvēlne * / .dws-menu li ul {pozīcija: absolūta; min-platums: 150px; }

Rakstīsim pierobežas sarakstos vienu pīķi.

.dws-menu li> ul li {border: 1px ciets # c7c8ca; }

Par apakšizvēlnes saitēm mēs iestatīsim ievilkumus 10 virsotnēs., Noņemiet teksta pārveidošanu un padara fonu pāris toņu tumšāku fonu: # e4e4e5; .

.dws-menu li> ul li a {polsterējums: 10px; teksta pārveidošana: nav; fons: # e4e4e5; }

Pēc tam izveidojiet vēl vienu apakšizvēlni. Dodieties uz iezīmēšanas failu un, piemēram, "Elektronika" veidlapā pēc analoģijas izvēlnes, kā mēs iepriekš. Mēs aprakstām priekšmetu virsrakstus ( kameras, datori, tālruņi ) un saglabājam.

<li> <a href="#"> Elektronika </a> <ul> <li> <a href="#"> Kameras </a> </ li> <li> <a href="#"> Datori </a> </ li> <li> <a href="#"> Tālruņi </a> </ li> </ ul> </ li>

Viņi tika izvilkti, bet paslēpti zem galvenās izvēlnes, tagad ir: absolūti; ligzdo UL un pārvieto to uz 150 maksimumu. uz sāniem:

.dws-menu li> ul li ul [pozīcija: absolūta; pa labi: -150px; tops: 0; }

Tālāk mēs parādīsim apakšizvēlni, kad tiks atlasīti galvenie augšējā izvēlnes elementi, jo mēs pievienojam displeju: neviens; un tādējādi slēpt visus iekšējos punktus.

/ * apakšizvēlne * / .dws-menu li ul {pozīcija: absolūta; min-platums: 150px; displejs: nav; }

Un to izskatu, mēs atlasīsim sarakstus uz lidojuma un parādīsim tos ar displeja palīdzību: bloks; .

.dws-menu li: hover> ul {displejs: bloks; }

Tagad jūs varat pievienot daudzlīmeņu izvēlnes, vienkārši kopējot UL bloku, mainot tās vienumus.

<ul> <li> <a href="#"> <i class = "fa fa-home"> </ i> Sākums </a> </ li> <li> <a href="#"> < i class = "fa fa-shopping-cart"> </ i> Produkti </a> <ul> <li> <a href="#"> Apģērbi </a> <ul> <li> <a href = "#"> Kurpes </a> </ li> <li> <a href="#"> Jakas </a> </ li> <li> <a href="#"> Bikses </a> < / li> </ ul> </ li> <li> <a href="#"> Elektronika </a> <ul> <li> <a href="#"> Kameras </a> </ li> <li> <a href="#"> Datori </a> </ li> <li> <a href="#"> Tālruņi </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="#"> Pārtika </a> </ li> <li> <a href="#"> Rīki </ h a> </ li> <li> <a href="#"> Gen. ķīmija </a> </ li> </ ul> </ li> <li> <a href="#"> <i class = "fa fa-cogs"> </ i> Pakalpojumi </a> <ul > <li> <a href="#"> 1. serviss </a> </ li> <li> <a href="#"> 2. serviss </a> </ li> <li> <a href = "#"> Pakalpojums 3 </a> </ li> </ ul> </ li> <li> <a href="#"> <i class = "fa fa-th-list"> </ i> Jaunumi </a> </ li> <li> <a href="#"> <i class = "fa fa-aploksne atvērta"> </ i> Kontakti </a> </ li> </ ul>

Tad pabeidziet pogas ar pogām. Es izmantoju, esmu izveidojis vairākus iepriekšējus iestatījumus, jūs varat izveidot savu, manā gadījumā, es tikai kopēju šo kodu un ievietoju to iepriekšējās fona vietā.

.dws-menu> ul li a {displejs: bloks; / * Permalink - šis gradients: http://colorzilla.com/gradient-editor/#c9c9c9+0,f6f6f6+2,c4c5c7+98.757577+100;Custom+3 * / fons: # c9c9c9 ; / * Vecās pārlūkprogrammas * / fons: -moz-lineārs gradients (augšā, # c9c9c9 0%, # f6f6f6 2%, # c4c5c7 98%, # 757577 100%); / * FF3.6-15 * / fons: -webkit-lineārs gradients (augšā, # c9c9c9 0%, # f6f6f6 2%, # c4c5c7 98%, # 757577 100%); / * Chrome10-25, Safari5.1-6 * / fons: lineārs gradients (uz leju, # c9c9c9 0%, # f6f6f6 2%, # c4c5c7 98%, # 757577 100%); / * W3C, IE10 +, FF16 +, Chrome26 +, Opera12 +, Safari7 + * / filtrs: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# c9c9c9', endColorstr = '# 757577', GradientType = 0); / * IE6-9 * / polsterējums: 15px 30px 15px 40px; fonta lielums: 14px; krāsa: # 454547; teksta apdare: nav; teksta pārveidošana: lielie burti; pāreja: visi 0.3s vieglumu; } .dws-menu li a: hover {/ * Permalink - šis gradients: http://colorzilla.com/gradient-editor/#e0e1e5+0.454547+2.454547+98,e0e1e5+100 * / fons: # e0e1e5; / * Vecās pārlūkprogrammas * / fons: -moz-lineārs gradients (augšā, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * FF3.6-15 * / fons: -veikals-lineārs gradients (augšā, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * Chrome10-25, Safari5.1-6 * / fons: lineārs gradients (uz leju, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * W3C, IE10 +, FF16 +, Chrome26 +, Opera12 +, Safari7 + * / filtrs: progid: DXImageTransform Microsoft.gradient (startColorstr = '# e0e1e5', endColorstr = '# e0e1e5', GradientType = 0); / * IE6-9 * / krāsa: #ffffff; kastes ēna: 1px 5px 10px -5px melna; pāreja: visi 0.3s vieglumu; } dws-menu> ul li a {displejs: bloks;  / * Permalink - šis gradients: http://colorzilla

Ja vēlaties, šo izvēlni var veidot tā, lai mēs to piemērotu jūsu vietnei, pietiek ar to, lai radītu krāsu un aizstātu to ar kodu. Izrādījās vienkārša un vienlaikus jauka horizontāla izvēlne, kas izgatavota tīrā CSS.

Atstāt komentāru:

Провайдеры:
  • 08.09.2015

    Batyevka.NET предоставляет услуги доступа к сети Интернет на территории Соломенского района г. Киева.Наша миссия —... 
    Читать полностью

  • 08.09.2015
    IPNET

    Компания IPNET — это крупнейший оператор и технологический лидер на рынке телекоммуникаций Киева. Мы предоставляем... 
    Читать полностью

  • 08.09.2015
    Boryspil.Net

    Интернет-провайдер «Boryspil.net» начал свою работу в 2008 году и на данный момент является одним из крупнейших поставщиков... 
    Читать полностью

  • 08.09.2015
    4OKNET

    Наша компания работает в сфере телекоммуникационных услуг, а именно — предоставлении доступа в сеть интернет.Уже... 
    Читать полностью

  • 08.09.2015
    Телегруп

    ДП «Телегруп-Украина» – IT-компания с 15-летним опытом работы на рынке телекоммуникационных услуг, а также официальный... 
    Читать полностью

  • 08.09.2015
    Софтлинк

    Высокая скоростьМы являемся участником Украинского центра обмена трафиком (UA — IX) с включением 10 Гбит / сек... 
    Читать полностью