1. Исчисти мени за CSS / HTML Во ова упатство ќе направиме класично хоризонтално мени на чист CSS. ...
2. Го анимираме хоризонталното мени додека покажуваме.
3. Опишете го паѓачкото мени CSS / HTML

Исчисти мени за CSS / HTML

Во ова упатство ќе направиме класично хоризонтално мени на чист CSS. Има икони во листите. Кога посочува на ставка, таа непречено ја менува бојата на копчето и текстот, се додава сенка. Повлекувањето на листите може да се направи на повеќе нивоа и главната работа е едноставно имплементирана на чист CSS3.

Продолжување на оваа лекција тука - дел 2 МОБИЛНА ВЕРЗИЈА хоризонтално мени ".

Погледнете го пенкалото POyzbW од Денис ( @Dwstroy ) на Codepen .

Во лекцијата користете:

• дисплеј: флекс;
• употреба транзиција;
• ги позиционира елементите со позиција.

HTML хоризонтална структура на менија

Прво, напишете ја белешката под хоризонталното мени. Ние ја отворивме нашата развојна околина во мојот случај, ова е PhpStorm, креирајте index.html датотека, пропишува рамка html: 5, заменете ја lang со ru.

Сите мета ќе бидат избришани освен кодирањето, ќе го регистрирам мојот наслов " Том мени ".

Помеѓу телото пишуваме таг за заглавје, а во него има и блок со класа .dws-мени што ќе го содржи нашето мени. Следно, структурата ќе биде како што следува, ние ќе создадеме листи во износ од пет парчиња. Во секоја листа ќе има врска со атрибутот href = "#". Тогаш ќе одам на иконата со класата .фа .фа-

<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>

Преземете ја архивата од страницата со икони, извлечете ја неговата содржина на вашиот компјутер, копирајте ја папката на фонтови и папката css во развојното опкружување.

Папката на фонтови содржи икони, а папката css ги содржи нивните стилови. Компресираните стилови може да се отстранат font-awesome.min, го поврзуваме некомпресираниот font-awesome.css.

Во index.html ги поврзуваме иконите и секоја ставка ја регистрираме со свој стил на икони ( дома , шопинг количка , cogs , th-list , плик-отворен ).

Ние направивме главната рамка, креираме подмени по описот на главниот стил, а сега ќе создадеме датотека каде што ќе ги опишеме главните стилови на хоризонталното мени style.css и ќе го поврземе со index.html. За да проверите дали стиловите се поврзани, креирајте папка со img, во неа ќе поставам произволна слика на позадината. Ајде да ја напишеме сликата со користење позадина.

тело (позадина-слика: url ("../ img / ep_naturalwhite.png"); }

Како што гледаме, сè е прикажано, а потоа ќе продолжиме да опишуваме стилови.

Прво на сите, ајде да ги ресетираме сите алишта, кои различни прелистувачи можат стандардно да ги постават:

.dws-мени * (маргина: 0; Соочи: 0; }

Нагодете го насловот до 200 врвови. и доделите кои можете да ги преземете и одделно да се поврзете со себе на страницата, за секој случај, напишете дополнителни фонтови.

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

Сокриј маркери во листите:

.dws-мени ul, .dws-мени ol {листа-стил: нема; }

Листите ќе бидат прикажани хоризонтално со екран: лен, а ние ќе го сториме тоа во центарот:

.dws-мени> ул (дисплеј: флекс; оправда-содржина: центар; }

Во заглавјето ќе навлеземе само на врвот, ќе напишеме маргина-врв.

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

Ајде да го дизајнираме менито, да ја наместиме бојата на копчињата, фонтот итн.

Изберете линкови nav> ul li и направете ги блок елементи. Поставете ја позадината на менито, пишувајте ги нагодувањата, наведете ја големината, бојата, отстранете ја долната граница и направете наслови со големи букви.

