Как сделать меню в html и css. Горизонтальное, вертикальное, выпадающее меню готовые коды

27 Мар 2017

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

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

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

При необходимости все эти коды можно будет отредактировать под дизайн вашего сайта, изменив цвет текста или фона меню или любые другие компоненты кода.Меню один из самых важных элементов сайта, при помощи которого посетители находят нужную им информацию. От того, насколько красочно выглядит меню и насколько грамотно составлена навигация, напрямую зависит успешность вашего интернет ресурса. Если вы хотите сами создать красивое меню для сайта 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/sposoby-zarabotka/">Способы заработка</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

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

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

*

Лучший
курс обмена
BestChange.ru – популярный сервис по подбору выгодных обменных пунктов электронных валют, который поможет вам производить свои обмены безопасно и с минимальными потерями на комиссиях.
Обменять
на

Последнее на YouTube

Популярное на YouTube
© 2015-2017 Busines-Expert.com. Все права защищены. Все о заработке в интернете
Лучший обменник WM
 mmgp
Яндекс.Метрика
Рейтинг@Mail.ru