Меню на html и css

Если вы делаете многостраничный сайт или Lending с якорными ссылками, то вам надо позаботиться о создание навигации по сайту. В этой статье мы создадим структуру меню и добавим ему немного стилей.

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

Горизонтальный вид меню придается с помощью свойства display: inline; для элементов <li>, таким образом пункты меню будут располагаться друг за другом.

Создадим структуру меню с помощью маркированного списка:

<ul id="navbar">
  <li><a href="#">Главная</a></li>
  <li><a href="#">Блог</a></li>
  <li><a href="#">Контакты</a></li>
  <li><a href="#">О нас</a></li>
</ul>

Сбросим стили, которые заложены в списки по умолчанию и сделаем наш список не блочным, а строчным, с помощью display: inline :

#navbar {
   margin: 0;
   padding: 0; 
   list-style-type: none;
}
#navbar li { 
   display: inline; 
}

Структура меню готова, теперь все пункты меню выстроены друг за другом в строчку, нам осталось только немного стилизовать навигацию:

<style>
#navbar {
   margin: 0;
   padding: 0;
   list-style-type: none;
   border-radius: 5px 5px;
   text-align: center;
   background-color: #2979FF;
}
#navbar li { 
   display: inline; 
}
#navbar a {
   color: #fff;
   padding: 5px 1px;
   text-decoration: none;
   font-weight: bold;
   display: inline-block;
   width: 100px;
}
#navbar a:hover {
   border-radius: 5px 5px;
   background-color: #0066FF;
}
</style>

<ul id="navbar">
  <li><a href="#">Главная</a></li>
  <li><a href="#">Блог</a></li>
  <li><a href="#">Контакты</a></li>
  <li><a href="#">О нас</a></li>
</ul>

Вы можете посмотреть на результат, нажав на кнопку play.

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

Структура меню:

<ul id="navbar">
  <li><a href="#">Главная</a></li>
  <li><a href="#">Блог</a></li>
  <li><a href="#">Контакты</a></li>
  <li><a href="#">О нас</a></li>
</ul>

Html вертикального меню не отличается от горизонтального. Сейчас нам надо также убрать стили по умолчанию, а именно убрать внешние и внутренние отступы у списка и убрать маркеры у пунктов меню:

#navbar {
  margin: 0;
  padding: 0;
  list-style-type: none;
  width: 100px;
}

А теперь зададим стили нашему меню и объединим весь код в один:

<style>
#navbar {
   margin: 0;
   padding: 0;
   list-style-type: none;
   width: 100px;
}
#navbar li {
   border-bottom: 1px solid #666;
}
#navbar a {
   background-color: #00ACC1;
   color: #fff;
   padding: 5px;
   text-decoration: none;
   font-weight: bold;
   border-left: 5px solid #8E24AA;
   display: block;
}
#navbar a:hover {
   background-color: #CE93D8;
   border-left: 5px solid #AB47BC;
}
</style>

<ul id="navbar">
  <li><a href="#">Главная</a></li>
  <li><a href="#">Блог</a></li>
  <li><a href="#">Контакты</a></li>
  <li><a href="#">О нас</a></li>
</ul>