872 подписчика

Создание адаптивного меню сайта на HTML и CSS: Руководство

22 июня 202322 июн 2023

147

1 мин

пошаговое руководство по созданию красивого и адаптивного меню сайта с использованием HTML и CSS. Вы узнаете, как использовать различные техники и примеры HTML кода, чтобы создать эффективное и удобное меню для вашего веб-сайта.

Как сделать меню сайта в HTML и CSS

С чего начать продвижение в интернете? Читайте нашу статью.

Меню сайта является важной частью пользовательского опыта и навигации. Вот пошаговое руководство, которое поможет вам создать стильное и адаптивное меню с использованием HTML и CSS:

1. Создайте HTML структуру меню

<nav>
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">О нас</a></li>
<li><a href="#">Услуги</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</nav>

2. Оформите меню с помощью CSS

nav { background-color: #f2f2f2;}

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

li { display: inline-block;}

a { display: block; padding: 10px; text-decoration: none; color: #333;}

a:hover { background-color: #333; color: #fff;}

3. Добавьте стили для адаптивности

@media screen and (max-width: 768px) {
nav {
display: flex;
justify-content: center;
align-items: center;
}

ul {
flex-direction: column;
}

li {
margin-bottom: 10px;
}
}

4. Добавьте дополнительные эффекты и функциональность

Добавление активного состояния для текущей страницы:

Html:

<li><a href="#" class="active">Главная</a></li>

CSS:

a.active { font-weight: bold;}

Создание выпадающего меню:

Html:

<li>
<a href="#">Услуги</a>
<ul class="dropdown">
<li><a href="#">Веб-дизайн</a></li>
<li><a href="#">Разработка приложений</a></li>
<li><a href="#">SEO-оптимизация</a></li>
</ul>
</li>

CSS:

.dropdown { display: none;}
li:hover .dropdown { display: block;}

Заключение

Создание стильного и адаптивного меню сайта с помощью HTML и CSS несложно, если вы следуете правильной структуре и применяете соответствующие стили. Примените эти шаги и настройте меню под свои потребности, добавляя дополнительные эффекты и функциональность. Помните, что хорошо спроектированное и удобное меню улучшит пользовательский опыт на вашем веб-сайте.

Полезное Web-мастеру: