Горизонтальное меню для сайта html

Горизонтальное меню представляет собой список разделов сайта, поэтому логичнее разметить внутри элемента <ul>, а затем применить CSS-стили к его элементам. Такое расположение меню является наиболее распространенным в силу очевидных преимуществ в его позиционировании на веб-странице.

Перейти на страницу с примерами

Как сделать горизонтальное меню: разметка и примеры оформления

  • Содержание:
  • HTML-разметка и базовые стили для горизонтального меню
  • 1. Адаптивное меню с эффектом подчёркивания при наведении на ссылку
  • 2. Адаптивное меню для свадебного сайта
  • 3. Адаптивное меню с фестонами
  • 4. Адаптивное меню на ленточке
  • 5. Адаптивное меню с логотипом по середине
  • 6. Адаптивное меню с логотипом слева

HTML-разметка и базовые стили для горизонтального меню

По умолчанию все элементы списка <li>...</li> располагаются вертикально, занимая по ширине всю ширину элемента контейнера <ul>...</ul>, который в свою очередь занимает всю ширину его блока-контейнера.

HTML разметка для горизонтальной навигации

<ul>  <li><a href="">Пункт меню</a></li>  <li><a href="">Пункт меню</a></li>  <li><a href="">Пункт меню</a></li>  ...  </ul>

Горизонтальное меню, находящееся внутри тега <ul>...</ul>, можно дополнительно помещать внутрь элемента <nav>...</nav> и/или <header>...</header>. Благодаря этому html-разметке придается семантический смысл, а также появляется дополнительная возможность для форматирования блока меню.

Существует несколько способов разместить их горизонтально. Для начала нужно сбросить стили браузера по умолчанию для элементов навигации:

ul {   list-style: none; /*убираем маркеры списка*/   margin: 0; /*убираем верхнее и нижнее поле, равное 1em*/   padding-left: 0; /*убираем левый отступ, равный 40px*/  }  a {text-decoration: none; /*убираем подчеркивание текста ссылок*/}

See the Pen GJxayB by Elena Nazarova (@nazarelen) on CodePen.

Способ 1. li {display: inline;}

Делаем элементы списка строчными. В результате они располагаются по горизонтали, с правой стороны между ними добавляется промежуток, равный 0.4em (вычисляется относительно размера шрифта). Чтобы убрать его, добавляем для li отрицательное правое поле li {margin-right: -4px;}. Дальше стилизуем ссылки по своему желанию.

Способ 2. li {float: left;}

Делаем элементы списка плавающими. В результате они располагаются по горизонтали. Высота блока-контейнера ul становится равной нулю. Чтобы решить эту проблему, добавляем для ul {overflow: hidden;}, расширяя его и позволяя ему таким образом содержать плавающие элементы. Для ссылок добавляем a {display: block;} и стилизуем их по своему желанию.

Способ 3. li {display: inline-block;}

Делаем элементы списка строчно-блочными. Они располагаются по горизонтали, с правой стороны образуется промежуток, как и в первом случае. Для ссылок добавляем a {display: block;} и стилизуем их по своему желанию.

Способ 4. ul {display: flex;}

Делаем список ul гибким контейнером с помощью модели CSS3 flexbox. В результате элементы списка располагаются горизонтально. Добавляем для ссылок a {display: block;} и стилизуем их по своему желанию.

1. Адаптивное меню с эффектом подчёркивания при наведении на ссылку

