<
  • Главная
Статьи

Pure CSS / HTML rozbaľovacie menu

  1. Pure CSS / HTML rozbaľovacie menu V tomto návode vytvoríme klasické horizontálne menu na čistej CSS....
  2. Horizontálne menu počas animácie animujeme.
  3. Popíšte rozbaľovaciu ponuku CSS / HTML

Pure CSS / HTML rozbaľovacie menu

V tomto návode vytvoríme klasické horizontálne menu na čistej CSS. Má v zoznamoch ikony. Keď ukazujete na položku, plynule mení farbu tlačidla a textu, pridáva sa tieň. Rozbaľovacie zoznamy možno vytvoriť na viacerých úrovniach a hlavná vec je jednoducho jednoducho implementovaná na čistom CSS3.

Pokračovanie tejto lekcie tu - časť 2 MOBILNÉ VERZIE horizontálne menu ".

Pozrite si pero POyzbW autor: Denis ( @Dwstroy ) na CodePen ,

Pri použití lekcie:

  • displej: flex;
  • použitie prechodu;
  • umiestnite prvky s polohou.

Štruktúra HTML horizontálnej ponuky

Najprv napíšte označenie pod horizontálne menu. Otvoríme naše vývojové prostredie v mojom prípade, to je PhpStorm, vytvorte súbor index.html, predpíšte rám html: 5, nahraďte lang ru.

Všetky meta budú vymazané okrem kódovania, zaregistrujem svoj názov „ Tom menu “.

Medzi telom napíšeme záhlavie tagu, v ktorom je blok s menu .dws, ktorý bude obsahovať naše menu. Ďalej bude štruktúra nasledujúca, vytvoríme zoznamy vo výške piatich kusov. V každom zozname bude odkaz na atribút href = "#". Potom pôjdem na ikonu s triedou .fa .fa-

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

Tlačíme, aby sme sa prihlásili.

Zapíšte si názov položky menu ( Domov, Produkty, Služby, Správy, Kontakty ).

Potom vyberte a pripojte ikony. Prejdite na stránku, vyberieme ikony pre tieto položky ponuky:

<i class = "fa fa- home "> </ i> <i class = "fa fa- shopping- cart "> </ i> <i class = "fa fa- cogs "> </ i> <i trieda = "fa fa- th-list "> </ i> <i class = "fa fa -obálka-otvorená "> </ i>

<i class = fa fa- home > </ i> <i class = fa fa- shopping- cart > </ i> <i class = fa fa- cogs > </ i> <i trieda = fa fa- th-list > </ i> <i class = fa fa -obálka-otvorená > </ i>

Stiahnite si archív z webu pomocou ikon, extrahujte jeho obsah do počítača, skopírujte priečinok fontov a priečinok css do vývojového prostredia.

Priečinok fontov obsahuje ikonové fonty a priečinok css obsahuje ich štýly. Komprimované štýly možno odstrániť font-awesome.min, pripojíme nekomprimovaný font-awesome.css.

V index.html spájame ikony a každú položku zaregistrujeme s vlastným štýlom ikon ( domov , nákupný košík , ozubené kolesá , th-list , obálka-otvorené ).

Urobili sme hlavný rámec, vytvorili podmenu po popise hlavného štýlu a teraz vytvoríme súbor, v ktorom popíšeme hlavné štýly horizontálneho menu style.css a pripojíme ho k index.html. Ak chcete skontrolovať, či sú štýly pripojené, vytvorte img priečinok, do ktorého umiestnim ľubovoľný obrázok na pozadí. Poďme zapísať obrazové spojenie pomocou pozadia.

body {background-image: url ("../ img / ep_naturalwhite.png"); }

Ako vidíme, všetko bolo zobrazené a potom prejdeme k opisu štýlov.

Po prvé, obnovme všetky zarážky, ktoré môžu predvolene nastaviť rôzne prehliadače:

.dws-menu * {margin: 0; vypchávka: 0; }

Nastavte hlavičku na 200 píkov. a priradiť, ktoré si môžete stiahnuť a samostatne sa pripojiť na stránku, len v prípade, písať ďalšie fonty.

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

Skryť značky v zoznamoch:

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

Zoznamy sa zobrazia horizontálne s displejom: ľan a urobíme to v strede:

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

V hlavičke budeme odsadiť iba vrch, napíšeme okrajovú hranu.

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

Poďme navrhnúť naše menu, nastaviť farbu tlačidiel, písmo atď.

Vyberte odkazy nav> ul li a vytvorte z nich prvky bloku. Nastavenie pozadia ponuky, písanie odsadení, určenie veľkosti, farby, odstránenie podčiarkovníka a vytvorenie nadpisov veľkými písmenami.

