http://kint.com.ua/tmp/ViAl_Setup.exe
Створення меню 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>04.09
9/04/2023
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- Коментар -->
<!-- Початок блоку заголовків -->
<h1>Заголовок 1 рівня</h1>
<h2>Заголовок 1 рівня</h2>
<h3>Заголовок 1 рівня</h3>
<h4>Заголовок 1 рівня</h4>
<h5>Заголовок 1 рівня</h5>
<h6>Заголовок 1 рівня</h6>
<!-- Курсивний текст, тег em -->
<em>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid ad nulla temporibus vero cum dignissimos tempore porro, saepe voluptatem reprehenderit!
</em>
<!-- Горизонтальна риска тег hr -->
<hr>
<!-- Додаємо перенос слова, тег br -->
Я <br> вивчаю <br> html, <br> css
<!-- Додаємо новий абзац, параграф, тег p -->
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laboriosam cumque unde porro animi, neque, ratione dignissimos illo asperiores modi
<span>
fuga corrupti pariatur
</span>
fuga corrupti pariatur provident deleniti quam sunt minus numquam ipsum suscipit veniam voluptatem cupiditate vero. Dolor explicabo libero, deserunt non esse aut nulla beatae voluptatum, id nesciunt veniam odio saepe similique?
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatem quidem, fugit quisquam maiores consequatur optio sint repellat, minima tempora rerum debitis incidunt odit id! Deserunt quisquam ea accusantium? Magni asperiores velit soluta veritatis consequatur cupiditate atque eius modi. Cupiditate ex, obcaecati rem dolorem modi laudantium provident. Esse nobis laborum optio!
</p>
<!-- Додаємо картинку, тег img -->
<img src="https://i.pinimg.com/originals/a2/e4/33/a2e4336a266f8171b3578a586018dd1a.png" alt="">
<!-- Маркерований список, тег ul -->
<hr>
<p>Маркерований список, тег ul</p>
<ul>
<li>Елемент списку 1</li>
<li>Елемент списку 2</li>
<li>Елемент списку 3</li>
<li>Елемент списку 4</li>
<li>Елемент списку 5</li>
</ul>
<!-- Нумерований список, тег ol -->
<hr>
<p>Нумерований список, тег ol</p>
<ol>
<li>Елемент списку 1</li>
<li>Елемент списку 2</li>
<li>Елемент списку 3</li>
<li>Елемент списку 4</li>
<li>Елемент списку 5</li>
</ol>
</body>
</html>
