Таза CSS / HTML мәзірі ашылады

  1. Таза CSS / HTML мәзірі ашылады Бұл оқулықта таза CSS-де классикалық көлденең мәзір жасаймыз. Тізімдерде...
  2. Көрсету кезінде көлденең мәзірді жандандырамыз.
  3. CSS / HTML ашылмалы мәзірін сипаттаңыз

Таза CSS / HTML мәзірі ашылады

Бұл оқулықта таза CSS-де классикалық көлденең мәзір жасаймыз. Тізімдерде белгішелер бар. Элементке меңзегенде, ол түйменің түсін өзгертеді және мәтін, көлеңке қосылады. Ашылмалы тізімдерді көп деңгейлі жасауға болады, ал ең бастысы - тек таза CSS3-де жүзеге асырылады.

Бұл сабақтың жалғасы - 2-бөлім MOBILE VERSION көлденең мәзірі «.

Қаламды қараңыз POyzbW Денис ( @Dwstroy ) Codepen .

Сабақта қолдану:

  • дисплей: flex;
  • ауысуды пайдалану;
  • элементтерді орынға қойыңыз.

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>

Өтініш беру үшін біз баса береміз.

Мәзір элементтерінің атауын жазыңыз ( Home, Products, Services, News, Contacts ).

Содан кейін белгішелерді таңдап, қосыңыз. Сайтқа өтіңіз, осы мәзір элементтері үшін белгішелерді таңдаймыз:

<i class = «fa fa- home »> </ i> <i class = «fa fa- shopping- cart »> </ i> <i class = «fa facogs»> </ i> <i сынып = «fa fa -list »> </ i> <i class = «fa fa-convert -open »> </ i>

<i class = «fa fa- home »> </ i> <i class = «fa fa- shopping- cart »> </ i> <i class = «fa facogs»> </ i> <i сынып = «fa fa -list »> </ i> <i class = «fa fa-convert -open »> </ i>

Мұрағатты сайттан белгішелермен жүктеңіз, оның мазмұнын компьютеріңізге шығарып алыңыз, қаріптер қалтасын және css қалтасын әзірлеу ортаңызға көшіріңіз.

Қаріптер папкасында белгіше қаріптері бар және css қалтасында олардың мәнерлері бар. Сығылған мәнерлерді font-awesome.min жоюға болады, uncompressed font-awesome.css файлын қосамыз.

Index.html-де біз белгішелерге қосыламыз және әрбір элементті өзінің жеке стилі стилімен ( үй , сауда-арбалар , cogs , th-list , конверт-ашық ) тіркейміз.

Біз негізгі фреймдерді жасадық, басты стиль сипаттамасынан кейін ішкі мәзір жасап, енді біз көлденең мәзір стилінің style.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-menu ul, .dws-menu ol {list-style: none; }

Тізімдер дисплеймен көлденең көрсетіледі: зығыр және біз оны ортасында орындаймыз:

.dws-menu> ul {көрсету: flex; justify-content: орталығы; }

Үстіңгі деректемеде біз тек үстіңгі бөлікке шығады, біз маржин-шрифті жазамыз.

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

Біздің мәзірді жасайық, түймелердің түсі, қаріпті және т.б. орнатайық.

Сілтемелерді таңдаңыз nav> ul li және элементтерді блоктау. Мәзір өңін орнатыңыз, шрифтер жазыңыз, өлшемін, түсі, астыңғы сызықшасын алып тастаңыз және тақырыптарды үлкен әріптермен жасаңыз.

