Как выровнять горизонтальное меню по центру?

Navbar — Открытие dropdown меню при наведении

Сценарий JavaScript, с помощью которого можно изменить способ открытия выпадающих списков в десктопной версии меню Navbar (при наведении):

$(function() {
  function onNavbar() {
    if (window.innerWidth >= 768) {
      $('.navbar-default .dropdown').on('mouseover', function(){
        $('.dropdown-toggle', this).next('.dropdown-menu').show();
      }).on('mouseout', function(){
        $('.dropdown-toggle', this).next('.dropdown-menu').hide();
      });
      $('.dropdown-toggle').click(function() {
        if ($(this).next('.dropdown-menu').is(':visible')) {
          window.location = $(this).attr('href');
        }
      });
    } else {
      $('.navbar-default .dropdown').off('mouseover').off('mouseout');
    }
  }
  $(window).resize(function() {
    onNavbar();
  });
  onNavbar();
});

Фиксированное (плавающее) меню

Bootstrap 3 предоставляет классы, с помощью которых вы можете прикрепить (зафиксировать) меню при прокрутке странице к её верхней или нижней части.

Прикрепление к верхней части страницы

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

<!-- Класс navbar-fixed-top прикрепляет меню к верхней части страницы -->
<nav class="navbar navbar-default navbar-fixed-top">
  <!-- Элемент с классом container или container-fluid необходим для центрирования и установки необходимых отступов слева и справа для контента -->
  <div class="container">
    ...
  </div>
</nav>

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

Для того чтобы верхнее фиксированное меню не накладывалась на контент страницы необходимо для элемента добавить CSS свойство (высота меню Navbar по умолчанию равна 50px):

body {
  padding-top: 70px;
}

Данное правило необходимо включить в свой файл CSS. Этот файл должен быть подключен после Bootstrap CSS.

Кроме этого, из-за того что у нас основной контент сдвинут, переход к определённому месту страницы, посредством якоря, будет выполняться не корректно. Чтобы это исправить, в CSS необходимо добавить следующий код:

:target:before { 
  display: block; 
  content: " "; 
  margin-top: -70px; 
  height: 70px; 
  visibility: hidden; 
}

Меню, прикрепленное к нижней части страницы

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

<nav class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    ...
  </div>
</nav>

Чтобы нижнее фиксированное меню не накладывалась на контент страницы необходимо для элемента добавить следующее CSS правило:

body {
  padding-bottom: 70px;
}

Горизонтальное выпадающее меню на CSS

Стили CSS для выпадающего меню и не только – вещь необходимая как воздух. Ведь выпадающая вкладка делается на основе псевдокласса :hover.

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

Это еще не конец, а только часть CSS для основного горизонтального меню. Далее мы напишем стили для выпадающего списка меню:

Вот теперь все. Сам механизм выпадашки реализован одной строчкой.

Смотрите скин с этим меню:

Рис. 2 (горизонтальное выпадающее меню)

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

Скачать пример

Основные виды меню сайта + примеры

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

Для сайтов с развернутой структурой размещение по горизонтали считается лучшим решением.

Вертикальное.

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

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

Фиксированный хедер.

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

Добавление в фиксированный хедер контактной информации и логотипа сделает навигацию еще более комфортной для посетителей.

«Плавающее».

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

Иконки.

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

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

Нижнее меню сайта.

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

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

CSS