<ul class="menu-main">   <li><a href="" class="current">Work</a></li>   <li><a href="">About</a></li>   <li><a href="">Blog</a></li>   <li><a href="">Contact</a></li>  </ul>
@import url('https://fonts.googleapis.com/css?family=Ubuntu+Condensed');  .menu-main {   list-style: none;   margin: 40px 0 5px;   padding: 25px 0 5px;   text-align: center;   background: white;  }  .menu-main li {display: inline-block;}  .menu-main li:after {   content: "|";   color: #606060;   display: inline-block;   vertical-align:top;  }  .menu-main li:last-child:after {content: none;}  .menu-main a {   text-decoration: none;   font-family: 'Ubuntu Condensed', sans-serif;   letter-spacing: 2px;   position: relative;   padding-bottom: 20px;   margin: 0 34px 0 30px;   font-size: 17px;   text-transform: uppercase;   display: inline-block;   transition: color .2s;  }  .menu-main a, .menu-main a:visited {color: #9d999d;}  .menu-main a.current, .menu-main a:hover{color: #feb386;}  .menu-main a:before,  .menu-main a:after {   content: "";   position: absolute;   height: 4px;   top: auto;   right: 50%;   bottom: -5px;   left: 50%;   background: #feb386;   transition: .8s;  }  .menu-main a:hover:before, .menu-main .current:before {left: 0;}  .menu-main a:hover:after, .menu-main .current:after {right: 0;}   @media (max-width: 550px) {  .menu-main {padding-top: 0;}  .menu-main li {display: block;}  .menu-main li:after {content: none;}  .menu-main a {   padding: 25px 0 20px;    margin: 0 30px;  }  }

2. Адаптивное меню для свадебного сайта

<nav class="top-menu">   <ul class="menu-main">   <li><a href="" class="current">Work</a></li>   <li><a href="">About</a></li>   <li><a href="">Blog</a></li>   <li><a href="">Contact</a></li>   </ul>  </nav>
@import url('https://fonts.googleapis.com/css?family=PT+Sans');  .top-menu {   position: relative;    background: #fff;   box-shadow: inset 0 0 10px #ccc;  }  .top-menu:before,  .top-menu:after {   content: "";   display: block;   height: 1px;   border-top: 3px solid #575350;   border-bottom: 1px solid #575350;   margin-bottom: 2px;  }  .top-menu:after {   border-bottom: 3px solid #575350;   border-top: 1px solid #575350;   box-shadow: 0 2px 7px #ccc;   margin-top: 2px;  }  .menu-main {   list-style: none;   padding: 0 30px;   margin: 0;   font-size: 18px;   text-align: center;   position: relative;  }  .menu-main:before,  .menu-main:after {   content: "25C8";   line-height: 1;   position: absolute;   top: 50%;   transform: translateY(-50%);  }  .menu-main:before {left: 15px;}  .menu-main:after {right: 15px;}  .menu-main li {   display: inline-block;   padding: 5px 0;  }  .menu-main a {   text-decoration: none;   display: inline-block;   margin: 2px 5px;   padding: 6px 15px;   font-family: 'PT Sans', sans-serif;   font-size: 16px;   color: #777777;   border-bottom: 1px solid transparent;   transition: .3s linear;  }  .menu-main .current, .menu-main a:hover {   border-radius: 3px;   background: #f3ece1;   color: #313131;   text-shadow: 0 1px 0 #fff;   border-color: #c6c6c6;  }  @media (max-width: 500px) {   .menu-main li {display: block;}  }

3. Адаптивное меню с фестонами

<ul class="menu-main">   <li><a href="" class="current">Work</a></li>   <li><a href="">About</a></li>   <li><a href="">Blog</a></li>   <li><a href="">Contact</a></li>  </ul>
@import url('https://fonts.googleapis.com/css?family=PT+Sans+Caption');  .menu-main {   list-style: none;   padding: 0 30px;   margin: 0;   font-size: 18px;   text-align: center;   position: relative;   background: white;  }  .menu-main:after {   content: "";   position: absolute;   width: 100%;   height: 20px;   left: 0;   bottom: -20px;   background: radial-gradient(white 0%, white 70%, rgba(255,255,255,0) 70%, rgba(255,255,255,0) 100%) 0 -10px;   background-size: 20px 20px;   background-repeat: repeat-x;  }  .menu-main li {display: inline-block;}  .menu-main a {   text-decoration: none;   display: inline-block;   margin: 0 15px;   padding: 10px 30px;   font-family: 'PT Sans Caption', sans-serif;   color: #777777;   transition: .3s linear;   position: relative;  }  .menu-main a:before,  .menu-main a:after {   content: "";   position: absolute;   top: calc(50% - 3px);   width: 6px;   height: 6px;   border-radius: 50%;   background: #F58262;   opacity: 0;   transition: .5s ease-in-out;  }  .menu-main a:before {left: 5px;}  .menu-main a:after {right: 5px;}  .menu-main a.current:before,  .menu-main a.current:after,  .menu-main a:hover:before,   .menu-main a:hover:after {opacity: 1;}  .menu-main a.current,  .menu-main a:hover {color: #F58262;}  @media(max-width:680px) {   .menu-main li {display: block;}  }

4. Адаптивное меню на ленточке

<nav class="top-menu">   <ul class="menu-main">   <li><a href="" class="current">Work</a></li>   <li><a href="">About</a></li>   <li><a href="">Blog</a></li>   <li><a href="">Contact</a></li>   </ul>  </nav>
@import url('https://fonts.googleapis.com/css?family=PT+Sans+Caption');  .top-menu {   margin: 0 60px;   position: relative;   background: #5A394E;    box-shadow:    inset 1px 0 0 rgba(255,255,255,.1),    inset -1px 0 0 rgba(255,255,255,.1),    inset 150px 0 150px -150px rgba(255,255,255,.12),    inset -150px 0 150px -150px rgba(255,255,255,.12);  }  .top-menu:before,  .top-menu:after {   content: "";   position: absolute;   z-index: 2;   left: 0;   width: 100%;   height: 3px;  }  .top-menu:before {   top: 0;   border-bottom: 1px dashed rgba(255,255,255,.2);  }  .top-menu:after {   bottom: 0;   border-top: 1px dashed rgba(255,255,255,.2);  }  .menu-main {   list-style: none;   padding: 0;   margin: 0;   text-align: center;  }  .menu-main:before,   .menu-main:after {   content: "";   position: absolute;   width: 50px;   height: 0;   top: 8px;   border-top: 18px solid #5A394E;   border-bottom: 18px solid #5A394E;   transform: rotate(360deg);   z-index: -1;  }  .menu-main:before {   left: -30px;   border-left: 12px solid rgba(255, 255, 255, 0);  }  .menu-main:after {   right: -30px;   border-right: 12px solid rgba(255, 255, 255, 0);  }  .menu-main li {   display: inline-block;   margin-right: -4px;  }  .menu-main a {   text-decoration: none;   display: inline-block;   padding: 15px 30px;   font-family: 'PT Sans Caption', sans-serif;   color: white;   transition: .3s linear;  }  .menu-main a.current,  .menu-main a:hover {background: rgba(0,0,0,.2);}  @media (max-width: 680px) {  .top-menu {margin: 0;}  .menu-main li {   display: block;   margin-right: 0;  }  .menu-main:before,   .menu-main:after {content: none;}  .menu-main a {display: block;}  }

5. Адаптивное меню с логотипом по середине

<nav class="top-menu">   <ul class="menu-main">   <li class="left-item"><a href="">Work</a></li>   <li class="left-item"><a href="">About</a></li>   <li class="left-item"><a href="">Story</a></li>   <li class="right-item"><a href="">Contact</a></li>   <li class="right-item"><a href="">Shop</a></li>   <li class="right-item"><a href="">Gallery</a></li>  </ul>   <a class="navbar-logo" href=""><img src="https://html5book.ru/wp-content/uploads/2017/04/lily-logo.png"></a>  </nav>
@import url('https://fonts.googleapis.com/css?family=Arimo');  .top-menu {   position: relative;   background: rgba(34,34,34,.2);  }  .menu-main {   list-style: none;   margin: 0;   padding: 0;  }  .menu-main:after {   content: "";   display: table;   clear: both;  }  .left-item {float: left;}  .right-item {float: right;}  .navbar-logo {   position: absolute;   left: 50%;   top: 50%;   transform: translate(-50%,-50%);  }  .menu-main a {   text-decoration: none;   display: block;   line-height: 80px;   padding: 0 20px;   font-size: 18px;   letter-spacing: 2px;   font-family: 'Arimo', sans-serif;   font-weight: bold;   color: white;   transition: .3s linear;  }  .menu-main a:hover {background: rgba(0,0,0,.3);}  @media (max-width: 830px) {  .menu-main {   padding-top: 90px;   text-align: center;  }  .navbar-logo {   position: absolute;   left: 50%;   top: 10px;   transform: translateX(-50%);  }  .menu-main li {   float: none;   display: inline-block;  }  .menu-main a {   line-height: normal;   padding: 20px 15px;   font-size: 16px;  }  }  @media (max-width: 630px) {  .menu-main li {display: block;}  }

6. Адаптивное меню с логотипом слева

<nav class="top-menu">   <a class="navbar-logo" href=""><img src="https://html5book.ru/wp-content/uploads/2017/04/lily-logo.png"></a>   <ul class="menu-main">   <li><a href="">Work</a></li>   <li><a href="">About</a></li>   <li><a href="">Story</a></li>   <li><a href="">Shop</a></li>   <li><a href="">Gallery</a></li>   <li><a href="">Contact</a></li>   </ul>  </nav>
@import url('https://fonts.googleapis.com/css?family=Arimo');  .top-menu {   background: rgba(255,255,255,.5);   box-shadow: 3px 0 7px rgba(0,0,0,.3);   padding: 20px;  }  .top-menu:after {   content: "";   display: table;   clear: both;  }  .navbar-logo {display: inline-block;}  .menu-main {   list-style: none;   margin: 0;   padding: 0;   float: right;  }  .menu-main li {display: inline-block;}  .menu-main a {   text-decoration: none;   display: block;   position: relative;   line-height: 61px;   padding-left: 20px;   font-size: 18px;   letter-spacing: 2px;   font-family: 'Arimo', sans-serif;   font-weight: bold;   color: #F73E24;   transition:.3s linear;  }  .menu-main a:before {   content: "";   width: 9px;   height: 9px;   background: #F73E24;   position: absolute;   left: 50%;   transform: rotate(45deg) translateX(6.5px);   opacity: 0;   transition: .3s linear;  }  .menu-main a:hover:before {opacity: 1;}  @media (max-width: 660px) {  .menu-main {   float: none;   padding-top: 20px;  }  .top-menu {   text-align: center;   padding: 20px 0 0 0;  }  .menu-main a {padding: 0 10px;}  .menu-main a:before {transform: rotate(45deg) translateX(-6px);}  }  @media (max-width: 600px) {  .menu-main li {display: block;}  }

html5book.ru

HTML-код для горизонтального меню

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

Для создания меню используют теги <ul>, <li> и <a>.

Если вам не совсем понятно, что такое эти html-теги, css, таблицы, то почитайте об основных технологиях для создания сайта.

Пример использования html тегов для создания меню в коде ниже:

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

Стандартные CSS стили для горизонтального меню

ul {   list-style: none; /*убираем маркеры списка*/   margin: 0; /*убираем отступы*/   padding-left: 0; /*убираем отступы*/  }  a {   text-decoration: none; /*убираем подчеркивание текста ссылок*/  }  li {   float:left; /*Размещаем список горизонтально для реализации меню*/    margin-right:5px; /*Добавляем отступ у пунктов меню*/  }

Мы получаем готовое верхнее меню в шапку, без каких-либо особых стилей и наворотов это можно назвать каркасом вашего будущего красивого меню. Если вы скопируете и поставите у себя данный html и css это будет выглядеть следующим образом.

Пример каркаса (шаблона) вашего будущего меню

Получилось все достаточно простенько, вы ,конечно же, хотите сразу красивое главное меню, но без понимания основ у вас просто не получится создать хорошее меню без ошибок в html и css.

Существует так же несколько других CSS методов используемых для того чтобы сделать меню горизонтальным помимо float:left;, например, display:inline-block; или display:flex;, но рекомендуется использовать способ описанный выше.

Давайте же наполним наш шаблон меню различными стилями и сделаем его красивым.

Примеры красивого горизонтального меню для сайта

Сейчас я приведу несколько готовых примеров с готовым дизайном горизонтального меню.

Все «красивости» вы можете создать для своего сайта сами, а не искать в интернете. Проще всего это сделать взяв за основу один из примеров ниже

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

CSS стили «верхнего» меню

Ниже расположены стили данного меню. HTML остается тем же, что и в «каркасе» меню.

ul {   list-style: none; /*убираем маркеры списка*/   margin: 0; /*убираем отступы*/   padding-left: 0; /*убираем отступы*/   margin-top:25px; /*делаем отступ сверху*/  }  a {   text-decoration: none; /*убираем подчеркивание текста ссылок*/   background:#30A8E6; /*добавляем фон к пункту меню*/   color:#fff; /*меняем цвет ссылок*/   padding:10px; /*добавляем отступ*/   font-family: arial; /*меняем шрифт*/   border-radius:4px; /*добавляем скругление*/   -moz-transition: all 0.3s 0.01s ease; /*делаем плавный переход*/   -o-transition: all 0.3s 0.01s ease;   -webkit-transition: all 0.3s 0.01s ease;  }  a:hover {   background:#1C85BB;/*добавляем эффект при наведении*/  }  li {   float:left; /*Размещаем список горизонтально для реализации меню*/   margin-right:5px; /*Добавляем отступ у пунктов меню*/     }

Главное меню, расположенное на цветной линии с красным фоном

CSS стили меню на цветной линии

ul {   list-style: none; /*убираем маркеры списка*/   margin: 0; /*убираем отступы*/   padding-left: 0; /*убираем отступы*/   margin-top:25px; /*делаем отступ сверху*/   background:#FF4444; /*добавляем фон всему меню (заменив этот параметр, вы поменяете цвет всего меню)*/   height: 50px; /*задаем высоту*/  }  a {   text-decoration: none; /*убираем подчеркивание текста ссылок*/   background:#FF4444; /*добавляем фон к пункту меню (заменив этот параметр, вы поменяете цвет всех пунктов меню)*/   color:#fff; /*меняем цвет ссылок*/   padding:0px 15px; /*добавляем отступ*/   font-family: arial; /*меняем шрифт*/   line-height:50px; /*ровняем меню по вертикали*/   display: block;    border-right: 1px solid #F36262; /*добавляем бордюр справа*/   -moz-transition: all 0.3s 0.01s ease; /*делаем плавный переход*/   -o-transition: all 0.3s 0.01s ease;   -webkit-transition: all 0.3s 0.01s ease;    }  a:hover {   background:#D43737;/*добавляем эффект при наведении*/  }  li {   float:left; /*Размещаем список горизонтально для реализации меню*/  }

Выпадающее меню на HTML+CSS

Для реализации дополнительного выпадающего (раскрывающегося) меню на сайте у какого-либо пункта меню нам необходимо добавить дополнительный перечень пунктов в HTML-код для какой-либо ссылки из горизонтального меню и изменить стили CSS. В стилях мы будем применять простой трюк — изменение отображения раскрывающегося меню по средствам наведения на нужный нам пункт в верхнем меню. Для примера возьмем пункт «услуги».

Пример создания простого выпадающего меню

HTML код выпадающего меню

<ul>   <li><a href="#">Главная</a></li>   <li><a href="#">Услуги</a>   <ul>   <li><a href="#">Услуга 1</a></li>   <li><a href="#">Длинная услуга 2</a></li>   <li><a href="#">Услуга 3</a></li>   </ul>   </li>    <li><a href="#">Цены</a></li>   <li><a href="#">Контакты</a></li>  </ul>

Стили CSS выпадающего меню

ul {   list-style: none; /*убираем маркеры списка*/   margin: 0; /*убираем отступы*/   padding-left: 0; /*убираем отступы*/   margin-top:25px; /*делаем отступ сверху*/   background:#819A32; /*добавляем фон всему меню*/   height: 50px; /*задаем высоту*/  }  a {   text-decoration: none; /*убираем подчеркивание текста ссылок*/   background:#819A32; /*добавляем фон к пункту меню*/   color:#fff; /*меняем цвет ссылок*/   padding:0px 15px; /*добавляем отступ*/   font-family: arial; /*меняем шрифт*/   line-height:50px; /*ровняем меню по вертикали*/   display: block;    border-right: 1px solid #677B27; /*добавляем бордюр справа*/   -moz-transition: all 0.3s 0.01s ease; /*делаем плавный переход*/   -o-transition: all 0.3s 0.01s ease;   -webkit-transition: all 0.3s 0.01s ease;    }  a:hover {   background:#D43737;/*добавляем эффект при наведении*/  }  li {   float:left; /*Размещаем список горизонтально для реализации меню*/   position:relative; /*задаем позицию для позиционирования*/  }      /*Стили для скрытого выпадающего меню*/   li > ul {   position:absolute;   top:25px;   display:none;    }      /*Делаем скрытую часть видимой*/   li:hover > ul {   display:block;    width:250px; /*Задаем ширину выпадающего меню*/    }   li:hover > ul > li {   float:none; /*Убираем горизонтальное позиционирование*/   }

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

Я постарался максимально кратко рассказать вам о том как создать главное горизонтальное меню, сделать несколько шаблонов, как добавить к нему простые стили и сделать его симпатичнее, как сделать выпадающее меню для вашего сайта. Для удобства я собрал все меню, представленные выше, в одном html-файле, который вы можете скачать ниже. Выглядит это как на скриншоте: Подборка красивых горизонтальных меню на html+css

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

Благодарю за внимание.

nz4.ru

Как сделать в html5 меню

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

В чем отличия

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

Ну хорошо, а чем же отличается создание главной навигации (меню), раз уж вы читаете статью на эту тему, то какие-то отличия точно должны быть. Ну а как раньше создавалось меню? Обычно для этого использовали маркированный список, который помещали в дополнительный контейнер для всей навигации – обычный div.

Так вот, с появлением новых тегов теперь можно поступить более правильно – вместо тега div обернуть меню в nav – новый семантический элемент, который создан специально для того, чтобы собирать в него самые главные ссылки, группировать их вместе.

В nav можно поместить как список, так и просто набор ссылок. Мне кажется, это даже более простое и правильное решение, хотя во многих шаблонах по-прежнему видно реализацию меню с помощью тегов ul, li, a.

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

Как сделать с помощью html5 горизонтальное меню

Поскольку теперь ссылки можно помещать в семантический элемент nav, то создание горизонтальной навигации я вижу очень просто.

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

Другое дело, что по оформлению они очень ограничены из-за своих строчных свойств. Вы сможете оперировать только такими свойствами как: цвет, размер шрифта, внешние отступы. Если же вы захотите задать определенный фоновый цвет, сделать разделители и добавить внутренние отступы (либо определить размер каждого пункта меню) то со строкой так сделать не получится.

Тут нам придется преобразовывать наши пункты в блочные элементы. Для этого им нужно записать свойство:

Теперь они идут сверху вниз, то есть наша навигация стала вертикальной. Чтобы вновь превратить ее в горизонтальную, нужно добавить определенные свойства. Например, вместо блочного типа определить для них блочно-строчный, либо задать им (float: left). Читайте подробнее об этих способах здесь.

Горизонтальное меню для сайта html

Вертикальная навигация

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

Теперь вы можете применить к ним нужные правила оформления. На блоки действует гораздо больше свойств, чем на строчный элемент, поэтому вы имеете куда больше возможностей. Для примера я добавил такие:

Горизонтальное меню для сайта html

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

Что еще можно сделать

Наконец, давайте посмотрим, как можно сделать меню в html5 с изменением цвета пунктов при наведении. За добавление стилей к элементу при наведении отвечает псевдокласс hover. Соответственно, достаточно его добавить к ссылкам и написать нужные стили.

Горизонтальное меню для сайта html

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

Ну а что еще можно сделать с нашей навигацией, это уже вы сами можете решить. Это был просто пример того, как ее можно создать и оформить. Вы можете воспользоваться любыми css-свойствами, которые только знаете. Кстати, для очень эффектного оформления любых элементов на веб-странице я рекомендую вам просмотреть видеокурс по CSS3, который есть в нашем премиум-разделе.

Там вы можете найти всю соответствующую информацию: тени, повороты, трансформации, полупрозрачность и т.д. Все лучшие приемы из новой технологии вы можете найти там.

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

Горизонтальное меню для сайта html

webformyself.com

ДемоИсходники

Приветствую Вас, уважаемые читатели блога webcodius! Обязательным элементом практически любого сайта является меню. Поэтому если Ваш сайт имеет больше одной страницы, то без навигационного меню скорей всего не обойтись. Ведь без меню пользователю будет трудно найти нужные ему странички.

Так как любое меню представляет из себя список ссылок, которые ведут на внутренние страницы сайта. Для создания меню обычно используют маркированные списки, которые создаются с помощью html тегов <ul> и <li>. Но как известно элементы списка по умолчанию выстраиваются вертикально друг под другом, а что если необходимо сделать горизонтальное меню? С использованием CSS это не является большой проблемой.

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

<ul id=»menu»>
    <li><a href=»#»>Главная</a></li>
    <li><a href=»#»>Новости</a></li>
    <li><a href=»#»>Контакты</a></li>
    <li><a href=»#»>О сайте</a></li>
</ul>

Для того чтобы идентифицировать список и задать для него нужные css стили, я добавил к нему атрибут id с идентификатором "menu".

По умолчанию без каких-либо правил CSS он будет выглядеть следующим образом:

  • Главная
  • Новости
  • Контакты
  • О сайте

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

Если же требуется получить горизонтальное меню, то просто необходимо расположить элементы списка по горизонтали. Для этого к селектору LI следует добавить стилевое свойство display со значением inline или inline-block. Я буду использовать правило display:inline-block. Итак, для того, чтобы элементы списка выстроились по горизонтали просто добавляем код CSS:

<style>
    ul#menu li{
        display:inline-block; /* расположить пункты горизонтально */
    }
</style>

Теперь элементы списка будут расположены по горизонтали:

Как видим пункты меню выстроились в один горизонтальный ряд. Но пока на меню похоже не очень. Теперь, чтобы получить полноценную навигационную панель, оформим меню с помощью css стилей. Для начала добавим фон для панели, растянем ссылки на весь пункт <code>li</code>, уберем подчеркивание ссылок, настроим отступы и др.:

<style>
    #menu, #menu li {
        margin: 0; /* убрать внутренние отступы */
        padding: 0; /* убрать внешние отступы */
    }
    #menu {
        background: #03658e; /* цвет фона навигационной панели */
    }
    #menu li{
        display:inline-block; /* расположить пункты горизонтально */
        text-align: center; /* текст горизонтально по центру */
    }
    #menu a {
        display: block; /* ссылка растягивается на весь пункт li */
        padding: 5px 15px; /* задаем внутренние отступы */
        color: #fff; /* цвет текста */
        text-decoration: none; /* убрать нижнее подчёркивание у ссылок */
    }
    #menu a:hover {
        background: #8AB8CC; /* фон пунктов при наведении */
    }
</style>

В итоге получится такое привлекательное меню:

Вообще внешний вид меню далее зависит только от вашей фантазии и знания свойств css. Далее для примера приведу несколько вариантов оформления меню.

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

Выравнять меню по центру можно так:

<style>
    #menu, #menu li {
        margin: 0;
       padding: 0;
    }
    #menu {
        text-align: center; /* пункты и текст горизонтально по центру */
       background: #03658e;
    }
    #menu li{
        display:inline-block;
        text-align: center;
    }
    #menu a {
        display: block;
        padding: 5px 15px;
        color: #fff;
       font-size:150%;
       text-decoration: none;
    }
    #menu a:hover {
        background: #8AB8CC;
    }
