Простое горизонтальное меню (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;
}

Горизонтальное меню готово. Теперь можно его встраивать в ваш веб сайт.

Информация

Автор рецепта

farza (Сиротенко Юрий Олегович)
Преподаватель

Дата создания: 11.01.2019

Категория: Веб-разработка