.dws-menu> ul li a {zobraziť: blok; pozadie: #ececed; polstrovanie: 15x 30px 15px 40px; veľkosť písma: 14px; farba: # 454547; text-decoration: žiadne; text-transform: veľké písmená; }

Potom umiestnite ikony, priradiť zoznamy pozíciám: relatívna; pre ďalšie zarovnanie ikon:

.dws-menu> ul li {position: relatívna; }

Ďalej vyberieme ikony, umiestnime ich absolútne, urobíme odsadenie zhora na 15 vrcholoch, z ľavých 12 vrcholov zväčšíme veľkosť na 18 vrcholov.

.dws-menu> ul li> a i.fa {pozícia: absolútna; top: 15px; vľavo: 12x; veľkosť písma: 18px; }

Priraďte oddeľovač vo forme ohraničenia do zoznamu, vyberte prvý prvok LI, nastavte hranicu. Vyberieme posledný prvok LI a priradíme mu podobnú hranicu.

.dws-menu> ul li: prvé dieťa {border-left: 1px pevné # b2b3b5; } .dws-menu> ul li: last-child {border-right: 1px pevné #babbbd; }

Oddeľovače pre zoznamy LI:

.dws-menu> ul li {position: relatívna; border-right: 1px pevné # c7c8ca; }

Menu získalo vzhľad, potom môžete prejsť na popis štýlov počas vznášania.

Horizontálne menu počas animácie animujeme.

Vyberte prepojenia a priradte farbu bloku a priradiť farbu samotného prepojenia s ikonou na bielu. Pridajme ďalší tmavý tieň. S pomocou prechodu za 0,3 sekundy urobíme hladký vzhľad:

.dws-menu li a: hover {background: # 454547; farba: #ffffff; box-shadow: 1px 5px 10px -5px čierna; prechod: všetky 0.3s ľahko; }

A aby tento efekt zmizol hladko, pridajte tento štýl do odkazu:

.dws-menu> ul li a {zobraziť: blok; pozadie: #ececed; polstrovanie: 15x 30px 15px 40px; veľkosť písma: 14px; farba: # 454547; text-decoration: žiadne; text-transform: veľké písmená; prechod: všetky 0.3s ľahko; }

Hlavné menu je ukončené a môžete prejsť na popis podponuky a podmenu vložených v nich.

Popíšte rozbaľovaciu ponuku CSS / HTML

O nás otvoríme index.html a pridáme napríklad ďalšie menu k produktom. Vložte UL medzi zoznamy LI a umiestnite do neho päť zoznamov, ktoré budú obsahovať odkazy s atribútom herf = ”#”.

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

Tlačíme aplikovať, napísať názov položky ( Oblečenie, Elektronika, Potraviny, Nástroje, Život. Chémia ).

<ul> <li> <a href="#"> Oblečenie </a> </ li> <li> <a href="#"> Elektronika </a> </ li> <li> <a href = "#"> Jedlo </a> </ li> <li> <a href="#"> Nástroje </a> </ li> <li> <a href="#"> Život. chémia </a> </ li> </ ul>

Potom otvorte style.css a popíšte štýly submenu.

Vyberieme druhý zoznam a priradíme mu pozíciu: absolútna; , nastavme minimálnu šírku na 150 vrcholov.

/ * podmenu * / .dws-menu li ul {position: absolútne; min-width: 150px; }

Píšeme na hraničné zoznamy na 1 vrchol.

.dws-menu li> ul li {hranica: 1px pevná # c7c8ca; }

Pre prepojenia v podmenu nastavíme odsadenia na 10 vrcholov., Odstráňte transformáciu textu a urobte z pozadia niekoľko tónov tmavšieho pozadia: # e4e4e5; ,

.dws-menu li> ul li a {padding: 10px; text-transform: none; pozadie: # e4e4e5; }

Potom vytvorte ďalšie podmenu. Prejdite do značkovacieho súboru a napríklad do formulára "Elektronika" podľa analógového menu, ako sme to urobili predtým. Opíšeme záhlavia položiek ( Kamery, Počítače, Telefóny ) a uložíme.

<li> <a href="#"> Elektronika </a> <ul> <li> <a href="#"> Fotoaparáty </a> </ li> <li> <a href="#"> Počítače </a> </ li> <li> <a href="#"> Telefóny </a> </ li> </ ul> </ li>

Boli vyvedené, ale skryté v hlavnom menu, teraz pozícia: absolútna; vnorené UL a presunúť ho na vrchol 150. na stranu:

.dws-menu li> ul li ul {pozícia: absolútne; vpravo: -150px; hore: 0; }

Následne sa zobrazí podmenu, keď sa zameriame na hlavné položky hlavného menu, preto pridáme zobrazenie: žiadne; a tým skryť všetky vnútorné body.

/ * podmenu * / .dws-menu li ul {position: absolútne; min-width: 150px; zobrazenie: žiadne; }

A pre ich vzhľad vyberieme zoznamy na displeji a zobrazíme ich pomocou displeja: block; ,

.dws-menu li: hover> ul {zobraziť: blok; }

Teraz môžete pridať viacúrovňové ponuky jednoducho tak, že skopírujete blok UL a zmeníte jeho položky.

<ul> <li> <a href="#"> <i class = "fa fa-home"> </ i> Domov </a> </ li> <li> <a href="#"> < i class = "fa fa-shopping-cart"> </ i> Produkty </a> <ul> <li> <a href="#"> Oblečenie </a> <ul> <li> <a href = "#"> Topánky </a> </ li> <li> <a href="#"> Bundy </a> </ li> <li> <a href="#"> Nohavice </a> < / li> </ ul> </ li> <li> <a href="#"> Elektronika </a> <ul> <li> <a href="#"> Kamery </a> </ li> <li> <a href="#"> Počítače </a> </ li> <li> <a href="#"> Telefóny </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="#"> Potraviny </a> </ li> <li> <a href="#"> Nástroje </ h a> </ li> <li> <a href="#"> Gen. chémia </a> </ li> </ ul> </ li> <li> <a href="#"> <i class = "fa fa-cogs"> </ i> Služby </a> <ul > <li> <a href="#"> Služba 1 </a> </ li> <li> <a href="#"> Služba 2 </a> </ li> <li> <a href = "#"> Služba 3 </a> </ li> </ ul> </ li> <li> <a href="#"> <i class = "fa fa-th-list"> </ i> Novinky </a> </ li> <li> <a href="#"> <i class = "fa fa-envelope-open"> </ i> Kontakty </a> </ li> </ ul>

Potom dokončíme tlačidlá tlačidlami. Používam, vytvoril som niekoľko Presetov, môžete si vytvoriť svoj vlastný, v mojom prípade som len skopírovať tento kód a umiestniť ho do pozadia, ktoré som napísal predtým.

.dws-menu> ul li a {zobraziť: blok; / * Permalink - tento gradient: http://colorzilla.com/gradient-editor/#c9c9c9+0,f6f6f6+2,c4c5c7+98.757577+100;Custom+3 * / background: # c9c9c9 ; / * Staré prehliadače * / pozadia: -moz-lineárny gradient (hore, # c9c9c9 0%, # f6f6f6 2%, # c4c5c7 98%, # 757577 100%); / * FF3,6-15 * / pozadie: -webk-lineárny gradient (hore, # c9c9c9 0%, # f6f6f6 2%, # c4c5c7 98%, # 757577 100%); / * Chrome10-25, Safari5.1-6 * / background: lineárny gradient (na dno, # 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 * / polstrovanie: 15px 30px 15px 40px; veľkosť písma: 14px; farba: # 454547; text-decoration: žiadne; text-transform: veľké písmená; prechod: všetky 0.3s ľahko; } .dws-menu li a: hover {/ * Permalink - tento gradient: http://colorzilla.com/gradient-editor/#e0e1e5+0.454547+2.454547+98,e0e1e5+100 * / pozadie: # e0e1e5; / * Staré prehliadače * / pozadia: -moz-lineárny gradient (hore, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * FF3,6-15 * / pozadie: -webk-lineárny gradient (horný, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * Chrome10-25, Safari5.1-6 * / pozadie: lineárny gradient (na spodok, # 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 * / farba: #ffffff; box-shadow: 1px 5px 10px -5px čierna; prechod: všetky 0.3s ľahko; } dws-menu> ul li a {zobraziť: blok;  / * Permalink - tento gradient: http://colorzilla

Ak si želáte, toto menu môže byť navrhnuté pre štýl, ktorý sme pre vás na stránke vhodný, stačí len vygenerovať farbu a nahradiť ju kódom. Ukázalo sa, že jednoduché a zároveň pekné horizontálne menu, vyrobené v čistej CSS.

Zanechať komentár:



Новости
  • Виртуальный хостинг

    Виртуальный хостинг. Возможности сервера распределяются в равной мере между всеми... 
    Читать полностью

  • Редизайн сайта

    Редизайн сайта – это полное либо частичное обновление дизайна существующего сайта.... 
    Читать полностью

  • Консалтинг, услуги контент-менеджера

    Сопровождение любых интернет ресурсов;- Знание HTML и CSS- Поиск и обновление контента;-... 
    Читать полностью

  • Трафик из соцсетей

    Сравнительно дешевый способ по сравнению с поисковым и контекстным видами раскрутки... 
    Читать полностью

  • Поисковая оптимизация

    Поисковая оптимизация (англ. search engine optimization, SEO) — поднятие позиций сайта в результатах... 
    Читать полностью