</style>

Результат:

Либо так:

<style>
    #menu, #menu li {
        margin: 0;
        padding: 0;
    }
    #menu {
        max-width: 550px; /* ограничение длины панели */
        margin: 0 auto; /* навигационная панель по центру страницы */
        text-align: center;
        background: #03658e;
    }
    #menu li{
        display:inline-block;
        text-align: center;
    }
    #menu a {
        display: block;
        padding: 5px 15px;
        color: #fff;
        font-size:150%;
        text-decoration: none;
    }
    #menu a:hover {
        background: #8AB8CC;
    }
</style>

Результат:

webcodius.ru

В этой статье мы разберем, как сделать меню в html и как сделать меню в css. «Меню html» и «меню css» достаточно популярные поисковые запросы, начинающие блогеры хотят получить готовые коды html и css для создания меню. Если вы хотите создать горизонтальное, вертикальное или выпадающее меню, здесь присутствуют готовые коды на все эти разновидности меню. В статье представлен html код меню, который пригодится вам при создании меню. Также, здесь вы найдете css код меню (готовый стиль для меню), благодаря которому можно сделать красивое, анимационное меню.

Плейлист «Как создать сайт на WordPress»

TimeWeb лучший хостинг для WordPress: домен в подарок, 99 рублей в месяц.
Попробуйте, 10 дней бесплатно: РЕГИСТРАЦИЯ ОБЗОР ВИДЕО

Горизонтальное меню для сайта html

При необходимости все эти коды можно будет отредактировать под дизайн вашего сайта, изменив цвет текста или фона меню или любые другие компоненты кода.Горизонтальное меню для сайта htmlМеню один из самых важных элементов сайта, при помощи которого посетители находят нужную им информацию. От того, насколько красочно выглядит меню и насколько грамотно составлена навигация, напрямую зависит успешность вашего интернет ресурса. Если вы хотите сами создать красивое меню для сайта html, необязательно знать язык программирования, просто следуйте нашим рекомендациям. Достаточно вставить представленные в статье коды в определенные разделы редактора WordPress и вы сможете создать действительно классное меню.

Меню для сайта html. Горизонтальное меню html. Давайте рассмотрим пример создания меню с четырьмя пунктами: Главная, Все статьи, Услуги и Контакты (количество пунктов может быть любым). Вместо символа «#» нужно вставить ссылку, ведущую на пункт из меню. Вот так выглядит html код меню:

<div class="row">  <span class="header"></span>  <nav class="horizontal-nav center-nav">   <ul>   <li><a href="#">Главная</a></li>   <li><a href="#">Все статьи</a></li>   <li><a href="#">Услуги</a></li>   <li><a href="#">Контакты</a></li>   </ul>  </nav>  </div>