#nav {
    border:3px solid #3e4547;

    box-shadow:2px 2px 8px #000000;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
}
#nav, #nav ul {
    list-style:none;
    padding:0;
    width:200px;
}
#nav ul {
    position:relative;
    z-index:-1;
}
#nav li {
    position:relative;
    z-index:100;
}
#nav ul li {
    margin-top:-23px;

    -moz-transition:  0.4s linear 0.4s;
    -ms-transition: 0.4s linear 0.4s;
    -o-transition: 0.4s linear 0.4s;
    -webkit-transition: 0.4s linear 0.4s;
    transition: 0.4s linear 0.4s;
}
#nav li a {
    background-color:#d4d5d8;
    color:#000;
    display:block;
    font-size:12px;
    font-weight:bold;
    line-height:28px;
    outline:0;
    padding-left:15px;
    text-decoration:none;
}
#nav li a.sub {
    background:#d4d5d8 url("../images/down.gif") no-repeat;
}
#nav li a + img {
    cursor:pointer;
    display:none;
    height:28px;
    left:0;
    position:absolute;
    top:0;
    width:200px;
}
#nav li a img {
    border-width:0px;
    height:24px;
    line-height:28px;
    margin-right:8px;
    vertical-align:middle;
    width:24px;
}
#nav li a:hover {
    background-color:#bcbdc1;
}
#nav ul li a {
    background-color:#eee;
    border-bottom:1px solid #ccc;
    color:#000;
    font-size:11px;
    line-height:22px;
}
#nav ul li a:hover {
    background-color:#ddd;
    color:#444;
}
#nav ul li a img {
    background: url("../images/bulb.png") no-repeat;
    border-width:0px;
    height:16px;
    line-height:22px;
    margin-right:5px;
    vertical-align:middle;
    width:16px;
}
#nav ul li:nth-child(odd) a img {
    background:url("../images/bulb2.png") no-repeat;
}
#nav a.sub:focus {
    background:#bcbdc1;
    outline:0;
}
#nav a:focus ~ ul li {
    margin-top:0;

    -moz-transition:  0.4s linear;
    -ms-transition: 0.4s linear;
    -o-transition: 0.4s linears;
    -webkit-transition: 0.4s linears;
    transition: 0.4s linear;
}
#nav a:focus + img, #nav a:active + img {
    display:block;
}
#nav a.sub:active {
    background:#bcbdc1;
    outline:0;
}
#nav a:active ~ ul li {
    margin-top:0;
}
#nav ul:hover {
    display:block;
}

Выпадающее меню

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

Сначала нам нужно создать HTML-структуру нашего меню. Основные навигационные ссылки мы поместим в маркированный список:

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

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

<ul id="navbar">
  <li><a href="#">Главная</a></li>
  <li><a href="#">Новости</a></li>
  <li><a href="#">Контакты</a>
    <ul>
      <li><a href="#">Адрес</a></li>
      <li><a href="#">Телефон</a></li>
      <li><a href="#">Email</a></li>
    </ul>
  </li>
  <li><a href="#">О нас</a></li>
</ul>

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

Теперь приступим к написанию CSS кода. Для начала необходимо скрыть список с подпунктами с помощью объявления display: none;, чтобы они не отображались на веб-странице все время. Для отображения подпунктов нам нужно чтобы при наведении на элемент <li> список снова был преобразован в блочный элемент:

#navbar ul { display: none; }
#navbar li:hover ul { display: block; }

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

#navbar, #navbar ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
#navbar li { float: left; }
#navbar ul li { float: none; }

Затем нам нужно сделать так, чтобы наше выпадающее подменю не смещало контент, расположенный под панелью навигации, вниз. Для этого мы зададим пунктам списка position: relative;, а списку, содержащему подпункты position: absolute; и добавим свойство top со значением 100%, чтобы абсолютно позиционированное подменю отображалось точно под ссылкой.

#navbar ul {
  display: none;
  position: absolute;
  top: 100%;
}
#navbar li {
  float: left;
  position: relative;
}
#navbar { height: 30px; }

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

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

Теперь нам осталось стилизовать оба наших списка и выпадающее меню будет готово:

#navbar ul {
  display: none;
  background-color: #f90;
  position: absolute;
  top: 100%;
}
#navbar li:hover ul { display: block; }
#navbar, #navbar ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
#navbar {
  height: 30px;
  background-color: #666;
  padding-left: 25px;
  min-width: 470px;
}
#navbar li {
  float: left;
  position: relative;
  height: 100%;
}
#navbar li a {
  display: block;
  padding: 6px;
  width: 100px;
  color: #fff;
  text-decoration: none;
  text-align: center;
}
#navbar ul li { float: none; }
#navbar li:hover { background-color: #f90; }
#navbar ul li:hover { background-color: #666; }

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

Что это такое

1 комментарий для “VBA Excel. Автоматическая запись текущей даты и времени”

Доработка горизонтального меню

Это все, что касается основ создания горизонтальных меню на CSS. Далее мы придадим красивый вид нашему меню. Для этого мы присвоим для a элемента background:url(background.png) repeat-x; для a:hover другой фон background:url(hover.png) repeat-x; Ниже предоставлены исходные картинки.

background.png — 

hover.png — 

Теперь меню имеет немного иной вид:

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

Дальше: Заработок на контекстной рекламе, идеи для эффективного заработка

Выпадающее меню со списком элементов на HTML

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

Конечно, подобную проблему можно решить многими способами, но я бы рекомендовал обходиться без дополнительного JS-кода (и jQuery).

Я считаю так — если задачу теоретически можно решить средствами HTML и CSS без применения джейквери, нужно делать это на практике. Если вы не знаете, что писать и куда нажимать — это отдельная проблема и она не должна вас останавливать. Нужно гуглить, учиться, расти, повышать свою квалификацию как верстальщика и фронтенд-разработчика — никогда не знаешь, где эти навыки пригодятся.

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

