Доверьте продвижение нам

Lion Digital Agency

интернет-маркетинг

теги: ,

Категории

Рубрики

Настройка и сопровождение рекламного кабинета Яндекс Директ.

от 14000 

Продвижение на авито под ключ. Получите клиентов в первую неделю. Создадим до 50тыс похожих объявлений!

от 29500 

Подходит для небольших стартапов и тех, кто еще не рекламировал свой бизнес в интернете. Разработка сайта (до 5 страниц) + Яндекс Директ / ВК реклама.

от 69000 

Как создать меню в html CSS

Существует несколько способов создания меню на HTML и CSS, но наиболее популярными являются использование списков и навигационных ссылок.

Вот пример 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>

Здесь создается навигационное меню внутри тега <nav>. Внутри меню создается список с помощью тега <ul>. Каждый пункт меню представлен элементом списка <li>, внутри которого размещается ссылка на страницу с помощью тега <a>. Для того, чтобы просто выделить активный пункт, можно навесить на него класс active.

А теперь CSS стили для этого меню:

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

nav li {
  display: inline-block;
  margin-right: 10px;
}

nav li:last-child {
  margin-right: 0;
}

nav a {
  display: block;
  padding: 5px;
  text-decoration: none;
  color: #333;
  font-weight: bold;
  transition: color 0.3s ease;
}

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

Здесь задаются стили для элементов списка и ссылок. Список стиль «список без маркеров» (list-style: none), а также задается отступ между элементами списка с помощью свойства margin. Элементы списка размещаются друг за другом в строку благодаря свойству display: inline-block. Для ссылок задаются стили для отступов, цвет текста, шрифт и другие параметры. Кроме того, прописываются стили для наведения мыши на ссылки.

Результат будет выглядеть примерно так:

menu-example

Конечно, этот пример является только основой и может быть изменен, чтобы соответствовать требованиям дизайна сайта.

Поделиться:

Комментарии

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Задать вопрос

Оставляя заявку, вы соглашаетесь с политикой обработки персональных данных.

Меню

Оставить заявку

Оставляя заявку, вы соглашаетесь с политикой обработки персональных данных.