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

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:



Новости
    Без плагина
    На сайте WordPress имеется файл, именуемый как .htaccess. Многие пользователи не предают ему особого внимания и не используют все его возможности. На самом деле файл .htaccess – это дополнительные конфигурации

    Плагин подписки wordpress
    Очень трудно найти один плагин подписки wordpress , который объединил бы в себе все виды подписок, которые так необходимы сайту. Именно поэтому я решил сделать подборку лучших плагинов, которые смогут

    Слайд-шоу с помощью плагина для WordPress UnPointZero Slider
    Плагин для cms WordPress UnPointZero Slider – новостной слайдер. Он отражает в форме слайд-шоу изображения со ссылками на ваши статьи и краткие выдержки оттуда. Его можно установить и на новостной сайт,

    Плагины для Wordpress
    С помощью этого плагина вы легко сможете интегрировать Google диск на ваш WordPress сайт или блог . Gravity Forms — лучший плагин для создания форм на WordPress, от самых простых (например, форма

    Подписки плагином JetPack: размещение и редакция формы подписки
    Вступление Здравствуйте! В этой статье я покажу, как использовать плагин JetPack для создания пользовательской формы подписки и как эту формы подписки плагином JetPack добавлять в статьи сайта, а при

    Чистка сайта WordPress плагином WP-optimize
    От автора Со временем использования система WordPress накапливает не нужные файлы, комментарии и неиспользуемые данные в базе данных. Эти файлы и данные создаются в процессе работы и нужны для этого,

    Возможности Jetpack плагина
    Вступление Возможности Jetpack плагина это более 30 функциональных модуля плагина, делающего его универсальным плагином WordPress, заменяющего аналогичные сторонние плагины. Jetpack один заменяет десятки

    Резервное копирование WordPress сайта без плагинов
    Вступление Резервное копирование WordPress это второе, что нужно научиться делать после установки WordPress. Можно сколько угодно говорить о безопасности сайта и его защите, но лучшего варианта защиты

    Плагины на приват для Майнкрафт ПЕ
    > > Плагины на приват для Майнкрафт ПЕ Порой всем нам хочется попробовать себя в роли администратора сервера и испытать эту ответственность, но, к сожалению, вы не всегда все знаете о создании

    Плагин WordPress Database Backup. Архивация базы данных блога на WordPress
    Привет друзья! Сегодня на очереди еще один простой, НО, необходимый и полезный плагин — плагин WordPress Database Backup , который с легкостью и самостоятельно произведет процесс, который научно называется:

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

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

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

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

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

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

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

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

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

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