Внимание! На блоге в целях защиты авторского права включена защита от копирования текста стандартными методами. Чтобы скопировать код, в поле вывода кода в правом верхнем углу нажмите на плюс. После нажатия код откроется в новом окне, откуда его можно скопировать без каких-либо проблем.

Данный код пока еще не горизонтальное меню, отображается все следующим образом:

  • Главная
  • Статьи
  • Услуги
  • Контакты

Меню для сайта css. Горизонтальное меню css. Изменения стилей производятся в файле public_html/wp-content/themes/responsive/style.css (где responsive это название активной темы). Можно редактировать файл непосредственно на хостинге через файловый менеджер, либо добавить код через административную панель WordPress по адресу «Внешний вид» ⇒ «Редактор» ⇒ «Стили» ⇒ «Таблица стилей (style.css)».

Чтобы меню стало горизонтальным, к нему нужно подключить стили css. Также, чтобы меню стало красивым, к нему нужно добавить анимацию. Ниже представлен css код меню, который подключает анимацию и выравнивает меню по горизонтали:

{   -webkit-box-sizing: border-box;   -moz-box-sizing: border-box;   box-sizing: border-box;   padding: 0;  }    .row .header {   font-size: 9pt;   text-transform: uppercase;   font-weight: bold;   color: #0078c9;   text-align: center;   width: 100%;   display: block;   margin-bottom: 0px;  }      /* Общие стили */    nav.vertical-nav ul > li > a,  nav.horizontal-nav ul > li > a {   background-color: 0078c9;   color: #ffba00;   text-decoration: underline;   font-size: 12pt;   float: left;  }    nav.horizontal-nav ul > li > a,  nav.vertical-nav ul > li {   display: block;  }      nav.left { float: left; }  nav.right { float: right; }    nav.center-nav ul {display: table; margin: 0 auto;}    /* Горизонтальное меню */  nav.horizontal-nav,  nav.vertical-nav {   position: relative;  }    nav.horizontal-nav ul,  nav.vertical-nav ul {   list-style: none;  }    nav.horizontal-nav ul > li {   display: inline-block;   float: left;  }    nav.horizontal-nav ul > li > a {   padding: 10px 20px;  }    nav.horizontal-nav ul > li > a:hover,  nav.horizontal-nav ul > li > a:active,  nav.horizontal-nav ul > li > a:focus,  nav.vertical-nav ul > li > a:hover,  nav.vertical-nav ul > li > a:active,  nav.vertical-nav ul > li > a:focus {   background-color: rgba( 8, 0, 0, 0.25);   color: #ffffff;   }

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

В приложении выше нажав на вкладку «Result», можно посмотреть, как выглядит меню. Во вкладках «HTML» и «CSS» вставлены соответствующие коды, благодаря которым мы и видим конечный результат.

Посредством бесплатной среды веб-разработки jsFiddle можно в режиме реального времени редактировать и запускать код, написанный на html, css и JavaScript и видеть результат работы этих кодов. Потренируйтесь, отличный сервис (регистрация обязательна).

Как изменить меню. Теперь давайте рассмотрим, как изменить определенные компоненты кода, чтобы меню вписалось в дизайн вашего сайта.

Изменить цвет текста: (25 строка кода) color: #ffba00; меняете цвет на тот, который нужен вам.

Изменить цвет текста при наведении курсора мыши: color: #ffffff; (последняя строка стиля), меняете цвет на тот, который нужен вам.

Изменить цвет фона меню при наведении курсора мыши: (69 строка кода) background-color: rgba( 8, 0, 0, 0.25); меняете цвет на тот, который нужен вам.

Убрать подчеркивание ссылки: (25 строка кода) text-decoration: underline; (подчеркнутый текст) заменить на text-decoration: none; (нормальный текст, значение по умолчанию).

Благодаря изменениям в коде можно сделать красивое меню html, которое идеально впишется в цветовой дизайн любого сайта.

Как подключить стили css к html странице

В некоторых темах при редактировании файла «style.css» изменения не отображаются на сайте. В связи с этим возникают определенные трудности, когда начинаешь подключать стили к меню. В примере  css подключается к html странице автоматически. Если у вас нет в редакторе файла «style.css» или изменения, которые вы вносите в этот файл, не отображаются на блоге, вы можете прописать css прямо в html коде при помощи кода:

<style type="text/css">ВАШ СТИЛЬ</style>

Добавив код со стилями вместо надписи «ВАШ СТИЛЬ», вы подключите стили css к html странице.

Вы можете воспользоваться данным способом вывода меню в подвале сайта. Пример подобного меню можно посмотреть на этом блоге, просто спуститесь вниз страницы, там можно увидеть меню, которое подключено через футер посредством html кода и стилей css в виде единого кода. Вот такой код я добавил в файл footer.php и получил симпатичное горизонтальное меню:

<div class="row">  <span class="header"></span>  <nav class="horizontal-nav center-nav">   <ul>   <li><a href="http://busines-expert.com/">Главная</a></li>   <li><a href="http://busines-expert.com/vse-stati/">Все статьи</a></li>   <li><a href="http://busines-expert.com/uslugi/">Услуги</a></li>   <li><a href="http://busines-expert.com/kontakty/">Контакты</a></li>   <li><a href="http://busines-expert.com/investicionnyj-portfel-ot-busines-expert/">Инвестиции</a></li>   <li><a href="http://busines-expert.com/kak-zarabotat-v-internete-top-25-realnyx-sposobov-luchshie-sajty-dlya-zarabotka-deneg/">Способы заработка</a></li>   <li><a href="http://busines-expert.com/dlya-chego-sozdan-blog-busines-expert/">О проекте</a></li>   </ul>  </nav>  </div>  <style type="text/css">  {   -webkit-box-sizing: border-box;   -moz-box-sizing: border-box;   box-sizing: border-box;   padding: 0;  }    .row .header {   font-size: 9pt;   text-transform: uppercase;   font-weight: bold;   color: #0078c9;   text-align: center;   width: 100%;   display: block;   margin-bottom: 0px;  }      /* Общие стили */    nav.vertical-nav ul > li > a,  nav.horizontal-nav ul > li > a {   background-color: 0078c9;   color: #ffba00;   text-decoration: underline;   font-size: 12pt;   float: left;  }    nav.horizontal-nav ul > li > a,  nav.vertical-nav ul > li {   display: block;  }      nav.left { float: left; }  nav.right { float: right; }    nav.center-nav ul {display: table; margin: 0 auto;}    /* Горизонтальное меню */  nav.horizontal-nav,  nav.vertical-nav {   position: relative;  }    nav.horizontal-nav ul,  nav.vertical-nav ul {   list-style: none;  }    nav.horizontal-nav ul > li {   display: inline-block;   float: left;  }    nav.horizontal-nav ul > li > a {   padding: 10px 20px;  }    nav.horizontal-nav ul > li > a:hover,  nav.horizontal-nav ul > li > a:active,  nav.horizontal-nav ul > li > a:focus,  nav.vertical-nav ul > li > a:hover,  nav.vertical-nav ul > li > a:active,  nav.vertical-nav ul > li > a:focus {   background-color: rgba( 8, 0, 0, 0.25);   color: #ffffff;   }  </style>

Вертикальное меню html. Ниже представлен html код вертикального меню:

<div class="row">  <span class="header">Вертикальное меню</span>  <nav class="vertical-nav center-nav">   <ul>   <li><a href="#">Ссылка</a></li>   <li><a href="#">Ссылка</a></li>   <li><a href="#">Ссылка</a></li>   </ul>  </nav>  </div>

Вертикальное меню css. Ниже представлен css код вертикального меню:

/* Основные стили */    * {   -webkit-box-sizing: border-box;   -moz-box-sizing: border-box;   box-sizing: border-box;   padding: 0;  }    body {   font-size: 12pt;   font-family: Verdana, Tahoma, sans-serif;   color: #000;  }    /* Другие стили */  .row {   margin: 20px 0;   width: 100%;   float: left;   padding: 20px;   background-color: #FFFFFF;   border: 1px solid #D2D2D2;  }    .row .header {   font-size: 9pt;   text-transform: uppercase;   font-weight: bold;   color: #4E4E4E;   text-align: center;   width: 100%;   display: block;   margin-bottom: 10px;  }      /* Общие стили */    nav.vertical-nav ul > li > a,  nav.horizontal-nav ul > li > a {   background-color: #E4E4E4;   color: #5D5D5D;   text-decoration: none;   font-size: 11pt;   float: left;  }    nav.horizontal-nav ul > li > a,  nav.vertical-nav ul > li {   display: block;  }      nav.left { float: left; }  nav.right { float: right; }    nav.center-nav ul {display: table; margin: 0 auto;}    /* Горизонтальное меню */  nav.horizontal-nav,  nav.vertical-nav {   position: relative;  }    nav.horizontal-nav ul,  nav.vertical-nav ul {   list-style: none;  }    nav.horizontal-nav ul > li {   display: inline-block;   float: left;  }    nav.horizontal-nav ul > li > a {   padding: 10px 20px;  }    nav.horizontal-nav ul > li > a:hover,  nav.horizontal-nav ul > li > a:active,  nav.horizontal-nav ul > li > a:focus,  nav.vertical-nav ul > li > a:hover,  nav.vertical-nav ul > li > a:active,  nav.vertical-nav ul > li > a:focus {   background-color: #D4D4D4;  }      /* Вертикальное меню */    nav.vertical-nav ul {   width: 300px;  }    nav.vertical-nav ul > li {   float: left;  }    nav.vertical-nav ul > li,  nav.vertical-nav ul > li > a {   width: 100%;  }    nav.vertical-nav ul > li > a {   padding: 10px 0;   text-align: center;  }

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

Выпадающее меню html. Как сделать выпадающее меню в html. Ниже представлен html код выпадающего меню:

<ul>   <li><a href="#">Главная</a></li>   <li><a href="#">Услуги</a>   <ul>   <li><a href="#">Услуга 1</a></li>   <li><a href="#">Длинная услуга 2</a></li>   <li><a href="#">Услуга 3</a></li>   </ul>   </li>    <li><a href="#">Цены</a></li>   <li><a href="#">Контакты</a></li>  </ul>

 Выпадающее меню css. Ниже представлен css код выпадающего меню:

ul {   list-style: none; /*убираем маркеры списка*/   margin: 0; /*убираем отступы*/   padding-left: 0; /*убираем отступы*/   margin-top:25px; /*делаем отступ сверху*/   background:#819A32; /*добавляем фон всему меню*/   height: 50px; /*задаем высоту*/  }  a {   text-decoration: none; /*убираем подчеркивание текста ссылок*/   background:#819A32; /*добавляем фон к пункту меню*/   color:#fff; /*меняем цвет ссылок*/   padding:0px 15px; /*добавляем отступ*/   font-family: arial; /*меняем шрифт*/   line-height:50px; /*ровняем меню по вертикали*/   display: block;    border-right: 1px solid #677B27; /*добавляем бордюр справа*/   -moz-transition: all 0.3s 0.01s ease; /*делаем плавный переход*/   -o-transition: all 0.3s 0.01s ease;   -webkit-transition: all 0.3s 0.01s ease;  }  a:hover {   background:#D43737;/*добавляем эффект при наведении*/  }  li {   float:left; /*Размещаем список горизонтально для реализации меню*/   position:relative; /*задаем позицию для позиционирования*/  }      /*Стили для скрытого выпадающего меню*/   li > ul {   position:absolute;   top:25px;   display:none;    }      /*Делаем скрытую часть видимой*/   li:hover > ul {   display:block;    width:250px; /*Задаем ширину выпадающего меню*/    }   li:hover > ul > li {   float:none; /*Убираем горизонтальное позиционирование*/   }

Выпадающее меню результат

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

Опубликовано в Как создать сайт. Пошаговая инструкция
Советую посетить следующие страницы:
Как сделать красивое меню для сайта
Плагин меню для WordPress Max Mega Menu
 Как создать подвал (футер) WordPress в html и css
✓ Плагин All in One SEO Pack. Seo оптимизация сайта
 Все про виджеты и сайдбары на WordPress

busines-expert.com

Пример 2. Создание меню для сайта CSS методами

или как сделать CSS меню без использования изображения

HTML код меню:

<title>Создание меню для сайта CSS методами</title>
</head>
<body>
<ul class="css-menu-2">
<li><a href="#">Главная</a></li>
<li><a href="#">CSS уроки</a></li>
<li><a href="#" class="selected">CSS меню</a></li>
<li><a href="#">Справочник</a></li>
</ul>

Посмотреть CSS РєРѕРґ меню

Пример 3. Красивое горизонтальное CSS меню для сайта

или как сделать CSS меню для сайта без использования изображения

HTML код меню:

<title>Создание красивого горизонтального CSS меню для сайта</title>
</head>
<body>
<div id="css-menu">
<ul>
<li><a href="#">
<span class="text-top">Главная</span>
<span class="text-bottom">О нашем проекте</span>
</a></li>
<li><a href="#">
<span class="text-top">Справочник</span>
<span class="text-bottom">CSS справочник</span>
</a></li>
<li><a href="#">
<span class="text-top">CSS уроки</span>
<span class="text-bottom">Для начинающих</span>
</a></li>
<li><a href="#">
<span class="text-top">CSS меню</span>
<span class="text-bottom">Коллекция CSS меню</span>
</a></li>
</ul>
</div>

Посмотреть CSS РєРѕРґ меню

Пример 4. Горизонтальное меню для сайта CSS методами

или как сделать CSS меню для сайта без использования изображения

HTML код меню:

<title>Создание горизонтального CSS меню без изображения</title>
</head>
<body>
<ul class="css-menu-3">
<li><a href="#">Главная</a></li>
<li><a href="#">HTML уроки</a></li>
<li><a href="#">CSS уроки</a></li>
<li><a href="#" class="selected">CSS меню</a></li>
<li><a href="#">Справочник</a></li>
</ul>

Посмотреть CSS РєРѕРґ меню

ab-w.net

You May Also Like

About the Author: admind

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.