.dws-menu> ul li a {көрсету: блок; фон: #ececed; толтыру: 15px 30px 15px 40px; қаріп өлшемі: 14px; түсі: # 454547; мәтінді безендіру: жоқ; мәтіндік-трансформация: бас әріптер; }

Содан кейін белгішелерді орналастырыңыз, тізімдерді орнына тағайындаңыз: салыстырмалы; икондарды одан әрі теңестіру үшін:

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

Содан кейін біз таңбашаларды таңдаймыз, оларды мүлдем орналастырамыз, жоғарыдан 15 шыңдардан шегініс шығамыз, сол 12 шыңнан, өлшемін 18 шыңға дейін көтереміз.

.dws-menu> ul li> a i.fa {лауазымы: абсолютті; жоғарғы: 15px; сол: 12px; Қаріп өлшемі: 18px; }

Бөлгішті тізімдерге шекара түрінде тағайындаңыз, бірінші LI элементін таңдаңыз, шекараны орнатыңыз. Біз LI соңғы элементін таңдап, оған ұқсас шекараны тағайындаймыз.

.dws-menu> ul li: бірінші бала {шекара-сол: 1px қатты # b2b3b5; } .dws-menu> ul li: last-child {border-right: 1px қатты #babbbd; }

LI тізімдеріне арналған бөлгіштерді жасау:

.dws-menu> ul li (position: relative; border-right: 1px қатты # c7c8ca; }

Мәзір көріністі сатып алды, содан кейін жылжу кезінде стильдердің сипаттамасына өтуіңізге болады.

Көрсету кезінде көлденең мәзірді жандандырамыз.

Сілтемелерді таңдап, бояуға блокқа тағайындаңыз және сілтеменің түсі белгіні ақ түспен тағайындаңыз. Басқа қара көлеңке қосайық. Өткізу арқылы 0,3 секундта тегіс келбет пайда болады:

.dws-мәзірі a: hover {background: # 454547; Түсі: #ffffff; қораптың көлеңке: 1px 5px 10px -5px қара; ауысу: барлық 0.3с жеңіл; }

Бұл әсері біртіндеп жойылып кету үшін, бұл стильді сілтемеге оңай қосыңыз:

.dws-menu> ul li a {көрсету: блок; фон: #ececed; толтыру: 15px 30px 15px 40px; қаріп өлшемі: 14px; түсі: # 454547; мәтінді безендіру: жоқ; мәтіндік-трансформация: бас әріптер; ауысу: барлық 0.3с жеңіл; }

Негізгі мәзір аяқталды және ішкі мәзір мен олардың ішіне салынған ішкі мәзір сипаттамасына өтуіңізге болады.

CSS / HTML ашылмалы мәзірін сипаттаңыз

Біз index.html файлын ашып, мысалы, өнімдерге қосымша мәзірді қосамыз. UL-ні LI тізімдерінің арасына салыңыз және онда бес таңбаны орналастырыңыз, ол атрибуттармен бірге сілтемелерді қамтиды.

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 ашыңыз және ішкі мәзір мәнерлерін сипаттаңыз.

Біз екінші тізімді таңдап, оның орнына тағайындаламыз: абсолютті; ең төменгі ені 150 шыңға дейін орнатайық.

/ * ішкі мәзір * / .dws-menu li ul (position: absolute; ені: 150px; }

Шекара тізімдеріне 1 шыңы жазайық.

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

Ішкі мәзірлердегі сілтемелер үшін біз шегіністерді 10 шыңдарға орнатамыз. Мәтінді түрлендіруді алып тастап, өңді қараңғы фонға бірнеше тонна жасаңыз: # e4e4e5; .

.dws-menu li> ul li a {толтыру: 10px; мәтіндік-трансформация: жоқ; фон: # e4e4e5; }

Содан кейін басқа ішкі мәзір жасаңыз. Түзетулер файлына өтіңіз және мысалы, бұрынғыдай ұқсас мәзір арқылы «Электроника» пішінінде. Элементтердің ( камералар, компьютерлер, телефондар ) тақырыбын суреттеп, сақтаймыз.

<li> <a href="#"> Электроника </a> <ul> <li> <a href="#"> Камералар </a> </ li> <li> <a href="#"> Компьютерлер </a> </ li> <li> <a href="#"> Телефондар </a> </ li> </ ul> </ li>

Олар шығарылды, бірақ негізгі мәзірдің астына жасырылған, қазіргі жағдайы: абсолютті; UL салынған және 150 шыңына жылжытыңыз. шетке:

.dws-menu li> ul li ул {position: absolute; оң: -150px; жоғарғы: 0; }

Содан кейін біз жоғарғы мәзірдің басты элементтерін бағыттағанда ішкі мәзірді көрсетеміз, бұл үшін біз дисплейді қосамыз: жоқ; және осылайша барлық ішкі нүктелерді жасырады.

/ * ішкі мәзір * / .dws-menu li ul (position: absolute; ені: 150px; дисплей: жоқ; }

Ал олардың пайда болуына байланысты біз тізімді таңдап аламыз және оларды экранның көмегімен көрсетеміз: блок; .

.dws-menu li: hover> ul {көрсету: блок; }

Енді UL блогын көшіру, оның элементтерін өзгерту арқылы көп деңгейлі мәзірлерді қосуға болады.

<ul> <li> <a href="#"> <i class = «fa fa-home»> </ i> Басты бет </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> </ li> <li> <li> <a href="#"> Электроника </a> <ul> <li> <a href="#"> Камералар </a> </ li> </ li> <li> <li> <a href="#"> Компьютерлер </a> </ li> <li> <a href="#"> Телефондар </a> <ul> <li> <a href="#"> </ Li> <li> <a href="#"> Apple </ li> <a href="#"> Flf </a> </ li> <li> </ li> </ li> </ ul> </ li> <li> <a href="#"> Азық-түлік </a> </ li> <li> <a href="#"> Құралдар </ h a> </ 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 = </ I> <a href="#"> <i class = «fa fa-th-list»> </ i> </ li> </ li> <li> Жаңалықтар </ li> <li> <a href="#"> <i class = «fa fa-envelope-open»> </ i> Контактілер </a> </ li> </ ul>

Содан кейін түймелерді аяқтайық. Мен пайдаланамын, мен бірнеше алдын-ала құрдым, сіз өзіңіздің жеке ісіңізді жасай аласыз, менің жағдайда, осы кодты көшіріп, оны бұрын жазған фонға орналастырамын.

.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-сызықтық-градиент (жоғары, # c9c9c9 0%, # f6f6f6 2%, # c4c5c7 98%, # 757577 100%); / * FF3.6-15 * / background: -webkit-сызықтық-градиент (жоғары, # 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 + * / сүзгісі: прокси: DXImageTransform.Microsoft.gradient (startColorstr = '# c9c9c9', endColorstr = '# 757577', GradientType = 0); / * IE6-9 * / толтыру: 15px 30px 15px 40px; қаріп өлшемі: 14px; түсі: # 454547; мәтінді безендіру: жоқ; мәтіндік-трансформация: бас әріптер; ауысу: барлық 0.3с жеңіл; } .dws-menu li a: hover {/ * Permalink - бұл градиент: http://colorzilla.com/gradient-editor/#e0e1e5+0.454547+2.454547+98,e0e1e5+100 * / background: # e0e1e5; / * Ескі браузерлер * / background: -moz-сызықтық-градиент (жоғарғы, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * FF3.6-15 * / background: -webkit-сызықтық-градиент (жоғары, # 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 + * / сүзгісі: prodigium: DXImageTransform Microsoft.gradient (startColorstr = '# e0e1e5', endColorstr = '# e0e1e5', GradientType = 0); / * IE6-9 * / color: #ffffff; қораптың көлеңке: 1px 5px 10px -5px қара; ауысу: барлық 0.3с жеңіл; } dws-menu> ul li a {көрсету: блок; / * Permalink - бұл градиент: http://colorzilla

Егер қаласаңыз, бұл мәзір сайттағы сізге ыңғайлы стильге арналған болуы мүмкін, тек түс жасау және оны кодқа ауыстыру жеткілікті. Таза CSS-де жасалған қарапайым және сонымен қатар жақсы көлденең мәзір пайда болды.

Пікір қалдыру: