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

„Pure CSS / HTML“ išskleidžiamajame meniu

  1. „Pure CSS / HTML“ išskleidžiamajame meniu Šioje pamokoje mes atliksime klasikinį horizontalų meniu gryname CSS. Juose yra piktogramos sąrašuose. Nurodydamas elementą, jis sklandžiai keičia mygtuko ir teksto spalvą, pridedamas šešėlis. Išskleidžiamieji sąrašai gali būti sudaromi daugiapakopiais, o pagrindinis dalykas yra paprasčiausiai įgyvendinamas gryname CSS3. Šios pamokos tęsimas čia - 2 dalis MOBILIO VERSIJOS horizontalus meniu ". Žr. Švirkštimo priemonę POyzbW pateikė Denis ( @Dwstroy ) Codepen . Pamokos naudojimo metu: ekranas: flex; naudoti perėjimą; padėkite elementus į padėtį. HTML horizontali meniu struktūra
  2. Mes nukreipiame horizontalųjį meniu, rodydami.
  3. Apibūdinkite išskleidžiamąjį meniu CSS / HTML

„Pure CSS / HTML“ išskleidžiamajame meniu

Šioje pamokoje mes atliksime klasikinį horizontalų meniu gryname CSS. Juose yra piktogramos sąrašuose. Nurodydamas elementą, jis sklandžiai keičia mygtuko ir teksto spalvą, pridedamas šešėlis. Išskleidžiamieji sąrašai gali būti sudaromi daugiapakopiais, o pagrindinis dalykas yra paprasčiausiai įgyvendinamas gryname CSS3.

Šios pamokos tęsimas čia - 2 dalis MOBILIO VERSIJOS horizontalus meniu ".

Žr. Švirkštimo priemonę POyzbW pateikė Denis ( @Dwstroy ) Codepen .

Pamokos naudojimo metu:

  • ekranas: flex;
  • naudoti perėjimą;
  • padėkite elementus į padėtį.

HTML horizontali meniu struktūra

Pirma, užrašykite žymėjimą po horizontaliu meniu. Mano atveju, mes atidarome savo vystymosi aplinką, tai yra „PhpStorm“, sukuriame index.html failą, nurodome rėmelį html: 5, pakeiskite „lang“ su „ru“.

Visi meta bus ištrinti, išskyrus kodavimą, registruosiu pavadinimą „ Tom meniu “.

Tarp kūno rašome antraštės žymą, ir jame yra blokas su klasės .dws meniu, kuriame bus mūsų meniu. Toliau struktūra bus tokia, kad sudarysime penkių dalių sąrašus. Kiekviename sąraše bus nuoroda į atributą href = "#". Tada aš eisiu į piktogramą su klase .fa .fa-

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

Mes norime taikyti.

Užrašykime meniu elementų pavadinimą ( Pradžia, Produktai, Paslaugos, Naujienos, Kontaktai ).

Tada pasirinkite ir prijunkite piktogramas. Eikite į svetainę, pasirinksime šių meniu elementų piktogramas:

<i class = "fa fa- home "> </ i> <i class = "fa fa- pirkinių krepšelis "> </ i> <i class = "fa faogs"> </ i> <i klasė = "fa fa -list "> </ i> <i class = "fa fa -open-open "> </ i>

<i class = fa fa- home > </ i> <i class = fa fa- pirkinių krepšelis > </ i> <i class = fa faogs> </ i> <i klasė = fa fa -list > </ i> <i class = fa fa -open-open > </ i>

Atsisiųskite archyvą iš svetainės su piktogramomis, ištraukite jo turinį į kompiuterį, nukopijuokite šriftų aplanką ir css aplanką į savo vystymosi aplinką.

Šriftų aplanke yra piktogramų šriftai, o css aplanke yra jų stiliai. Suspaustus stilius galima pašalinti šriftu-awesome.min, mes sujungiame nesuspaustą šriftą-awesome.css.

Index.html mes sujungiame piktogramas ir registruojame kiekvieną elementą, turintį savo piktogramos stilių ( namuose , pirkinių krepšeliuose , krumplių , sąrašų , vokų atidarymo ).

Sukūrėme pagrindinį rėmą, po pagrindinio stiliaus aprašymo sukuriame submeniu, o dabar mes sukursime failą, kuriame aprašysime pagrindinius horizontalių meniu stilių stilius.css ir prijungsime jį prie index.html. Jei norite patikrinti, ar stiliai yra prijungti, sukurkite aplanką „img“, kuriame fone bus pateikiamas savavališkas vaizdas. Parašykime paveikslėlį, naudodami foną.

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

Kaip matome, viskas buvo rodoma ir tada pereisime prie stilių aprašymo.

Visų pirma, iš naujo nustatykite visas įtraukas, kurias skirtingos naršyklės gali nustatyti pagal numatytuosius nustatymus:

.dws-meniu * {marža: 0; įdėklas: 0; }

Nustatykite antraštę į 200 smailių. ir priskirkite, kuriuos galite parsisiųsti ir atskirai prisijungti prie savęs svetainėje, tik tuo atveju, parašykite papildomus šriftus.

antraštė {paraštė: 200px; šrifto šeima: Cuprum, Arial, Helvetica, sans-serif; }

Slėpti žymenis sąrašuose:

.dws-menu ul, .dws-menu ol {list-style: nėra; }

Sąrašai bus rodomi horizontaliai su ekranu: linai, ir mes tai padarysime centre:

.dws-menu> ul {ekranas: flex; pateisinti turinį: centras; }

Antraštėje mes įtrauksime tik viršutinę dalį, mes parašysime „margin-top“.

antraštė { margin-top: 200px; šrifto šeima: Cuprum, Arial, Helvetica, sans-serif; }

Suprojektuokite meniu, nustatykite mygtukų, šrifto ir kt. Spalvą.

Pasirinkite nuorodas nav> ul li ir padarykite jas blokiniais elementais. Nustatykite meniu foną, rašykite įtraukas, nurodykite dydį, spalvą, pašalinkite pabraukimą ir antraštes rašykite didžiosiomis raidėmis.

