Выпадальнае меню на чыстым CSS / HTML

  1. Выпадальнае меню на чыстым CSS / HTML У гэтым уроку мы зробім, класічнае гарызантальнае меню на чыстым CSS. Яно мае абразкі ў спісах. Пры навядзенне на пункт ён плаўна змяняе колер кнопкі і тэксту, дадаецца цень. Выпадаючыя спісы можна рабіць шматузроўневымі і галоўнае гэта ўсё даволі проста рэалізавана на чыстым CSS3. Працяг дадзенага ўрока тут - 2 частка " Мабільная версія гарызантальнага меню ". See the Pen POyzbW by Denis ( @Dwstroy ) on CodePen . У ўроку задзейнічаем: display: flex; выкарыстоўваем transition; будзем пазіцыянаваць элементы пры дапамозе position. HTML структура гарызантальнага меню
  2. Анимируем гарызантальнае меню пры навядзенне
  3. Апісваем выпадальнае меню CSS / HTML

Выпадальнае меню на чыстым CSS / HTML

У гэтым уроку мы зробім, класічнае гарызантальнае меню на чыстым CSS. Яно мае абразкі ў спісах. Пры навядзенне на пункт ён плаўна змяняе колер кнопкі і тэксту, дадаецца цень. Выпадаючыя спісы можна рабіць шматузроўневымі і галоўнае гэта ўсё даволі проста рэалізавана на чыстым CSS3.

Працяг дадзенага ўрока тут - 2 частка " Мабільная версія гарызантальнага меню ".

See the Pen POyzbW by Denis ( @Dwstroy ) on CodePen .

У ўроку задзейнічаем:

  • display: flex;
  • выкарыстоўваем transition;
  • будзем пазіцыянаваць элементы пры дапамозе position.

HTML структура гарызантальнага меню

П ервым справай напішам разметку пад гарызантальнае меню. Адкрываем сваё асяроддзе распрацоўкі ў маім выпадку гэта PhpStorm, ствараем index.html файл, прапішам каркас html: 5, замяніўшы lang на ru.

Усе meta выдалю акрамя кадоўкі, прапішу свой загаловак «Tom menu».

Паміж body пішам тэг header, а ў ім блок з класам .dws-menu у якім будзе знаходзіцца наша меню. Далей структура будзе наступная, створым спісы ў колькасці пяці штук. У кожным спісе будзе спасылка з атрыбутам href = "#". Затым будзе ісці абразок I з класам .fa .fa-

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

Ціснем ўжыць.

Прапішам назву пунктаў меню (Галоўная, прадукцыя, Паслугі, Навіны, Кантакты).

Далей выбіраем ды падлучальны абразкі. Пераходзім на сайт, адбярэм сабе абразкі пад дадзеныя пункты меню:

<i class = "fa fa- home"> </ i> <i class = "fa fa- shopping- cart"> </ i> <i class = "fa fa- cogs"> </ i> <i class = "fa fa- th-list"> </ i> <i class = "fa fa- envelope-open"> </ i>

<i class = fa fa- home> </ i> <i class = fa fa- shopping- cart> </ i> <i class = fa fa- cogs> </ i> <i class = fa fa- th-list> </ i> <i class = fa fa- envelope-open> </ i>

Спампоўваем архіў з сайта з абразкамі, здабываем яго змесціва да сябе на кампутар, які капіюецца тэчку fonts і тэчку css ў сваю суполку распрацоўкі.

У тэчцы fonts ляжаць шрыфты абразкоў, а ў папцы css іх стылі. Сціснутыя стылі можна выдаліць font-awesome.min, падключым ня сціснуты font-awesome.css.

У index.html падлучальны абразкі, і прапісваем кожным пункце свой стыль абразкі (home, shopping-cart, cogs, th-list, envelope-open).

Асноўны каркас мы зрабілі, падменю сфармуем пасля апісання асноўнага стылю, а цяпер створым файл дзе будзем апісваць асноўныя стылі гарызантальнага меню style.css і падключым яго да index.html. Для праверкі, што стылі падлучаныя, ствару тэчку img, у ёй змясцую адвольную карцінку на задні фон. Прапішам падлучэнне карцінкі пры дапамозе background.

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

Як бачым у нас усё адлюстравалася і далей прыступім да апісання стыляў.

Перш за ўсё скінем ўсе водступы, якія могуць задаваць па змаўчанні розныя браўзэры:

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

