Урок 5. Создание меню

Виды меню

Навигация — ключевой элемент любого сайта, помогающий пользователям быстро находить нужные страницы. Рассмотрим, как можно стильно оформить меню.

Горизонтальное меню

Подходит для сайтов с небольшим количеством разделов. Часто фиксируется в верхней части страницы, обеспечивая удобный доступ к разделам.

Примеры:

• Фиксированное меню – остается на экране при прокрутке.

• Простое горизонтальное меню – удобно для быстрой навигации.

Вертикальное меню

Экономит пространство и часто размещается слева, так как пользователи привыкли читать слева направо. Может раскрываться по клику.

Примеры:

• Боковое меню – удобно для сайтов с большим количеством разделов.

• Скрытое меню – раскрывается при наведении.

Выпадающее меню

Идеально для сложных структур, например, интернет-магазинов, где у категорий есть подразделы.

Комбинированное меню

Сочетает несколько типов, например, горизонтальное меню с выпадающими списками или гамбургер-меню.

Меню в футере

Футер (нижняя часть сайта) часто содержит дополнительные ссылки, контакты и соцсети. Хорошо структурированное меню в футере улучшает навигацию.

Создание меню

Вот пример кода для создания меню:

<nav id="menu1">
    <ul>
        <li><a href="#m1">Главная</a></li>
        <li><a href="#m2">О нас</a></li>
        <li><a href="#m3">Услуги</a>
            <ul>
                <li><a href="#m3_1">Веб-разработка</a></li>
                <li><a href="#m3_2">Дизайн</a></li>
                <li><a href="#m3_3">SEO</a></li>
            </ul>
        </li>
        <li><a href="#m4">Контакты</a></li>
    </ul>
</nav>

Стилизация в CSS

#menu1 {
    position: relative;
    width: 100%;
    z-index: 10;
}

#menu1 ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#menu1 ul li {
    display: inline-block;
    position: relative;
}

#menu1 ul li a {
    display: block;
    padding: 10px 20px;
    text-decoration: none;
    color: #fff;
    background: #38b6ff;
}

#menu1 ul li ul {
    position: absolute;
    display: none;
    background: #38b6ff;
}

#menu1 ul li:hover ul {
    display: block;
}

#menu1 ul li ul li {
    display: block;
    width: 200px;
}

#menu1 ul li ul li a {
    padding: 8px 15px;
    border-top: 1px solid #fff;
}

Результат:

Получится выпадающее меню с анимацией при наведении. Этот код можно использовать на всех страницах сайта.

Итог

• Горизонтальное меню – для простых сайтов.

• Вертикальное меню – для экономии места.

• Выпадающее меню – для сложных структур.

• Комбинированное меню – для гибкости.

• Меню в футере – для дополнительной навигации.