.dws-мени> ul li {екран: блок; позадина: #ececed; padding: 15px 30px 15px 40px; font-size: 14px; боја: # 454547; текст-декорација: нема; текст-трансформира: големи букви; }

Потоа поставете ги иконите, назначете ги листите на позиција: роднина; за понатамошно усогласување на иконите:

.dws-мени> ul li {позиција: роднина; }

Следно, ние ги одбираме иконите, ги поставуваме апсолутно, правиме отстапување од горе на 15 врвови, од левите 12 врвови, ја зголемуваме големината на 18 врвови.

.dws-мени> ul li> a i.fa {позиција: апсолутна; нагоре: 15px; лево: 12px; font-size: 18px; }

Доделете го сепараторот во форма на граница на списоците, изберете го првиот елемент на LI, поставете ја границата. Ние го избираме последниот елемент LI и го доделуваме слична граница.

.dws-menu> ul li: прво дете (граница-лево: 1px цврста # b2b3b5; } .dws-менито> ul li: последно дете (граница-десно: 1px солидна #babbbd; }

Изработка на разграничувачи за листи на листи:

.dws-мени> ul li {позиција: роднина; border-right: 1px solid # c7c8ca; }

Менито има стекнато изглед, а потоа можете да продолжите со опис на стилови при лебди.

Го анимираме хоризонталното мени додека покажуваме.

Изберете врски и назначете боја на блокот и назначете ја бојата на самата врска со иконата во бела боја. Ајде да додадеме уште една темна сенка. Со помош на транзиција за 0,3 секунди ќе направиме изедначен изглед:

.dws-menu li a: hover {background: # 454547; боја: #ffffff; кутија-сенка: 1px 5px 10px -5px црна; транзиција: сите 0.3s леснотија; }

И да се направи овој ефект да исчезне без проблеми, додајте го овој стил на врската лесно:

.dws-мени> ul li {екран: блок; позадина: #ececed; padding: 15px 30px 15px 40px; font-size: 14px; боја: # 454547; текст-декорација: нема; текст-трансформира: големи букви; транзиција: сите 0.3s леснотија; }

Главното мени е завршено и можете да продолжите со описот на подменито и подмените вметнати во нив.

Опишете го паѓачкото мени CSS / HTML

За отворање index.html и додавање, на пример, дополнително мени за производите. Внесете го UL помеѓу листите на листи и внесете пет листи во неа, кои ќе содржат врски со атрибутот herf = "#".

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

Ние притискаме да аплицираме, напишеме име на предметите ( Облека, Електроника, Храна, Алатки, Животот, Хемија ).

<ul> <li> <a href="#"> Облека </ li> <li> <a href="#"> Електроника </ li> <li> <a href = "#"> Храна </ li> <li> <a href="#"> Алатки </ li> <li> <a href="#"> Животот. хемија </ li> </ ul>

Потоа отворете style.css и опишете ги стиловите на подмени.

Ја избираме втората листа и ја доделуваме позицијата: апсолутна; , ајде да ја поставите минималната ширина до 150 врвови.

/ * под мени * /. dws-мени li ul {положба: апсолутна; мин-ширина: 150px; }

Ајде да пишуваме до граничните листи на 1 врв.

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

За врските во подменито, ќе поставиме алишта на 10 врвови., Отстранете ја трансформацијата на текстот и направете позадина неколку тони подоцнежна позадина: # e4e4e5; .

.dws-menu li> ul li {padding: 10px; текст-трансформирај: нема; позадина: # e4e4e5; }

Потоа креирајте друг подмени. Одете во датотеката за обележување и на пример во формата "Електроника" по аналогно мени како што беше порано. Ние ги опишуваме насловите на предметите ( Камери, Компјутери, Телефони ) и зачувување.

<li> <a href="#"> Електроника </ li> <li> <a href="#"> Компјутери </ li> <li> <a href="#"> телефони </ li> </ ul> </ li>

Тие беа извезени, но скриени под главното мени, сега позиција: апсолутна; вгнездени UL и преместете го до 150 врв. на страна:

.dws-menu li> ul li ul {положба: апсолутна; десно: -150px; нагоре: 0; }

Потоа, ќе го направиме подменито да се појавува кога ќе ги насочуваме главните ставки од главното мени, за што ќе додадеме екран: нема; и со тоа ги кријат сите внатрешни точки.

/ * под мени * /. dws-мени li ul {положба: апсолутна; мин-ширина: 150px; дисплеј: нема; }

И за нивниот изглед, ние ќе ги избереме листите на лебди и ќе ги прикажеме со помош на екранот: блок; .

.dws-menu li: hover> ul {приказ: блок; }

Сега можете да додавате менија на повеќе нивоа едноставно со копирање на 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 href = "#"> Чевли </ li> <li> <a href="#"> Јакни </ a> <li> <a href="#"> Панталони < / li> </ ul> </ li> <li> <a href="#"> Електроника </ li> <ul> <li> <a href="#"> Камери </ li> <li> <a href="#"> Компјутери </ li> <li> <a href="#"> Телефони </ a> <ul> <li> <a href="#"> Samsung </ li> <li> <a href="#"> Flf </ li> <li> <a href="#"> Apple </a> </ li> </ li> <li> / ul> </ li> </ ul> </ li> <li> <a href="#"> Храна </ li> <li> <a href="#"> Алатки </ h a> </ li> <li> <a href="#"> Gen. хемија </ li> </ ul> </ li> <li> <a href="#"> <i class = "fa fa-cogs"> </ i> Services <ul > <li> <a href="#"> Сервис 1 </ li> <li> <a href="#"> Сервис 2 </ li> <li> <a href = "#"> Сервис 3 </ li> </ ul> </ li> <li> <a href="#"> <i class = "fa fa-th-list"> </ i> Новини </ li> <li> <a href="#"> <i class = "fa fa-envelope-open"> </ i> Контакти </ li> </ ul>

Потоа да ги завршам копчињата со копчињата. Јас го користам, создадов неколку Presets, можете да креирате своја сопствена, во мојот случај, јас само го копирам овој код и ставете го во позадина место што го напишав порано.

.dws-мени> ul li {екран: блок; / * Permalink - овој градиент: http://colorzilla.com/gradient-editor/#c9c9c9+0,f6f6f6+2,c4c5c7+98.757577+100;Custom+3 * / background: # c9c9c9 ; / * Стари прелистувачи * / позадина: -moz-линеарен-градиент (врв, # c9c9c9 0%, # f6f6f6 2%, # c4c5c7 98%, # 757577 100%); / * FF3.6-15 * / позадина: -webkit-линеарен-градиент (врв, # c9c9c9 0%, # f6f6f6 2%, # c4c5c7 98%, # 757577 100%); / * Chrome10-25, Safari5.1-6 * / позадина: линеарен градиент (до дното, # 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; боја: # 454547; текст-декорација: нема; текст-трансформира: големи букви; транзиција: сите 0.3s леснотија; } .dws-menu li a: hover {/ * Permalink - овој градиент: http://colorzilla.com/gradient-editor/#e0e1e5+0.454547+2.454547+98,e0e1e5+100 * / background: # e0e1e5; / * Стари прелистувачи * / позадина: -moz-линеарен-градиент (врв, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * FF3.6-15 * / позадина: -webkit-линеарен градиент (врв, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * Chrome10-25, Safari5.1-6 * / позадина: линеарен градиент (до дното, # 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 * / боја: #ffffff; кутија-сенка: 1px 5px 10px -5px црна; транзиција: сите 0.3s леснотија; }

Ако сакате, ова мени може да биде дизајнирано за стилот кој ние сме погодни за вас на страницата, доволно е само да генерирате боја и да ја замените во кодот. Излезе едноставно и истовремено убаво хоризонтално мени, направено во чист CSS.

Остави коментар: