Створення меню CSS, що випадає.

12/05/2023     

 Крок 1 - Створення HTML-файлу

По-перше, вам потрібно створити порожній HTML-файл. Ми створимо новий файл під назвою menu.html. Для цього ми використовуватимемо Файловий менеджер. Створіть базову структуру HTML файлу.

Крок 2 — Додавання коду HTML меню

Наше меню буде зроблено з одного батьківського елемента під назвою Головне меню та п'яти підрозділів. Змінюючи адресу всередині атрибуту href, ви можете пов'язати кожен підрозділ із різними сторінками вашого сайту. Ви напевно помітили, що кожен елемент має різний клас - dropdown, mainmenubtn та dropdown-child. Класи потрібні для застосування правил CSS.

<div class="dropdown">
  <button class="mainmenubtn">Головне меню</button>
  <div class="dropdown-child">
    <a href="http://www.вашдомен.ua/page1.html">Підрозділ 1</a>
    <a href="http://www.вашдомен.ua/page2.html">Підрозділ 2</a>
    <a href="http://www.вашдомен.ua/page3.html">Підрозділ 3</a>
    <a href="http://www.вашдомен.ua/page4.html">Підрозділ 4</a>
    <a href="http://www.вашдомен.ua/page5.html">Підрозділ 5</a>
  </div>
</div>

Крок 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.вашдомен.ua/page1.html">Підрозділ 1</a>
    <a href="http://www.вашдомен.ua/page2.html">Підрозділ 2</a>
    <a href="http://www.вашдомен.ua/page3.html">Підрозділ 3</a>
    <a href="http://www.вашдомен.ua/page4.html">Підрозділ 4</a>
    <a href="http://www.вашдомен.ua/page5.html">Підрозділ 5</a>
  </div>
</div>
</body>
</html>