Մաքուր CSS / HTML կաթիլ մենյու

1. Մաքուր CSS / HTML կաթիլ մենյու Այս ձեռնարկում մենք կստեղծենք մաքուր CSS- ի դասական հորիզոնական մենյու:...
2. Մենք մատնանշում ենք հորիզոնական մենյուը:
3. Նկարագրեք CSS / HTML բացվող ցանկը

Մաքուր CSS / HTML կաթիլ մենյու

Այս ձեռնարկում մենք կստեղծենք մաքուր CSS- ի դասական հորիզոնական մենյու: Այն ցուցակներում ունի պատկերակ: Երբ նշում է իրը, այն սահուն կերպով փոխում է կոճակի գույնը եւ տեքստը, ավելացնում է ստվեր: Բաց թողնված ցուցակները կարելի է կատարել բազմաբնույթ մակարդակ եւ ամենակարեւորն այն է, որ բավականին պարզ իրականացվում է մաքուր CSS3- ի վրա:

Այս դասի շարունակությունը այստեղ - մաս 2 Բջջային տարբերակ հորիզոնական մենյու »:

Տես Pen Պոզիբ Դենիս ( @Dwstroy ) Codepen .

Դասի օգտագործման մեջ.

• ցուցադրում `ճկուն;
• օգտագործման անցում;
• տեղադրեք տարրերը դիրքորոշմամբ:

HTML հորիզոնական մենյուի կառուցվածքը

Նախ, հորիզոնական մենյուի ներքեւում նշեք նշումը: Մենք բացում ենք մեր զարգացման միջավայրը իմ դեպքում, սա PhpStorm- ը, ստեղծել index.html ֆայլ, սահմանեք շրջանակ html: 5, replace lang with ru:

Բոլոր մետատվյալները կջնջվեն, բացառությամբ կոդավորման, ես գրանցելու եմ « Թոմ Մենյուն » կոչումը:

Դիակի միջով մենք գրում ենք վերնագրի տեքստը, եւ դրա մեջ կա մի բլոկ դասի հետ: dws - մենյու, որը պարունակում է մեր ընտրացանկը: Հաջորդը, կառուցվածքը հետեւյալն է, ստեղծել հինգ կտորներով ցուցակ: Յուրաքանչյուր ցանկում կլինի հղում href = "#" հատկանիշով: Հետո ես դասարանի հետ կգնամ դասարանի հետ .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 facogs"> </ i> <i դաս = "fa fa- th-list "> </ i> <i class = "fa fa- ծրարը- open "> </ i>

Ներբեռնեք արխիվից կայքի միջոցով սրբապատկերներ, բովանդակությունը հանեք ձեր համակարգչին, պատճենեք տառատեսակների թղթապանակը եւ css թղթապանակը ձեր զարգացման միջավայրում:

Տառատեսակների թղթապանակը պարունակում է պատկերակ տառատեսակներ, եւ css պանակը պարունակում է իրենց ոճերը: Սեղմված ոճերը կարող են հեռացնել font-awesome.min, մենք կապում ենք uncompressed տառատեսակը-awesome.css:

Index.html- ում մենք կապում ենք սրբապատկերներ, եւ յուրաքանչյուր ապրանքի գրանցում ենք սեփական պատկերակաձեւ ոճով ( տուն , գնումներ-զամբյուղ , կողպում , ցուցիչ , ծրար-բաց ):

Հիմնական շրջանակն ենք ստեղծել, հիմնական ոճի նկարագրության արդյունքում ստեղծելու ենթաօրենսդրություն, եւ հիմա մենք կստեղծենք ֆայլ, որտեղ մենք նկարագրում ենք հորիզոնական մենյուի ոճի հիմնական ոճերը: css եւ միացեք index.html- ին: Ստուգել, ​​որ ոճերը միացված են, ստեղծել img թղթապանակ, դրա մեջ ես կստեղծի կամայական պատկեր, ֆոնի վրա: Եկեք ֆեյսբուքի օգտագործմամբ օգտագործենք նկարը:

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

Ինչպես տեսնում ենք, ամեն ինչ ցուցադրվել է, եւ մենք կանցնենք ոճերի նկարագրությունը:

Նախեւառաջ, վերացնենք բոլոր անջատումները, որոնք տարբեր բրաուզերները կարող են նախապես սահմանվել:

.dws-menu * {margin: 0; լրացնելով `0; }

Սահմանեք վերնագիր 200 պիկը: եւ հանձնարարեք, որը կարող եք ներբեռնել եւ առանձին կապվել ինքներդ կայքում, ընդհանրապես, գրեք լրացուցիչ տառատեսակներ:

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

Թաքցնել նշագծերը ցուցակներում.

.dws- մենյու ul, .dws - մենյու ol {list-style: none; }

Ցանկերը կցուցադրվեն ցուցափեղկով հորիզոնական: կտավը, եւ մենք կանի դա կենտրոնում:

.dws- մենյու> ul {ցուցադրում `ճկուն; արդարացնել-բովանդակությունը. կենտրոն; }

Թեմանում մենք կփակենք միայն վերեւ, մենք կստեղծենք մարգին-գագաթ:

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

Եկեք նախագծենք մեր մենյուը, սահմանենք կոճակների գույնը, տառատեսակը եւ այլն:

Ընտրեք հղումներ nav> ul li եւ դրանք արգելափակեք տարրերը: Սահմանեք մենյուի ֆոնային ձեւը, գրեք տողերը, նշեք չափը, գույնը, վերացրեք ներքեւի գծերը եւ տիտղոսները վերնագրերը դարձրեք:

.dws-menu> ul li a {ցուցասարքը `բլոկ; ֆոնային: #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: առաջին երեխա {border-left: 1px solid # b2b3b5; } .dws-menu> ul li: վերջին երեխա {border-right: 1px solid #babbbd; }

Լի ցուցակների համար սահմանազատիչներ պատրաստելը `

.dws- մենյու> ul li (դիրք: հարաբերական; border-right: 1px կոշտ # c7c8ca; }

Ճաշացանկը ձեռք է բերել տեսքը, ապա սավառնելիս կարող եք անցնել ոճերի նկարագրությունը:

Մենք մատնանշում ենք հորիզոնական մենյուը:

Ընտրեք հղումները եւ բլոկի գույնը նշանակում եւ կապի գույնը նշանակում է պատկերակը սպիտակ: Եկեք մեկ այլ մութ ստվերը: Անցման միջոցով 0.3 վայրկյանի ընթացքում մենք հարթ տեսք կունենանք.

.dws-menu- ը `hover {background: # 454547; գույնը `#ffffff; box-shadow: 1px 5px 10px -5px սեւ; անցում `բոլոր 0.3s հեշտությամբ; }

Եվ այս ազդեցությունը սահուն կերպով վերացնելու համար ավելացրեք այս ոճը հղմանը:

.dws-menu> ul li a {ցուցասարքը `բլոկ; ֆոնային: #ececed; padding: 15px 30px 15px 40px; font-size: 14px; գույնը `# 454547; տեքստերի ձեւավորում `ոչ; տեքստային փոխակերպում. մեծատառ; անցում `բոլոր 0.3s հեշտությամբ; }

Հիմնական ցանկն ավարտված է, եւ դուք կարող եք անցնել submenu- ի նկարագրությանը եւ դրանց մեջ ներառված ենթաօրենսդրական գործառույթներին:

Նկարագրեք CSS / HTML բացվող ցանկը

Մեր մասին բացում ենք index.html- ը եւ ավելացնում, օրինակ, արտադրանքի լրացուցիչ ցանկը: Տեղադրեք UL- ը LI- ի ցուցակների միջեւ եւ տեղադրել հինգ ցուցակները, որոնք պարունակող հղումներ պարունակող «herf =" # "հատկանիշով:

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

Մենք ձգտում ենք կիրառել, գրել ապրանքի անվանումը ( Հագուստ, Էլեկտրոնիկա, Սնունդ, Գործիքներ, Կյանք, Քիմիա ):

<li> <li> <a href="#"> Հագուստ </a> </ li> <li> <a href="#"> Էլեկտրոնիկա </a> </ li> <li> <a href = "#"> ՈՒտելիք </a> </ li> <li> <a href="#"> Գործիքներ </a> </ li> <li> <a href="#"> Life. քիմիա </a> </ li> </ ul>

Այնուհետեւ բացեք style.css եւ նկարագրեք submenu ոճերը:

Մենք ընտրում ենք երկրորդ ցուցակը եւ նշանակում ենք այն պաշտոնը, բացարձակ: , եկեք սահմանենք նվազագույն լայնությունը մինչեւ 150 գագաթներ:

/ * ենթակետի ընտրացանկը * / .dws-menu li li {դիրք: բացարձակ; min-width: 150px; }

Եկեք 1 գագաթով սահմանենք սահմանային ցուցակներին:

.dws- մենյու li> ul li {սահման: 1px կոշտ # c7c8ca; }

Դեպի ներքեւի հղումների համար մենք սահմանելու ենք 10 գագաթնակետերում: Հեռացրեք տեքստի փոխակերպումը եւ ֆոնին մի քանի տոնով սեւ մթնոլորտ ստեղծեք. # E4e4e5; .

.dws-menu li> ul li a {padding: 10px; text-transform: ոչ; ֆոնային: # e4e4e5; }

Այնուհետեւ ստեղծեք մեկ այլ submenu: Գնացեք նշագրման ֆայլ եւ, օրինակ, «Էլեկտրոնիկա» տեսքով, անալոգային մենյուով, ինչպես նախկինում: Մենք նկարագրում ենք նյութերի վերնագրերը ( տեսախցիկներ, համակարգիչներ, հեռախոսներ ) եւ փրկեք:

<li> <a href="#"> Էլեկտրոնիկա </a> <ul> <li> <a href="#"> Տեսախցիկներ </a> </ li> <li> <a href="#"> Համակարգիչներ </a> </ li> <li> <a href="#"> Հեռախոսներ </a> </ li> </ ul> </ li>

Նրանք դուրս են բերվել, բայց հիմնական մենյուի տակ թաքնված են, հիմա պաշտոնը `բացարձակ; nested UL եւ տեղափոխել այն 150 գագաթին. դեպի կողմ:

.dws-menu li> ul li ul {դիրքը `բացարձակ; right: -150px; վերեւ: 0; }

Հաջորդը, մենք կկատարենք submenu- ն, երբ մենք նպատակաուղղում ենք վերեւի մենյուի հիմնական տարրերին, քանի որ սա ցուցադրում ենք ոչ մեկը. եւ այդպիսով թաքցնել բոլոր ներքին կետերը:

/ * ենթակետի ընտրացանկը * / .dws-menu li li {դիրք: բացարձակ; min-width: 150px; ցուցադրում `ոչ; }

Եվ նրանց տեսքի համար մենք կընտրենք ցուցակները ցուցադրելու եւ դրսեւորելու ցուցադրման օգնությամբ. .

.dws- մենյու li: hover> ul {ցուցասարքը `բլոկ; }

Այժմ դուք կարող եք ավելացնել բազմաբնույթ մակարդակի բաժիններ պարզապես UL- ի բլոկի պատճենով, փոխելով իր տարրերը:

<li> <li> <a href="#"> <i class = "fa fa-home"> </ i> Home </a> </ li> <li> <a href="#"> < <class> "fa fa-shopping-cart"> </ i> Ապրանքներ </a> <ul> <li> <a href="#"> Հագուստ </a> <ul> <li> <a href = </ Li> <li> <a href="#"> Բաճկոններ </a> </ li> <li> <a href="#"> Տաբատներ </a> </ li> <li> <a href="#"> Էլեկտրոնիկա </a> <ul> <li> <a href="#"> Տեսախցիկներ </a> </ li> <li> <a href="#"> Համակարգիչներ </a> </ li> <li> <a href="#"> Հեռախոսներ </a> <ul> <li> <a href="#"> </ Li> <li> <a href="#"> Ֆլֆ </a> </ li> <li> <a href="#"> Apple </ li> < </ li> </ li> <li> <a href="#"> ՈՒտելիք </a> </ li> <li> <a href="#"> Գործիքներ </ h ա> </ li> <li> <a href="#"> Gen. քիմիա </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 = </ Li> <li> <li> </ li> <li> </ li> </ li> <li> <li> </ Li> <li> <li> <a href="#"> <i class = "fa fa-envelope-open"> </ i> Կոնտակտներ </ li> </ ul>

Այնուհետեւ կոճակները վերջացրեք: Ես օգտագործում եմ մի քանի Presets- ը, կարող ես ստեղծել ձեր սեփական, իմ դեպքում, ես պարզապես պատճենեմ այս կոդը եւ այն այն ֆոնային տեղը, որ ես գրել եմ նախկինում:

.dws-menu> ul li a {ցուցասարքը `բլոկ; / * Permalink - այս գրադիենտ: http://colorzilla.com/gradient-editor/#c9c9c9+0,f6f6f6+2,c4c5c7+98.757577+100;Custom+3 * / background: # c9c9c9 Բ) / * Հին բրաուզերներ * / background: -moz-linear-gradient (վերեւ, # c9c9c9 0%, # f6f6f6 2%, # c4c5c7 98%, # 757577 100%); / * FF3.6-15 * / background: -webkit-linear- գրադիենտ (վերեւ, # c9c9c9 0%, # f6f6f6 2%, # c4c5c7 98%, # 757577 100%); / * Chrome10-25, Safari5.1-6 * / background: գծային-գրադիենտ (ներքեւից, # c9c9c9 0%, # f6f6f6 2%, # c4c5c7 98%, # 757577 100%); / * W3C, IE10 +, FF16 +, Chrome26 +, Opera12 +, Safari7 + * / ֆիլտր: Progress: DXImageTransform.Microsoft.gradient (startCLorstr = '# 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; / * Հին բրաուզերներ * / background: -moz-linear-gradient (վերեւում, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * FF3.6-15 * / background: -webkit-linear-gradient (վերեւում, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * Chrome10-25, Safari5.1-6 * / background: գծային-գրադիենտ (ներքեւում, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * W3C, IE10 +, FF16 +, Chrome26 +, Opera12 +, Safari7 + * / ֆիլտր: prod.: DXImageTransform: Microsoft.gradient (startCLorstr = '# e0e1e5', endColorstr = '# e0e1e5', GradientType = 0); / * IE6-9 * / color: #ffffff; box-shadow: 1px 5px 10px -5px սեւ; անցում `բոլոր 0.3s հեշտությամբ; }

Եթե ​​ցանկանաք, այս ընտրացանկը կարող է մշակվել այն ոճով, որը մեզ համար հարմար է ձեզ համար, բավական է պարզապես գույն ստեղծել եւ փոխարինել այն կոդով: Պարզվեց, պարզ եւ միեւնույն ժամանակ գեղեցիկ հորիզոնական մենյու, մաքուր CSS- ում:

Թողնել մեկնաբանություն: