Как создать меню на сайте — освещаем по порядку

Доброго времени суток всем, кто сейчас читает данную публикацию. Сегодня я хочу рассказать вам об одном из инструментов сайтостроения, без которого ни один веб-ресурс не может обойтись. Это меню сайта, или как еще говорят карта сайта. На сегодняшний день существует безграничное множество видов и подвидов меню.

Инструменты для создания панели навигации

Как оговаривалось в предыдущих публикациях, парный элемент <ul> создает маркированный список, а <li> — один элемент списка. Для наглядности давайте напишем код простого меню:

Вместо единицы <ul> прописывается <menu>. Однако существенные различия появляются если судить со стороны работы браузеров. Так, второй пример ускоряет работу поисковых программ и роботов в интернете. При анализе структуры сайта они сразу понимают, что данный кусок кода отвечает за карту сайта.

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

Навигация в wordpress

В любом шаблоне вы можете в визуальном режиме создать свое меню и поставить его в одну из возможных областей. Для этого перейдите Внешний вид – Меню. Тут вы можете создать новое или редактировать уже имеющееся.

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

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

Что делать, если вы хотите изменить именно внешний вид? Для этого полезно будет воспользоваться инструментом для разработчиков – отладчиком. Хотя вы не разработчик, он вам пригодится.

Для его запуска в Google Chrome или Яндекс. Браузере нажмите F12. Вам нужно найти, какой кусочек кода ответственен за вывод блока меню. А точнее, нам нужно обнаружить стилевой класс или идентификатор у навигационного блока. Если это получится, то можно будет найти в css стили для этого элемента и изменить их на свои.

Справа будет отображаться css-код элемента. Например, вы можете выбрать сам список, его пункты или ссылки, кликнув по ним в отладчике, а справа появятся стили для них. Редактируя стили, вы сразу сможете видеть результат. Это очень полезно. Вы можете сразу изменить внешний вид меню так, как вам надо. Но помните, что изменение кода в отладчике никак не влияет на реальный внешний вид меню. После этого вам нужно зайти на сервер и отредактировать style.css вручную, внеся нужные поправки.

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

Первым шагом создания вертикального меню будет создание маркированного списка. Также нам нужно будет иметь возможность идентифицировать список, поэтому мы добавим к нему атрибут id с идентификатором «navbar». Каждый элемент <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>  

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

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

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

  #navbar a {    background-color: #949494;    color: #fff;    padding: 5px;    text-decoration: none;    font-weight: bold;    border-left: 5px solid #33ADFF;    display: block;  }  #navbar li {    border-left: 10px solid #666;    border-bottom: 1px solid #666;  }  

Мы объединили весь код, описанный выше, в один пример, теперь, нажав на кнопку попробовать, вы можете перейти на страницу с примером и увидеть результат:

<!DOCTYPE html>  <html>    <head>      <meta charset="utf-8">      <title>Название документа</title>      <style>        #navbar {          margin: 0;          padding: 0;          list-style-type: none;          width: 100px;        }        #navbar li {          border-left: 10px solid #666;          border-bottom: 1px solid #666;        }  	  #navbar a {          background-color: #949494;          color: #fff;          padding: 5px;          text-decoration: none;  		font-weight: bold;          border-left: 5px solid #33ADFF;  		display: block;        }      </style>    </head>      <body>          <ul id="navbar">        <li><a href="#">Главная</a></li>        <li><a href="#">Новости</a></li>        <li><a href="#">Контакты</a></li>        <li><a href="#">О нас</a></li>      </ul>      </body>  </html>

Попробовать »

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

Вернемся к рассмотренному ранее примеру вертикального меню и добавим в таблицу стилей следующее правило:

  #navbar a:hover {    background-color: #666;    border-left: 5px solid #3333FF;  }  

Попробовать »

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

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

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

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

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

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; /*Размещаем список горизонтально для реализации меню*/  }

Подпункты в меню: выпадающий список

Мы с вами рассмотрели основные группы навигационных панелей, однако существует еще несколько разновидностей или лучше сказать дополнений.

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

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

1 2 3 4 5 6 7 8                   

<!DOCTYPE html>  <html lang="ru">      <head>          <meta charset="utf-8">          <title>Выпадающий список</title>          <style>  body {      padding-left: 30%;      font-size: 18px;  }  .m-menu {      margin: 0;      padding: 9px;          width:50%;      text-align:center;      border: 3px solid #000;      background: #FF8C00;    }  .m-menu > li {      position: relative;      display: inline-block;   }  .m-menu a {      display: block;      margin-left: -2px;      padding: 13px;      color: #fff;      border-left: 3px solid #fff;  }  .m-menu a:hover {      background: #1C1C1C;  }  .m-menu .s-menu {      left: 10px;      position: absolute;      display: none;      width: 155px;      margin: 0;      padding: 0;      list-style: none;      background: #FF8C00;  }  .m-menu .s-menu a {      border: 1px solid #000;  }  .m-menu > li:hover .s-menu {      display: block;  }          </style>      </head>      <body>          <ul class="m-menu">              <li><a href="#index">Главная</a></li>              <li>                  <a href="#product">Продукция</a>                  <ul class="s-menu">                      <li><a href="#1">Конфеты</a></li>                      <li><a href="#2">Торты</a></li>                      <li><a href="#3">Печенье</a></li>                  </ul>              </li>              <li><a href="#adress">Контакты</a></li>          </ul>      </body>  </html>

В данном примере я разделил единицы меню на два класса:

1. m-menu
2. s-menu

Первый класс отвечает за основное меню, а s-menu – за подменю.

В коде можно встретить такой прием, как .m-menu > li:hover или .m-menu > li.

Так, при помощи :hover указывается, как будет вести себя элемент при наведении на него курсора.

При этом знак «>» видоизменяет селектор так, чтобы блочно-строчными были только объекты, относящиеся к верхнему уровню.

Изначально подменю было задано display: none, что оповещает обработчик скрывать данный объект. После наведения на элемент навигации с указанием hover, значение свойства display меняется на block и поэтому открывается выпадающий список.

Как видите, реализация такого приема очень простая.

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

С уважением, Роман Чуешов

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

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

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

Поделитесь в соц.сетях:

Оцените статью: (Пока оценок нет) Загрузка...

Читайте также:

Как оформить свой личный дневник... Как сделать рамку на сайте — делим... Как создать интернет-баннер: объясняем о... Как сделать оформление для сайта: это на...