.dws-menu> ul li a {ekranas: blokas; fonas: #ececed; paminkštinimas: 15px 30px 15px 40px; šrifto dydis: 14px; spalva: # 454547; teksto apdaila: nėra; teksto transformavimas: didžiosios; }

Tada padėkite piktogramas, priskirkite sąrašus pozicijai: santykinis; toliau derinti piktogramas:

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

Be to, mes pasirenkame piktogramas, išdėstome jas absoliučiai, kad iš viršaus būtų įdėta 15 smailių, iš kairiųjų 12 smailių, padidinkite dydį iki 18 smailių.

.dws-menu> ul li> a i.fa {pozicija: absoliutus; viršuje: 15px; kairėje: 12px; šrifto dydis: 18px; }

Paskirti skirstytuvą sienos forma, pasirinkite pirmąjį LI elementą, nustatykite sieną. Pasirenkame paskutinį elementą LI ir priskiriame jį panašiai.

.dws-menu> ul li: pirmasis vaikas {sienos kairėje: 1px kietas # b2b3b5; } .dws-menu> ul li: paskutinis vaikas {dešinė pusė: 1px kietas #babbbd; }

LIT sąrašų ribotojų kūrimas:

.dws-menu> ul li {pozicija: santykinis; dešinė pusė: 1px kietas # c7c8ca; }

Meniu įgijo išvaizdą, tada galite pereiti prie stilių aprašymo judėjimo metu.

Mes nukreipiame horizontalųjį meniu, rodydami.

Pasirinkite nuorodas ir priskirkite spalvą blokui ir priskirkite saitos spalvą su piktograma į baltą. Pridėkime dar vieną tamsią šešėlį. Per 0,3 sekundžių pereinamojo laikotarpio pagalba padarysime sklandžią išvaizdą:

.dws-meniu li a: hover {background: # 454547; spalva: #ffffff; dėžutės šešėlis: 1px 5px 10px -5px juodas; perėjimas: visi 0.3s lengviau; }

Jei norite, kad šis efektas išnyktų sklandžiai, pridėkite šį stilių į saitą:

.dws-menu> ul li a {ekranas: blokas; fonas: #ececed; paminkštinimas: 15px 30px 15px 40px; šrifto dydis: 14px; spalva: # 454547; teksto apdaila: nėra; teksto transformavimas: didžiosios; perėjimas: visi 0.3s lengviau; }

Pagrindinis meniu yra baigtas, ir galite pereiti į submeniu ir į juos įdėtus submeniu.

Apibūdinkite išskleidžiamąjį meniu CSS / HTML

Apie mes atidarome index.html ir pridedame, pavyzdžiui, papildomą meniu. Įterpkite UL tarp LI sąrašų ir įdėkite penkis sąrašus, kuriuose bus nuorodos su atributu herf = ”#”.

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

Mes paspaudžiame, kad galėtume taikyti, parašyti daiktų pavadinimą ( Drabužiai, elektronika, maistas, įrankiai, gyvenimas. Chemija ).

<ul> <li> <a href="#"> Drabužiai </a> </ li> <li> <a href="#"> Elektronika </a> </ li> <li> <a href = „#“> Maistas </a> </ li> <li> <a href="#"> Įrankiai </a> </ li> <li> <a href="#"> Gyvenimas. chemija </a> </ li> </ ul>

Tada atidarykite style.css ir aprašykite submeniu stilius.

Pasirenkame antrąjį sąrašą ir priskiriame jį: absoliutus; , nustatykite minimalų plotį iki 150 smailių.

/ * submeniu * / .dws-menu li ul {pozicija: absoliutus; min. plotis: 150px; }

Rašykime į pasienio sąrašus 1 smailėje.

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

Nuorodose, esančiose submeniu, nustatysime dešimties smailių įtraukas, pašalinsime teksto transformaciją ir tapsime tamsesniais fonais pora tonų: # e4e4e5; .

.dws-menu li> ul li a {padding: 10px; teksto transformacija: nėra; fonas: # e4e4e5; }

Tada sukurkite kitą submeniu. Eikite į žymėjimo failą ir, pavyzdžiui, „Elektronika“ formą pagal analogiją, kaip ir anksčiau. Apibūdiname elementų antraštes ( fotoaparatai, kompiuteriai, telefonai ) ir išsaugokite.

<li> <a href="#"> Elektronika </a> <ul> <li> <a href="#"> Fotoaparatai </a> </ li> <li> <a href="#"> Kompiuteriai </a> </ li> <li> <a href="#"> Telefonai </a> </ li> </ ul> </ li>

Jie buvo išvežti, bet paslėpti po pagrindiniu meniu, dabar padėtis: absoliutus; įdėta UL ir perkeliama į 150 piko viršūnę. į šoną:

.dws-menu li> ul li ul {pozicija: absoliutus; dešinėje: -150px; viršuje: 0; }

Toliau pasirodysime submeniu, kai nukreipsime į pagrindinius viršutinio meniu elementus, nes tai pridedame ekraną: nėra; ir taip paslėpti visus vidinius taškus.

/ * submeniu * / .dws-menu li ul {pozicija: absoliutus; min. plotis: 150px; ekranas: nėra; }

Ir jų išvaizdai parinksime sąrašus, esančius užvažiuojant, ir parodysime juos ekrano pagalba: blokas; .

.dws-menu li: hover> ul {ekranas: blokas; }

Dabar galite pridėti daugiapakopius meniu tiesiog kopijuodami UL bloką, keisdami jo elementus.

<ul> <li> <a href="#"> <i class = "fa fa-home"> </ i> Pagrindinis </a> </ li> <li> <a href="#"> < i class = "fa fa-shopping-cart"> </ i> Produktai </a> <ul> <li> <a href="#"> Drabužiai </a> <ul> <li> <a href = „#“> Batai </a> </ li> <li> <a href="#"> Striukės </a> </ li> <li> <a href="#"> Kelnės </a> < / li> </ ul> </ li> <li> <a href="#"> Elektronika </a> <ul> <li> <a href="#"> Fotoaparatai </a> </ li> <li> <a href="#"> Kompiuteriai </a> </ li> <li> <a href="#"> Telefonai </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="#"> Maistas </a> </ li> <li> <a href="#"> Įrankiai </ h a> </ li> <li> <a href="#"> Gen. chemija </a> </ li> </ ul> </ li> <li> <a href="#"> <i class = "fa fa-cogs"> </ i> Paslaugos </a> <ul > <li> <a href="#"> 1 paslauga </a> </ li> <li> <a href="#"> 2 paslauga </a> </ li> <li> <a href = „#“> Paslauga 3 </a> </ li> </ ul> </ li> <li> <a href="#"> <i class = "fa fa-th-list"> </ i> Naujienos </a> </ li> <li> <a href="#"> <i class = "fa fa-envelope-open"> </ i> Kontaktai </a> </ li> </ ul>

Tada baigsime mygtukus su mygtukais. Aš naudoju, sukūriau kelis Presets, galite sukurti savo, mano atveju, aš tiesiog nukopijuoju šį kodą ir įdėjau į fono vietą, kurią parašiau anksčiau.

.dws-menu> ul li a {ekranas: blokas; / * Permalink - šis gradientas: http://colorzilla.com/gradient-editor/#c9c9c9+0,f6f6f6+2,c4c5c7+98.757577+100;Custom+3 * / background: # c9c9c9 ; / * Senas naršyklės * / fonas: -moz-linijinis gradientas (viršuje, # c9c9c9 0%, # f6f6f6 2%, # c4c5c7 98%, # 757577 100%); / * FF3.6-15 * / fonas: -webkit-tiesinis gradientas (viršuje, # c9c9c9 0%, # f6f6f6 2%, # c4c5c7 98%, # 757577 100%); / * Chrome10-25, Safari5.1-6 * / fonas: tiesinis gradientas (iki apačios, # c9c9c9 0%, # f6f6f6 2%, # c4c5c7 98%, # 757577 100%); / * W3C, IE10 +, FF16 +, Chrome26 +, Opera12 +, Safari7 + * / filtras: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# c9c9c9', endColorstr = '# 757577', GradientType = 0); / * IE6-9 * / padding: 15px 30px 15px 40px; šrifto dydis: 14px; spalva: # 454547; teksto apdaila: nėra; teksto transformavimas: didžiosios; perėjimas: visi 0.3s lengviau; } .dws-menu li a: hover {/ * Permalink - šis gradientas: http://colorzilla.com/gradient-editor/#e0e1e5+0.454547+2.454547+98,e0e1e5+100 * / fonas: # e0e1e5; / * Senas naršyklės * / fonas: -moz-linijinis gradientas (viršutinis, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * FF3.6-15 * / fonas: -webkit-tiesinis gradientas (viršutinis, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * Chrome10-25, Safari5.1-6 * / fonas: tiesinis gradientas (iki apačios, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * W3C, IE10 +, FF16 +, Chrome26 +, Opera12 +, Safari7 + * / filtras: progid: DXImageTransform Microsoft.gradient (startColorstr = '# e0e1e5', endColorstr = '# e0e1e5', GradientType = 0); / * IE6-9 * / spalva: #ffffff; dėžutės šešėlis: 1px 5px 10px -5px juodas; perėjimas: visi 0.3s lengviau; } dws-menu> ul li a {ekranas: blokas;  / * Permalink - šis gradientas: http://colorzilla

Jei pageidaujate, šis meniu gali būti sukurtas tam, kad galėtume jums tinkančius svetainėje, tik pakanka sukurti spalvą ir pakeisti ją į kodą. Paaiškėjo, kad paprastas ir tuo pačiu gražus horizontalus meniu, pagamintas gryname CSS.

Palikite komentarą:



Новости
    Без плагина
    На сайте 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) — поднятие позиций сайта в результатах... 
    Читать полностью