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

Здравствуйте уважаемые посетители моего блога! Сегодня речь пойдет о главном горизонтальном меню сайта, а именно как выровнять горизонтальное меню по центру. Да, на первый взгляд, что тут сложного — задал нужные отступы, подогнал и все. Но тут есть свои нюансы. Сайт, в первую очередь, это динамика, т.е. на сайте постоянно появляется новый контент, появляются какие то новые блоки с информацией и т.п. Так могут и появляться/исчезать некоторые пункты в главном меню. С учетом этого всего нужно добиться того, что при добавлении или удалении пункта меню, меню у нас остается все также по центру. Конечно, не всегда обязательно его центрировать, все зависит от дизайна. Но если все же у вас подразумевается ставить горизонтальное меню по центру, то применив несколько несложных трюков в css мы можем добиться нужного результата.

Горизонтальное меню по центру без выпадающих пунктов

Сначала разберем на примере горизонтального меню, которое не имеет выпадающих пунктов.

Html-код

<div id="mainmenu">   <ul>   <li><a href="#">Пункт 1</a></li>   <li><a href="#">Пункт 2</a></li>   <li><a href="#">Пункт 3</a></li>   <li><a href="#">Пункт 4</a></li>   <li><a href="#">Пункт 5</a></li>   </ul>  </div>      

Css-код

*,  *::after,  *::before {   -webkit-box-sizing: border-box;   -moz-box-sizing: border-box;   -o-box-sizing: border-box;   -ms-box-sizing: border-box;   box-sizing: border-box;   margin: 0;   padding: 0;  }  #mainmenu {   background: #444;   position: relative;   overflow: hidden;   height: 40px;   margin: 30px 0  }  #mainmenu ul {   list-style: none;   margin: 0;   padding: 0;   position: relative;   left: 50%;   float: left;   font: 14px Arial, Helvetica, sans-serif;   height: 40px  }  #mainmenu ul li {   position: relative;   left: -50%;   float: left;   margin: 0 10px;   height: 40px  }  #mainmenu ul li a {   color: #fff;   display: block;   text-decoration: none;   padding: 0 15px;   line-height: 40px;  }  #mainmenu ul li a:hover {   background-color: #666;  }  

Разберем все по порядку, здесь все просто.  Мы создаем контейнер «mainmenu», куда помещаем наше меню в виде неупорядоченного списка.

Теперь дело идет за стилями css. Сначала мы сбрасываем на ноль все поля и отступы для всех браузеров.
лее при помощи свойства «float:left» мы смещаем наш неупорядоченный список влево и далее относительным позиционированием смещаем его на 50% вправо. Ширина списка «ul» будет равна сумме длин всех пунктов «li», которые находятся внутри него. Таким образом, если мы мысленно поделим окно браузера пополам, то наше меню уйдет вправо от линии разделения. Чтобы выровнять мы применим к пунктам «li» также относительное позиционирование и сместим их влево на 50%, указав свойство «left:-50%». Да и еще, чуть не забыл, нашему контейнеру «mainmenu» нужно обязательно указать свойство «overflow:hidden», иначе мы получим горизонтальную полосу прокрутки.

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

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

Теперь разберем многоуровневое меню с выпадающими подпунктами. Здесь ситуация несколько иначе и несколько сложнее, т.к. в первом случае у нас подпункты выпадать не  будут, потому что мы указали блоку «mainmenu» свойство — «overflow:hidden». Это говорит, что элементы за пределами данного блока показываться не будут. Но выход есть.

Итак, я изменил предыдущий код и удалил из него свойство «overflow:hidden».

