Як Створити випадає Меню CSS

  1. Вступ
  2. Що вам знадобиться
  3. Крок 1 - Створення HTML-файлу
  4. Крок 2 - Додавання коду HTML меню
  5. Крок 3 - Як створити меню, що випадає CSS
  6. висновок

Вступ

Для сайту час його завантаження та зручність використання є одними з найбільш важливих аспектів. Тому, ви не повинні захаращувати ваш сайт додатковими 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 меню?