Как создать меню навигации на сайте

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

Станьте веб-разработчиком с нуля за 15 месяцев на курсе онлайн-университета Skypro. Преподаватели — практикующие эксперты из VK, «Альфа-Банка», Skyeng и других крупных компаний. В программе нет лишней теории, зато много практических заданий, а результаты курсовых можно положить в портфолио. Специалисты центра карьеры помогут с резюме, сопроводительными письмами и собеседованиями.

HTML: Разметка меню навигации

Для начала, создадим базовую разметку меню навигации с использованием HTML. Воспользуемся элементом <nav> и списком <ul> для структурирования наших ссылок.

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

CSS: Стилизация меню навигации

Теперь, когда у нас есть базовая разметка, давайте добавим стили с помощью CSS. Пример стилей для нашего меню:

/* Сброс стилей списка */
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

/* Стилизация элементов списка */
nav li {
  display: inline-block;
  margin-right: 20px;
}

/* Стилизация ссылок */
nav a {
  text-decoration: none;
  color: #333;
}

/* Стилизация ссылок при наведении */
nav a:hover {
  color: #007bff;
}

На курсе Skypro «Веб-разработчик» освоите JavaScript, GitHub, Tilda, Postman, HTML, CSS и другие программы и инструменты, научитесь решать реальные задачи разработчика и работать в команде. Все учебные проекты можно положить в портфолио и устроиться на работу по новой специальности еще в процессе обучения.

Курсы по программированию

Помогаем получить новую профессию с гарантией трудоустройства!

Подробнее

JavaScript: Добавление интерактивности

Иногда требуется добавить интерактивность к нашему меню навигации, например, для создания выпадающего меню или мобильного меню. В этом случае мы можем использовать JavaScript или библиотеки, такие как jQuery.

Пример простого выпадающего меню с использованием JavaScript:

<nav>
  <ul>
    <li><a href="#home">Главная</a></li>
    <li><a href="#about">О нас</a></li>
    <li>
      <a href="#services">Услуги</a>
      <ul class="dropdown">
        <li><a href="#service1">Сервис 1</a></li>
        <li><a href="#service2">Сервис 2</a></li>
        <li><a href="#service3">Сервис 3</a></li>
      </ul>
    </li>
    <li><a href="#contacts">Контакты</a></li>
  </ul>
</nav>

/* Скрытие выпадающего меню */
.dropdown {
  display: none;
}

/* Позиционирование выпадающего меню */
nav li:hover .dropdown {
  display: block;
  position: absolute;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 10px;
}

/* Стилизация элементов выпадающего меню */
.dropdown li {
  display: block;
  margin-bottom: 5px;
}

С этими примерами вы сможете создать базовое меню навигации для своего сайта и настроить его в соответствии с потребностями вашего проекта. Успехов в изучении веб-разработки! 😉

Тест на профориентацию

За 10 минут узнайте, как ваш опыт пригодиться в IT индустрии

Подробнее