<ul class=»mmenuu»>
    <li><a href=#>Меню №1<a>
        <ul class=»ssubmenuu»>
            <li><a href=#>Субменю №1 первого меню<a><li>
        <ul>
    <li>
    <li><a href=#>Меню №2<a>
        <ul class=»ssubmenuu»>
            <li><a href=#>Субменю №2 второго меню<a><li>
            <li><a href=#>Субменю №2 второго меню<a><li>
        <ul>
    <li>
    <li><a href=#>Меню №3<a>
        <ul class=»ssubmenuu»>
            <li><a href=#>Субменю №3 третьего меню<a><li>
            <li><a href=#>Субменю №3 третьего меню<a><li>
            <li><a href=#>Субменю №3 третьего меню<a><li>
        <ul>
    <li><ul>

Первый шаг к нашему выпадающему списку в меню сделан и вот что получилось. Результат:

Мда. Пока не очень, да? Обычный список какой-то (похож на этот), ведь классы menu и submenu я использовал, а стили не написал.

Добавлю немного CSS-магии. Пропишу прямо в html-файле — в <head><style></style></head>. CSS-код:

body {
    /* Убираю отступы. */
    margin0px;
    /* Убираю еще отступы. */
    padding0px;
    /* Задаю шрифт. */
    font 14px ‘Verdana’;}
ul {
    /* Убираю маркеры у списка*/
    list-style none;
    /* Делаю элементы блочными. */
    display block;
    /* Убираю отступы. */
    margin0px;
    /* Убираю еще отступы! */
    padding0px;}
ulafter {
    /* Делаю элементы блочными. */
    display block;
    /* Убираю выравнивание. */
    float none;
    content ‘ ‘;
    clear both;}
ul.mmenuu > li {
    /* Задаю выравнивание и позиционирование. */
    float left;
    /* Считаем координаты относительно исходного места*/
    position relative;}
ul.mmenuu > li > a {
    /* Делаю элементы блочными: */
    display block;
    /* Задаю белый цвет. */
    color #fff;
    /* Задаю отступ 10px. */
    padding 10px;
    /* Убираю форматирование*/
    text-decoration none;
    /* Задаю цвет. */
    background-color #da570f;}
ul.mmenuu > li > ahover {
    /* Задаю цвет при наведении. */
    background-color #eb9316;}
ul.ssubmenuu {
    position absolute;
    width 240px;
    top 37px;
    left0px;
    /* Делаю субменю скрытыми. */
    display none;
    /* Цвет — белый. */
    background-color white;}
ul.ssubmenuu > li {
    /* Блочное расположение элементов*/
    display block;}
ul.ssubmenuu > li > a {
    /* Делаю элементы блочными. */
    display block;
    /* Убираю форматирование*/
    text-decoration none;
    /* Задаю отступ. */
    padding 10px;
    /* Задаю цвет. */
    color #ffffff;
    /* Еще цвет. */
    background-color #da570f;}
ul.ssubmenuu > li > ahover {
    /* Цвет бэкграунда при наведении. */
    background-color #eb9316;
    /* Задаю подчеркивание*/
    text-decoration underline;}
ul.mmenuu > lihover > ul.ssubmenuu {
    /* Делаю элементы блочными. */
    display block;}

Результат:

Ого! В жизни не видел ничего прекраснее этого минималистичного выпадающего списка. Без JavaScript и обращения к фрилансерам!

5 нюансов создания меню сайта

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

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

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

Команды в AutoCAD

CSS:

.main-menu {
list-style: none;
margin: 0;
padding: 0;
margin-top: 30px;
font-family: ‘Montserrat’, sans-serif;
/* Для выравнивания меню по центру
display: flex;
flex-wrap: wrap;
justify-content: center;
*/
}
.main-menu > li {
display: inline-flex;
}
.main-menu > li + li {
margin-left: 20px;
}
.main-menu > li > a {
padding: 0 0 20px 0;
position: relative;
text-transform: uppercase;
color: #000;
font-weight: bold;
letter-spacing: 0.2px;
font-size: 15px;
text-decoration: none;
}
.main-menu > li > a:hover {
text-decoration: none;
color: #337AB7;
}
.main-menu > li > a:after {
width: 0;
height: 3px;
background-color: #337AB7;
content: »;
left: 0;
bottom: 10px;
position: absolute;
transition: all .3s;
}
.main-menu > li > a:hover::after {
width: 100%;
}
.main-menu > li.active a:after {
width: 100%;
}
.main-menu li {
margin: 0;
white-space: nowrap;
}
.main-menu li.menu-children {
position: relative;
margin-right: 12px;
}
.main-menu li.menu-children:after {
position: absolute;
content: «\2039»;
color: #337AB7;
font-size: 20px;
font-weight: bold;
right: -12px;
top: -2px;
transform: rotate(-90deg);
}
.main-menu li li.menu-children:after {
position: absolute;
content: «\2039»;
color: #FFF;
font-size: 20px;
font-weight: bold;
right: 10px;
top: 12px;
transform: rotate(180deg);
}
.main-menu li.menu-children:hover > ul {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.main-menu ul {
padding: 10px 0;
margin: 0;
list-style: none;
background-color: #337AB7;
position: absolute;
z-index: 20;
min-width: 220px;
top: 100%;
left: -30px;
opacity: 0;
visibility: hidden;
transform: translateY(5px);
transition: all 200ms cubic-bezier(0.43, 0.59, 0.16, 1.25);
}
.main-menu ul li {
display: block;
padding: 0 10px;
line-height: 1.1;
}
.main-menu ul li:last-child {
margin-bottom: 0;
}
.main-menu ul li a {
display: block;
color: #fff;
padding: 10px;
transition: all .3s;
text-decoration: none;
}
.main-menu ul li a:hover {
color: #337AB7;
background: #FFF;
text-decoration: none;
}
.main-menu ul ul {
top: 0;
left: 100%;
}

Создадим-ка горизонтальную навигационную модель

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

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

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

• -ms- (Internet Explorer)
• -o- (Opera)
• -webkit- (Chrome, Safari)
• -moz- (Firefox)

А теперь полученные знания применим к написанию примера.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Горизонтальная панель</title>
  <style>
   li {
    display: inline-block; 
    margin-right: 6px;
    background: #FF8C00;  
    transform: skewX(-45deg);
    -webkit-transform: skewX(-45deg);
    -o-transform: skewX(-45deg);
    -ms-transform: skewX(-45deg); 
    -moz-transform: skewX(-45deg);
   }
   a {
    display: block; 
    padding: 18px 35px;
    color: #fff;  
    transform: skewX(40deg);
    -webkit-transform: skewX(40deg); 
    -o-transform: skewX(40deg);
    -ms-transform: skewX(40deg); 
    -moz-transform: skewX(40deg); 
   }
   li:hover {
    background: #1C1C1C; 
   }
  </style>
 </head>
 <body>
  <menu>
    <li>Главная</li>
    <li>О компании</li>
    <li><a href="3.html">Продукция</a></li>
    <li><a href="4.html">Контакты</a></li>
  </menu>
 </body>
</html>

Горизонтальное меню для навигации по странице

Пример создания меню для одностраничного сайта с подсветкой текущего пункта (с использованием компонента ScrollSpy):

<body data-spy="scroll" data-target="#navbar-main" data-offset="90" style="padding-top:70px;">

  <!—Фиксированное горизонтальное меню для навигации по текущей странице -->
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-main" aria-expanded="false">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Brand</a>
      </div>
      <div class="collapse navbar-collapse" id="navbar-main">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#href1">Ссылка 1 <span class="sr-only">(current)</span></a></li>
          <li><a href="#href2">Ссылка 2</a></li>
          <li><a href="#href3">Ссылка 3</a></li>
          <li><a href="#href4">Ссылка 4</a></li>
          <li><a href="#href5">Ссылка 5</a></li>
        </ul>
      </div>
    </div>
  </nav>
  
  <!--Основной контент страницы -->
  <main>
    <div class="container-fluid">
      ...
      <h1>Название страницы</h1>
      ...
      <h2 id="href1">Заголовок 1</h2>
      ...
      <h2 id="href2">Заголовок 2</h2>
      ...
      <h2 id="href3">Заголовок 3</h2>
      ...
      <h2 id="href4">Заголовок 4</h2>
      ...
      <h2 id="href5">Заголовок 5</h2>
      ...
    </div>    
  </main>
  ...
</body>

Дополнительно на страницу необходимо ещё поместить скрипт, который будет в мобильном виде при нажатии на ссылку закрывать collapsed блок:

//при нажатии на ссылку
$(".navbar-collapse a").click(function() {
  //если она не имеет класс dropdown-toggle
  if (!$(this).hasClass("dropdown-toggle")) {
    //то закрыть меню
    $(".navbar-collapse").collapse('hide');
  }
});