Простое горизонтальное меню (HTML и CSS)
Доброе время суток участники образовательной IT площадки GeekSpace. В данном рецепте нашей поваренной книги GeekSpace мы научимся готовить верстать простое горизонтальное меню при помощи HTML и CSS
Прототип меню выглядит следующим образом:
Сначала давайте подготовим ингредиенты. Многое нам не потребуется, всего лишь:
- Язык гипертекстовой разметки HTML
- Каскадные таблицы стилей CSS
- Текстовый редактор
- Браузер
Давайте пожалуй приступим.
Для начала создадим документ с именем “menu.html” и добавим в него стандартную структуру
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Invalid Validity</title>
5 <meta charset="UTF-8">
6 </head>
7
8 <body>
9
10 </body>
11 </html>
Также создадим директорию для стилей с именем “css”, а в ней файл со стилями “style.css”
Подключим css файл в документ между открывающим и закрывающим тегами “head”
<link rel="stylesheet" href="css/style.css">
Между открывающим и закрывающим тегами “body” Создадим структуру нашего меню
<div class="menu">
<ul>
<li>Главная</li>
<li>О нас</li>
<li>События</li>
<li>Контакты</li>
</ul>
</div>
Попробуем открыть документ в браузере
Каркас был создан успешно. Теперь давайте начнем работать над внешним видом данного меню и придадим ему презентабельный вид при помощи CSS.
Для начала зальем основной контейнер меню серым цветом и добавим на него тень:
.menu {
background-color: #f1f1f1;
box-shadow: 4px 5px 15px rgba(0, 0, 0, 0.5);
}
Теперь уберем маркеры со списка и произведем выравнивание его элементов в одну линию
.menu li {
display: inline-block;
vertical-align: top;
}
Затем к каждому из элементов списка применим одинаковые по количеству отступы по всем краям
.menu li {
display: inline-block;
vertical-align: top;
padding: 35px;
}
Теперь давайте добавим нашему меню немного динамики. Сделаем так, чтобы при наведении курсора мыши на элемент меню, оно подсвечивалось красноватым оттенком:
.menu li:hover {
background-color: #f87777;
}
Теперь сделаем так, чтобы при наведении на элементы меню курсор мыши становился указателем, а цвет текста пункта становился белым
.menu li:hover {
background-color: #f87777;
cursor: pointer;
color: #f8f8f8;
}
Осталось совсем немного. Изменим цвет текстового содержимого пунктов меню на темно серый
.menu li {
display: inline-block;
vertical-align: top;
padding: 35px;
color: #6f6d6d;
}
Уберем стандартный отступ маркированного списка
.menu ul {
padding: 0px;
}
Заключительной частью является установка ширины контейнера меню
.menu {
background-color: #f1f1f1;
box-shadow: 4px 5px 15px rgba(0, 0, 0, 0.5);
width: 573px;
}
Горизонтальное меню готово. Теперь можно его встраивать в ваш веб сайт.