- Вступ
- Що вам знадобиться
- Крок 1 - Створення HTML-файлу
- Крок 2 - Додавання коду HTML меню
- Крок 3 - Як створити меню, що випадає CSS
- висновок
Вступ
Для сайту час його завантаження та зручність використання є одними з найбільш важливих аспектів. Тому, ви не повинні захаращувати ваш сайт додатковими JavaScript і великими зображеннями. Але що, якщо ви хочете красиве випадає CSS меню? Для цього не потрібно використовувати JavaScript, сьогодні меню, що випадає можна зробити використовуючи тільки CSS. У цьому керівництві ви навчитеся, як створити меню, що випадає CSS.
Що вам знадобиться
Перед тим, як ми почнемо це керівництво, вам знадобиться наступне:
- Доступ до контрольної панелі вашого хостингу
Крок 1 - Створення HTML-файлу
По-перше, вам потрібно створити порожній HTML-файл. У цьому керівництві ми створимо новий файл під назвою menu.html. Для цього ми будемо використовувати Файловий менеджер. Однак той же результат може бути досягнутий з використанням FTP-клієнта (створіть файл menu.html на вашому комп'ютері і завантажте його на ваш хостинг).
Крок 2 - Додавання коду HTML меню
Наше меню буде зроблено з одного батьківського елемента під назвою Головне меню і п'яти підрозділів. Змінюючи адреса всередині атрибута href, ви можете пов'язати кожен підрозділ з різними сторінками вашого сайту. Ви напевно помітили, що кожен елемент має різний клас - dropdown, mainmenubtn і dropdown-child. Класи необхідні для застосування правил CSS.
<Div class = "dropdown"> <button class = "mainmenubtn"> Головне меню </ button> <div class = "dropdown-child"> <a href = "http: //www.вашдомен.ru/page1.html "> Підрозділ 1 </a> <a href="http://www.вашдомен.ru/page2.html"> Підрозділ 2 </a> <a href =" http: //www.вашдомен.ru/page3 .html "> Підрозділ 3 </a> <a href="http://www.вашдомен.ru/page4.html"> Підрозділ 4 </a> <a href =" http: //www.вашдомен.ru /page5.html">Подраздел 5 </a> </ div> </ div>Ось, як це виглядає без застосування будь-яких CSS-правил:
Як ви бачите звичайне HTML меню не оптимізовано і виглядає не дуже красиво. Однак ми застосуємо CSS правила і змінимо це в наступному кроці.
Крок 3 - Як створити меню, що випадає CSS
Ми стилізуємо наш HTML код використовуючи такі CSS правила:
.mainmenubtn {background-color: red; color: white; border: none; cursor: pointer; padding: 20px; margin-top: 20px; } .Mainmenubtn: hover {background-color: red; } .Dropdown {position: relative; display: inline-block; } .Dropdown-child {display: none; background-color: black; min-width: 200px; } .Dropdown-child a {color: white; padding: 20px; text-decoration: none; display: block; } .Dropdown: hover .dropdown-child {display: block; }Як ви бачите, клас .dropdown-child має CSS правило display: none. Однак, як тільки користувач проведе курсором (.dropdown: hover) по батьківського елементу, це правило змінить його відображення на display: block. Це і створить ефект меню, що випадає.
Нижче представлений фінальний результат нашого файлу menu.html:
<Html> <head> <style> .mainmenubtn {background-color: red; color: white; border: none; cursor: pointer; padding: 20px; margin-top: 20px; } .Dropdown {position: relative; display: inline-block; } .Dropdown-child {display: none; background-color: black; min-width: 200px; } .Dropdown-child a {color: white; padding: 20px; text-decoration: none; display: block; } .Dropdown: hover .dropdown-child {display: block; } </ Style> </ head> <body> <div class = "dropdown"> <button class = "mainmenubtn"> Головне меню </ button> <div class = "dropdown-child"> <a href = "http : //www.вашдомен.ru/page1.html "> Підрозділ 1 </a> <a href="http://www.вашдомен.ru/page2.html"> Підрозділ 2 </a> <a href = "http: //www.вашдомен.ru/page3.html"> Підрозділ 3 </a> <a href="http://www.вашдомен.ru/page4.html"> Підрозділ 4 </a> <a href = "http: //www.вашдомен.ru/page5.html"> Заголовок 5 </a> </ div> </ div> </ body> </ html>У цьому прикладі ми використовуємо внутрішні таблиці стилів, що означає CSS стилі знаходяться в самому файлі HTML. Однак існує безліч способів для підключення CSS стилів до HTML документу .
Як тільки ви закінчите, фінальний результат повинен бути схожий на це:
Не бійтеся експериментувати c CSS стилем, змінюючи кольору і розмір. Адаптуйте меню під ваші потреби.
висновок
Закінчивши цей посібник ви навчилися, як створити меню, що випадає CSS. Код наведений в цьому посібнику досить легкий і не вплине на час завантаження вашого сайту.
Але що, якщо ви хочете красиве випадає CSS меню?