Html-код

   
<div id="mainmenu"> <ul> <!-- Пункт меню 1 --> <li><a href="#">Пункт 1</a> <ul> <li class="parent"><a href="#">подпункт 1.1</a> <ul> <li><a href="#">подпункт 1.1.1</a></li> <li><a href="#">подпункт 1.1.2</a></li> <li><a href="#">подпункт 1.1.3</a></li> </ul> </li> <li class="parent"><a href="#">подпункт 1.2</a> <ul> <li><a href="#">подпункт 1.2.1</a></li> <li><a href="#">подпункт 1.2.2</a></li> <li><a href="#">подпункт 1.2.3</a></li> </ul> </li> <li><a href="#">подпункт 1.3</a></li> <li><a href="#">подпункт 1.4</a></li> <li><a href="#">подпункт 1.5</a></li> </ul> </li> <!-- Пункт меню 2 --> <li class="active"><a href="#" class="active">Пункт 2</a> <ul> <li><a href="#">подпункт 2.1</a></li> <li><a href="#">подпункт 2.2</a></li> <li class="parent"><a href="#">подпункт 2.3</a> <ul> <li><a href="#">подпункт 2.3.1</a></li> <li><a href="#">подпункт 2.3.2</a></li> <li><a href=.
одпункт 3.3</a></li> <li><a href="#">подпункт 3.4</a></li> <li><a href="#">подпункт 3.5</a></li> </ul> </li> <!-- Пункт меню 4 --> <li><a href="#">Пункт 4</a> <ul class="last"> <li><a href="#">подпункт 4.1</a></li> <li><a href="#">подпункт 4.2</a></li> <li><a href="#">подпункт 4.3</a></li> <li><a href="#">подпункт 4.4</a></li> <li><a href="#">подпункт 4.5</a></li> </ul> </li> <!-- Пункт меню 5 --> <li><a href="#">Пункт 5</a> <ul class="last"> <li><a href="#">подпункт 5.1</a></li> <li><a href="#">подпункт 5.2</a></li> <li><a href="#">подпункт 5.3</a></li> <li><a href="#">подпункт 5.4</a></li> <li><a href="#">подпункт 5.5</a></li> </ul> </li> </ul> <!-- Конец списка --> </div> <!-- Конец блока #mainmenu -->

CSS-код

*, *::after, *::before {  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  -o-box-sizing: border-box;  -ms-box-sizing: border-box;  box-sizing: border-box;  margin: 0;  padding: 0;  }  #mainmenu {  position: relative;  background: #444444;  height: 40px;  margin: 30px 0;  padding: 0;  float: left;  width: 100%;  z-index: 10  }  #mainmenu ul {  clear: left;  position: relative;  right: 50%;  height: 40px;  float: right;  text-align: center;  font: 15px Arial, Helvetica, sans-serif;  list-style: none;  padding: 0;  margin: 0  }    /** Основные пункты **/  #mainmenu > ul > li {  position: relative;  left: 50%;  float: left;  height: 40px;  padding: 0;  margin: 0  }  #mainmenu > ul > li > a {  border-left: 1px solid #666;  display: block;  color: #fff;  text-decoration: none;  padding: 0 20px;  line-height: 40px;  }  #mainmenu > ul > li:first-child > a {  border: none  }  #mainmenu > ul > li:hover > a, #mainmenu > ul > li.hover > a, #mainmenu > ul > li.active > a {  color: #fff  }  #mainmenu > ul > li:hover, #mainmenu > ul > li.hover, #mainmenu > ul > li.active {  background: #666  }    /* Выпадающие подпункты */  #mainmenu ul li ul {  position: absolute;  left: 0;  top: 40px;  d.    
t > a::before { border-top: 1px solid #fff; border-right: 1px solid #fff; content: ""; display: block; position: absolute; right: 15px; top: 50%; transform: translateY(-50%) rotate(45deg); height: 6px; width: 6px; } #mainmenu ul li ul li:hover, #mainmenu ul li ul li.hover { background-color: #444 } #mainmenu ul li:hover ul, #mainmenu ul li.hover ul { display: block } /* Выпадающие пункты второго уровня */ #mainmenu ul li:hover > ul { opacity: 1; visibility: visible; margin: 0; } #mainmenu ul li ul li ul { top: 0; left: 200px; margin: 0 0 0 20px; width: 180px }

Теперь у нас меню выставлено по центру и при наведении выпадают подпункты.

Выравнивание меню по центру с помощью flexbox

Выровнять меню по центру можно также, применив новое правило в css — flexbox. Вообще трюкам с flexbox я хочу посвятить отдельный пост, оно того стоит, очень упрощает жизнь верстальщику. В общем, здесь не будем углубляться… Я приведу здесь только код css для меню с выпадающими пунктами. HTML код тот же, что и выше.

Код CSS

   
*, *::after, *::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; } #mainmenu { position: relative; background: #444444; height: 40px; margin: 30px 0; padding: 0; width: 100%; z-index: 10 } #mainmenu ul { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; height: 40px; text-align: center; font: 15px Arial, Helvetica, sans-serif; list-style: none; padding: 0; margin: 0; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } /** Основные пункты **/ #mainmenu > ul > li { position: relative; height: 40px; padding: 0; margin: 0 } #mainmenu > ul > li > a { border-left: 1px solid #666; display: block; color: #fff; text-decoration: none; padding: 0 20px; line-height: 40px; } #mainmenu > ul > li:first-child > a { border: none } #mainmenu > ul > li:hover > a, #mainmenu > ul > li.hover > a, #mainmenu > ul > li.active > a { color: #fff } #mainmenu &.
ainmenu ul li ul li a { border-bottom: 1px solid #999; display: block; color: #fff; padding: 10px 15px; text-decoration: none; } #mainmenu ul li ul li.parent a { position: relative; } #mainmenu ul li ul > li.parent > a::before { border-top: 1px solid #fff; border-right: 1px solid #fff; content: ""; display: block; position: absolute; right: 15px; top: 50%; transform: translateY(-50%) rotate(45deg); height: 6px; width: 6px; } #mainmenu ul li ul li:hover, #mainmenu ul li ul li.hover { background-color: #444 } #mainmenu ul li:hover ul, #mainmenu ul li.hover ul { display: block } /* Выпадающие пункты второго уровня */ #mainmenu ul li:hover > ul { opacity: 1; visibility: visible; margin: 0; } #mainmenu ul li ul li ul { top: 0; left: 200px; margin: 0 0 0 20px; width: 180px }

Как видим, изменились правила только для родительского списка — #mainmenu ul. Единственное, пришлось добавить префиксы для предыдущих версий браузеров. Отмечу, что правило flexbox корректно понимают только современные браузеры. Если вы ориентируетесь на более старые браузеры, то вариант с flex’ом придется отложить. Какие именно браузеры хорошо понимают flexbox можете посмотреть здесь.


Вот и все. Если у вас возникли вопросы задавайте их в комментариях. Желаю удачи!

zaurmag.ru

Пример центрированного меню

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

 

На демонстрационной странице можно увидеть несколько вариантов оформления горизонтально центрированного меню. Любой из них можно использовать в своих проектах.

Разметка HTML

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

 

Код CSS центрированного меню

Ниже приводится полный код CSS, с помощью которого центрируется меню. А объяснения принципа работы приводятся далее в уроке.

Как работает метод центрирования

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

Элемент div без смещения


Элемент div без смещения

Элемент div (блочный) без смещения растягивается на всю доступную ему ширину.

Элемент div со смещением влево

Элемент div со смещением влево

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

Стандартное выровненное влево меню

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

Стандартное меню

Обратите внимание на следующие моменты:

  • Элемент centeredmenu div (голубой прямоугольник) смещается влево, но имеет ширину 100%, поэтому остается растянутым на всю страницу.
  • Элемент ul (розовый прямоугольник) находится внутри элемента centeredmenu div и смещается влево. Это означает, что он будет ужат до ширины своего содержимого, то есть до суммарной ширины всех закладок.
  • Все элементы li (зеленые прямоугольники) находятся внутри элемента ul и смещаются влево. Таким образом, они ужимаются до размеров ссылок в них и выстраиваются в одну горизонтальную линию.
  • Внутри каждой ссылки (оранжевые прямоугольники) выводится текст закладки: Закладка 1, Закладка 2 и так далее.

Смещаем положение неупорядоченного списка

Смещение неупорядоченного списка

Затем мы смещаем элемент ul вправо на 50% с помощью свойства position:relative;. Когда элемент смещается с указанием процента при таких условиях важно помнить, что суммарная ширина содержащихся в нем элементов не является его шириной. В нашем случае смещение происходит на половину окна браузера (или доступного для вывода пространства).В результате наше меню начинается на середине окна и частично выходит за его пределы. И переходим к следующему шагу.

Сдвигаем положение всех элементов меню

Сдвигаем элементы меню

Осталось только сдвинуть все элементы li влево на 50%. Это 50% ширины нашего элемента ul (контейнера, который содержит меню). Таким образом, закладки смещаются точно на центр окна.

Несколько важных замечаний

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

  • Так как элемент ul частично выходит за рамки окна, то это приводит к выводу полос прокрутки. Поэтому нужно использовать правило overflow:hidden; для элемента centeredmenu div. Таким образом, выступающая часть элемента div будет обрезана.
  • Так как элемент ul не выровнен по закладкам, то нельзя использовать никаких визуальных стилей для него. Оставьте элемент ul без фонового цвета и без рамки, чтобы он стал полностью невидимым. А стили для закладок нужно использовать только для элементов li.
  • Если нужно задать особенные стили для первой и последней закладки, нужно добавить класс для первого и последнего элементов li, чтобы можно было стилизовать их индивидуально.

 

Заключение

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

ruseller.com

HTML код меню

<ul id="menu"> 	<li><a href="http://sitear.ru">Главная</a></li> 	<li><a href="http://sitear.ru">Дизайн, CSS</a></li> 	<li><a href="http://sitear.ru">Программирование</a></li> 	<li><a href="http://sitear.ru">Еще пункт меню</a></li> </ul>

По html структуре объяснять нечего, простой UL список. Как упоминалось раньше, семантика соблюдается. Семантика – это когда html тег соответствует содержимому. Если разделы меню сделать DIV блоками, это не будет семантикой. Равнозначные элементы должны быть списком. Посмотрим, что у нас получилось на данном этапе:

HTML структура горизонтального меню

UL элемент является блочным, поэтому его ширина будет 100% (на всю ширину страницы). LI также блочный элемент, а вот A – не блочный. Убедиться в этом можно с помощью наложения рамки в css стиле блока – border:1px solid #f00; Мне часто приходиться пользоваться этой хитростью, чтобы видеть границы элементов.

CSS код меню

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

#menu{list-style:none; width:500px; padding:0; margin: auto;} #menu li{float:left; font:bold 14px Arial;} #menu a{color:#666; display:block; height:40px; line-height:36px; padding:0px 10px 0px 10px; background:#eee; text-decoration:none;} #menu a:hover{color:#fff; background:#888;}

На данном этапе получилось следующее:

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

Разбор полетов

Разберем все поэтапно, до каждой мелочи:

#menu {…} – С помощью этого выражения мы присваиваем стили для UL элемента, у которого id=menu.

list-style:none; – убираем маркеры (пульки), слева от каждого элемента в списке.

width:500px; – ширина меню 500 пикселей.

margin: auto; – выравнивает меню по центру страницы. Если не будет указана ширина, то выравнивания не произойдет, поэтому предыдущий параметр обязателен.

padding:0; – устанавливаем нулевые внутренние отступы. То есть убираем их вообще. Если не знаете что это дает, установите их в 20px и посмотрите, что измениться.

#menu li {…} – присваиваем стили для LI элементов.

float:left; – обтекание элемента по левой стороне. Это выражение придает меню горизонтального положения.

font:bold 14px Arial; – устанавливаем стиль для текста в самой короткой форме, bold – жирный текст, 14px – размер шрифта в пикселях, Arial – тип шрифта.

#menu a {…} – присваиваем стили для A элемента (ссылки).

color:#666; – темно-серый цвет шрифта.

display:block; — делаем элемент блочным. Это даст возможность присваивать высоту для элемента. В практическом аспекте, это делает кликабельным не только текст ссылки, ни и поле вокруг текста.

height:40px; – высота меню будет 40 пикселей.

line-height:36px; – высота верхней линии над текстом. Это дает возможность задавать вертикальное положение текста внутри блока. Мы используем это для выравнивания текста в вертикальном направлении.

padding:0px 10px 0px 10px; – делаем внутренние отступы слева и справа по 10 пикселей.

background:#eee; – устанавливаем серый цвет фона для элементов меню.

text-decoration:none; – убираем линию подчеркивающую ссылку.

#menu a:hover {…} – присваиваем стили для A элемента при наведении на нее мышки.

color:#fff; – меняем цвет текста на белый.

background:#888; – цвет фона меняем на темно серый.

sitear.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
9.0+ 5.0+ 10.5+ 3.1+ 3.5+ 2.1+ 2.0+

Задача

Сделать горизонтальное меню, пункты которого имеют произвольный наклон (рис. 1).

Вид меню с наклонными пунктами

Рис. 1. Вид меню с наклонными пунктами

Решение

За трансформацию элемента отвечает стилевое свойство transform, в качестве его значения используется функция skewX, которая и задаёт нужный наклон. Угол наклона проще устанавливать в градусах, к примеру, 30deg — это 30º от вертикали. Трансформация действует и на все дочерние элементы, поэтому текст внутри элемента также будет наклонён, что не лучшим образом отражается на его читабельности и красоте. Поэтому к тексту важно ещё раз применить наклон, но уже в другую сторону, для этого достаточно просто поменять знак перед значением градусов.

Браузеры поддерживают свойство transform преимущественно со своими префиксами, так что для универсальности в стилях следует повторить его несколько раз с одним и тем же значением, добавляя -moz- для Firefox, -webkit- для Safari и Chrome, -o- для Opera и -ms- для браузера Internet Explorer как показано в примере 1.

Пример 1. Наклон пункта меню

HTML5CSS3IECrOpSaFx

<!DOCTYPE html> <html>  <head>  <meta charset="utf-8">  <title>Меню</title>  <style>  li {  display: inline-block; /* Строчно-блочные элементы */  background: #CA181A; /* Цвет фона */  margin-right: 3px; /* Расстояние между пунктами меню */  -webkit-transform: skewX(-30deg); /* Для Safari и Chrome */  -moz-transform: skewX(-30deg); /* Для Firefox */  -o-transform: skewX(-30deg); /* Для Opera */  -ms-transform: skewX(-30deg); /* Для IE */  transform: skewX(-30deg); /* CSS3 */  }  a {  color: #fff; /* Цвет ссылок */  display: block; /* Блочный элемент */  padding: 5px 15px; /* Поля вокруг текста */  text-decoration: none; /* Убираем подчёркивание */  -webkit-transform: skewX(30deg); /* Для Safari и Chrome */  -moz-transform: skewX(30deg); /* Для Firefox */  -o-transform: skewX(30deg); /* Для Opera */  -ms-transform: skewX(30deg); /* Для IE */  transform: skewX(30deg); /* CSS3 */  }  li:hover {  background: #333; /* Цвет фона при наведении курсора мыши */  }  </style>  </head>  <body>  <ul>  <li><a href="1.html">Джокер</a></li>  <li><a href="2.html">Пазузу</a></li>  <li><a href="3.html">Палпатин</a></li>  <li><a href="4.html">Доктор Дум</a></li>  </ul>  </body> </html>

В данном примере горизонтальное меню создаётся с помощью маркированного списка. Чтобы список был именно горизонтальным, в стилях к элементу li добавляется свойство display со значением inline-block. Для наклона применяется свойство transform с функцией skewX и значением -30º. К ссылкам внутри списка также применяется это свойство, но уже с положительным значением 30º, это обеспечивает правильное, а не наклонное отображение букв.

Браузеры Chrome, Safari и Firefox используют свойство transform для блочных или строчно-блочных элементов, поэтому для ссылок задано свойство display со значением block.

htmlbook.ru

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

Приветствую Вас, уважаемые читатели блога 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 дней бесплатно: РЕГИСТРАЦИЯ ОБЗОР ВИДЕО

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

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

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

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

 <ul id="nav1">  <li><a href="#1">Пункт 1</a>  <li><a href="#2">Пункт 2</a>  <li><a href="#3">Пункт 3</a>  <li><a href="#4">Пункт 4</a> </ul>

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

 <ul id="nav2">  <li><a href="#1">Пункт 1</a>  <li><a href="#2">Пункт 2</a>  <li><a href="#3">Пункт 3</a>  <li><a href="#4">Пункт 4</a> </ul>

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

 <ul id="nav3">  <li><a href="#1">Пункт 1</a>  <li><a href="#2">Пункт 2</a>  <li><a href="#3">Пункт 3</a>  <li><a href="#4">Пункт 4</a> </ul>
 <ul id="nav4">  <li><a href="#1">Пункт 1</a>  <li><a href="#2">Пункт 2</a>  <li><a href="#3">Пункт 3</a>  <li><a href="#4">Пункт 4</a> </ul>

Создание горизонтального HTML меню с пунктами одинаковой ширины

 <ul id="nav5">  <li><a href="#1">Пункт 1</a>  <li><a href="#2">Пункт 2</a>  <li><a href="#3">Пункт 3</a>  <li><a href="#4">Пункт 4</a> </ul>

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

 <ul id="nav6">  <li><a href="#1">Пункт 1</a>  <li><a href="#2">Пункт 2</a>  <li><a href="#3">Пункт 3</a>  <li><a href="#4">Пункт 4</a> </ul>

shpargalkablog.ru

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

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

Источник | Пример

Первый туториал CSS3 Dropdown Menu — самый новый в подборке (за апрель 2016). Плюсы решения: в данном горизонтальном выпадающем меню для сайта в подпунктах есть иконки, реализация и сам CSS код достаточно простые для понимания и внедрения.

Шаг1 — HTML разметка

Первым делом создаем неупорядоченный список в HTML с якорными ссылками (#) для его элементов. Туда же в один из пунктов добавляем еще один вложенный список, который будет отвечать за подменю.

Шаг2 — отображение меню

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

Шаг3 — оформление ссылок

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

Шаг4 — подменю

Поскольку у нас меню сайта на CSS выпадающее, то следует задать также оформление вложенному списку. Вначале ставим отступ 40px сверху и 0px слева + добавлем округленные углы. Для показа/скрытия подменю изначально устанавливаем свойство прозрачности (opacity) равное нулю, а при наведении — единице. Для создания эффекта появления подменю указываем значение высоты списка в ноль, а при hover = 36px.

Ширину ссылок ставим = 100px, внизу всех элементов кроме последнего добавляется граница border-bottom. Также, по желанию, вы можете разместить картинки для пунктов подменю (внимание! не забудьте изменить пути к изображениям в коде на используемые вами).

Мне лично нравится простота реализации и использование иконок. Вот итоговый код с codepen:

2. Простое выпадающее CSS3 меню

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

Источник

Вариант от Josh Riser визуально похож на предыдущее выпадающее меню на HTML и CSS. В коде нет дочернего селектора " > " (полезен в многоуровневых конструкциях), но автор удачно использует эффекты CSS3 (transition, box-shadow и text-shadow) для более красивого результата. По ссылке в источнике отсутствует описание процесса создания горизонтального выпадающего меню, поэтому я сразу приведу итоговый код:

3. Выпадающее меню с блоком поиска

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

Источник | Пример

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

HTML код

Для навигации, как всегда, используется неупорядоченный список (с классом nav). Обычные пункты меню являются элементами списка (li) и содержат ссылки (a href) без каких-либо классов и ID. Исключением являются 3 специализированных элемента данного горизонтального выпадающего меню с такими ID:

  • settings — ссылка картинка;
  • search — блок с поиском и соответствующей кнопкой;
  • options — содержит подменю (реализовано через список с классом subnav).

Также в коде увидите скрипт prefixfree для использования свойств CSS без префиксов. Итоговый вариант HTML для выпадающего меню имеет вид:

CSS для меню

1. Базовые стили и элементы меню

Во-первых, указываем шрифт Montserrat, темный серый фон и фиксированную высоту для пунктов меню. Все элементы имеют выравнивание float: left и позиционирование relative дабы потом можно было добавить подменю с position: absolute;

2. Оформление ссылок

Для пунктов меню применяется базовое оформление + css hover эффект при наведении. Высота такая же как и в классе nav. Для #settings ссылки-картинки в начале меню задается выравнивание.

3. Блок поиска

Данный элемент имеет фиксированную ширину и состоит из нескольких частей — поля ввода (#search_text) с зеленым фоном и кнопки поиска (#search_button). В некоторых браузерах цвет фона может быть серым.

4. Выпадающее подменю

Финальный штрих позволит нам как сделать выпадающее меню на CSS, которое срабатывает для последнего пункта #options.

В стилях найдете вставку фонового изображения треугольника (triangle.png) для обозначения подменю — не забудьте указать правильный путь для этой и других картинок в примере. Появлением подменю реализуется с помощью свойства opacity. Итоговое решение на codepen:

4. Многоуровневое выпадающее CSS меню

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

Источник

В данном варианте в основном используются приемы CSS2.1, решение плюс-минус новое — за март 2015. Если вам не хватает одного подуровня в горизонтальном выпадающем меню для сайта, то этот пример содержит сразу три. С помощью псевдокласса :only-child для пунктов добавляется символ «+» обозначающих наличие подменю.

В целом, неплохой и несложный пример. Не будем детально описывать процесс реализации, т.к. он похож на предыдущие — сначала создаете HTML каркас, а потом постепенно добавляете для него стили. Итоговый код скачивайте по ссылке на источник, частично его можно глянуть в Codepen:

Итого

Выше мы рассмотрели 4 варианта как сделать выпадающее меню на CSS + HTML для шапки сайта (header), хотя подобных примеров в сети гораздо больше. Есть решения с jQuery, но это, скорее всего, пригодится только для реализации каких-то специальных эффектов и нестандартных задач. В большинстве случаев хватит связки CSS + HTML, тем более, что сейчас главные требования к меню — это удобство и быстрая скорость загрузки.

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

Если знаете еще какие-то интересные современные реализации горизонтальных выпадающих меню для сайта, присылайте ссылки в комментариях.

design-mania.ru


You May Also Like

About the Author: admind

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

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

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

Adblock
detector