Задамо header ў 200 пік. і прызначым які можна спампаваць і асобна падключыць да сябе на сайце, на ўсялякі выпадак прапішам дадатковыя шрыфты.

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

Схаваем маркеры ў спісаў:

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

Спісы адлюстраваў па гарызанталі пры дапамозе display: flax, і робім яго па цэнтры:

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

У header зробім водступ толькі зверху, прапішам margin-top.

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

Аформім наша меню, задамо колер кнопак, шрыфт і г.д.

Адбіраем спасылкі nav> ul li, і робім іх блокавымі элементамі. Задаем фон меню, прапішам водступы, пакажам памер, колер, прыбярэм падкрэсліванне, і зробім загалоўкі загалоўнымі літарамі.

.dws-menu> ul li a {display: block; background: #ececed; padding: 15px 30px 15px 40px; font-size: 14px; color: # 454547; text-decoration: none; text-transform: uppercase; }

Затым пазіцыянуем абразкі, спісах прысвоім position: relative; для далейшае цэнтроўкі абразкоў:

.dws-menu> ul li {position: relative; }

Далей адбіраем абразкі, пазіцыянуем іх абсалютна, водступ зверху робім у 15 пік., З лёва 12 пік, павялічым памер да 18 пік.

.dws-menu> ul li> a i.fa {position: absolute; top: 15px; left: 12px; font-size: 18px; }

Прызначым спісах падзельнік ў выглядзе бордюрчика, адбіраем першы элемент LI, задаем бардзюр. Адбіраем апошні элемент LI прысвойваем яму аналагічны бардзюр.

.dws-menu> ul li: first-child {border-left: 1px solid # b2b3b5; } .Dws-menu> ul li: last-child {border-right: 1px solid #babbbd; }

Робім падзельнікі спісах LI:

.dws-menu> ul li {position: relative; border-right: 1px solid # c7c8ca; }

Меню набыло знешні выгляд, потым можна пачынаць да апісання стыляў пры навядзенні.

Анимируем гарызантальнае меню пры навядзенне

Адбіраем спасылкі і прызначаем колер блоку, і колер самой спасылкі з абразком прысвоім белы. Давайце дадамо яшчэ цёмную цень. З дапамогай transition ў 0.3 сек зробім плыўнае з'яўленне:

.dws-menu li a: hover {background: # 454547; color: #ffffff; box-shadow: 1px 5px 10px -5px black; transition: all 0.3s ease; }

І што б гэты эфект плаўна знікаў, дадамо гэты стыль да спасылцы ў спакоі:

.dws-menu> ul li a {display: block; background: #ececed; padding: 15px 30px 15px 40px; font-size: 14px; color: # 454547; text-decoration: none; text-transform: uppercase; transition: all 0.3s ease; }

Асноўнае меню скончылі і можна прыступаць да апісання падменю і укладзеныя ў іх меню.

Апісваем выпадальнае меню CSS / HTML

Аб ткрываем index.html і дадамо, да прыкладу, у прадукцыю дадатковае меню. Паміж спісамі LI вставляем UL, у ім размесцім пяць спісаў, у якіх будуць знаходзіцца спасылкі з атрыбутам herf = "#".

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

Ціснем ўжыць, прапішам назву пунктаў (Адзенне, Электроніка, Прадукты харчавання, Інструменты, Быт. Хімія).

<Ul> <li> <a href="#"> Адзенне </a> </ li> <li> <a href="#"> Электроніка </a> </ li> <li> <a href = "#"> Прадукты харчавання </a> </ li> <li> <a href="#"> Інструменты </a> </ li> <li> <a href="#"> Быць. хімія </a> </ li> </ ul>

Затым адкрываем style.css і апішам стылі падменю.

Адбіраем другі спіс і прысвоім яму position: absolute; , Задамо мінімальную шырыню ў 150 пік.

/ * Sub menu * / .dws-menu li ul {position: absolute; min-width: 150px; }

Прапішам спісах border ў 1 пік.

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

Для спасылак у падменю ўсталюем водступы ў 10 пік., Прыбярэм трансфармацыю тэксту і фон зробім на пару тонаў цямней background: # e4e4e5; .

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

Затым створым яшчэ адно укладзенае меню. Пяройдзем у файл разметкі і да прыкладу ў "Электроніцы" фарміруем па аналогіі меню як рабілі мы да гэтага. Апісваем загалоўкі пунктаў (Камеры, Кампутары, Тэлефоны) і захоўваемся.

<Li> <a href="#"> Электроніка </a> <ul> <li> <a href="#"> Камеры </a> </ li> <li> <a href="#"> кампутары </a> </ li> <li> <a href="#"> Тэлефоны </a> </ li> </ ul> </ li>

Яны вывеліся, але схаваны пад асноўным меню, цяпер position: absolute; ўкладзенага UL і ссунем яго на 150 пік. у бок:

.dws-menu li> ul li ul {position: absolute; right: -150px; top: 0; }

Далей зробім з'яўленне падменю пры навядзенне на асноўныя пункты верхняга меню, для гэтага дадаем display: none; і тым самым ўтойваем усе ўнутраныя пункты.

/ * Sub menu * / .dws-menu li ul {position: absolute; min-width: 150px; display: none; }

А для іх з'яўлення адбярэм спісы пры навядзенні і адлюстраваць іх пры дапамозе display: block; .

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

Цяпер можна дадаваць шматузроўневыя меню проста простым капіяваннем блока UL, змяненнем яго пунктаў.

<Ul> <li> <a href="#"> <i class = "fa fa-home"> </ i> Галоўная </a> </ li> <li> <a href="#"> < i class = "fa fa-shopping-cart"> </ i> прадукцыя </a> <ul> <li> <a href="#"> Адзенне </a> <ul> <li> <a href = "#"> Абутак </a> </ li> <li> <a href="#"> Курткі </a> </ li> <li> <a href="#"> Штаны </a> < / li> </ ul> </ li> <li> <a href="#"> Электроніка </a> <ul> <li> <a href="#"> Камеры </a> </ li> <li> <a href="#"> Кампутары </a> </ li> <li> <a href="#"> Тэлефоны </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="#"> Прадукты харчавання </a> </ li> <li> <a href="#"> Інструменты </ a> </ li> <li> <a href="#"> Быць. хімія </a> </ li> </ ul> </ li> <li> <a href="#"> <i class = "fa fa-cogs"> </ i> Паслугі </a> <ul > <li> <a href="#"> Паслуга 1 </a> </ li> <li> <a href="#"> Паслуга 2 </a> </ li> <li> <a href = "#"> Паслуга 3 </a> </ li> </ ul> </ li> <li> <a href="#"> <i class = "fa fa-th-list"> </ i> навіны </a> </ li> <li> <a href="#"> <i class = "fa fa-envelope-open"> </ i> Кантакты </a> </ li> </ ul>

Затым давайце завяршальным этапам аформім кнопкі інгрэдыентам. Я карыстаюся, у мяне створана некалькі Presets, вы можаце стварыць свае, у маім выпадку я проста капіюю дадзены код і размяшчаю ў месца background які прапісваў да гэтага.

.dws-menu> ul li a {display: block; / * Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#c9c9c9+0,f6f6f6+2,c4c5c7+98,757577+100;Custom+3 * / background: # c9c9c9 ; / * Old browsers * / background: -moz-linear-gradient (top, # c9c9c9 0%, # f6f6f6 2%, # c4c5c7 98%, # 757577 100%); / * FF3.6-15 * / background: -webkit-linear-gradient (top, # c9c9c9 0%, # f6f6f6 2%, # c4c5c7 98%, # 757577 100%); / * Chrome10-25, Safari5.1-6 * / background: linear-gradient (to bottom, # 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; font-size: 14px; color: # 454547; text-decoration: none; text-transform: uppercase; transition: all 0.3s ease; } .Dws-menu li a: hover {/ * Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e0e1e5+0,454547+2,454547+98,e0e1e5+100 * / background: # e0e1e5; / * Old browsers * / background: -moz-linear-gradient (top, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * FF3.6-15 * / background: -webkit-linear-gradient (top, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * Chrome10-25, Safari5.1-6 * / background: linear-gradient (to bottom, # 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 * / color: #ffffff; box-shadow: 1px 5px 10px -5px black; transition: all 0.3s ease; } dws-menu> ul li a {display: block;  / * Permalink - use to edit and share this gradient: http://colorzilla

Пры жаданні дадзенае меню можна аформіць пад той стыль, які менавіта падыдзем вам на сайце, дастаткова проста з генераваць колер і замяніць яго ў кодзе. Атрымалася простае і ў той жа час сімпотнае гарызантальнае меню, зробленае на чыстым CSS.

Пакінуць каментар: