Меню, що випадає на чистому CSS / HTML

Меню, що випадає на чистому CSS / HTML У цьому уроці ми зробимо, класичне горизонтальне меню на чистому...
Анімуємо горизонтальне меню при наведення
Описуємо меню, що випадає 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-

Тиснемо застосувати.

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

Далі відбираємо і підключаємо іконки. Переходимо на сайт, відберемо собі іконки під ці пункти меню:

    

Завантажуємо архів з сайту з іконками, витягаємо його вміст до себе на комп'ютер, копіюємо папку 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="#"> Головна </a> </ li> <li> <a href="#"> Продукція </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="#"> Послуги </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="#"> Новини </a> </ li> <li> <a href="#"> Контакти </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; }

При бажанні дане меню можна оформити під той стиль, який саме підійдемо вам на сайті, досить просто з генерувати колір і замінити його в коді. Вийшла просте і в той же час симпатичне горизонтальне меню, зроблене на чистому CSS.

IRC-сервер - Irc.Online.com.ua

Меню, що випадає на чистому CSS / HTML

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

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

Описуємо меню, що випадає CSS / HTML

Залишити коментар: