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

Содержание:

Команды в AutoCAD
Выпадающее меню со списком элементов на HTML
Блочное горизонтальное меню (float)
- Описание примера
Что это такое
Меню для сайта на CSS в онлайн сервисе
- Создание горизонтального или вертикального меню
Горизонтальное выпадающее меню с разделителями
Влияние меню сайта на продвижение
CSS:
Простое вертикальное меню
Горизонтальное меню
Горизонтальное выпадающее меню на всю ширину
Как зафиксировать меню при прокрутке
Горизонтальное выпадающее меню на CSS

Команды в AutoCAD

Выпадающее меню со списком элементов на 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 и обращения к фрилансерам!

Блочное горизонтальное меню (float)

Изменяющееся контекстное меню в 1с 8.3

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

Пример HTML и CSS: блочное горизонтальное меню с float

Описание примера

С помощью свойства CSS float:left выстраиваем элементы списка по горизонтали и добавляем каждому из них правое поле (CSS margin-right), чтобы они не прилегали друг к другу.
Делаем из ссылок встроенные блоки (CSS display:inline-block), чтобы при необходимости у них можно было изменять размеры. В конце задаем всем элементам горизонтального меню необходимое оформление.

Так как пункты меню у нас всплывают влево, то HTML-элементы, которые будут находиться ниже навигации, смогут также ее обтечь. Чтобы этого не произошло, можно сделать прерывание обтекания с помощью свойства CSS clear или установить у блока с class=»menu» такую высоту, которая гарантированно будет больше высоты ссылок.

Что это такое

Инженерное меню на android

Меню для сайта на CSS в онлайн сервисе

Щелкните по любому из шаблонов и вы увидите в области «Preview», как будет выглядеть меню, созданное на его основе с использованием одного лишь CSS (таблиц каскадных стилей).

Посмотрите как оно работают и прикиньте, какой шаблон, на ваш взгляд, наилучшим образом подойдет к дизайну вашего сайта. Учтите, что цветовое оформление, а так же размер, тип и начертание шрифта можно будет поменять на вкладке «Parameters»:

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

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

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

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

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

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

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

Для добавления вложенного пункта нажмите на кнопку под названием «Add Subitem», при этом должен быть выбран в окне мастера тот пункт меню, в котором вы хотите создать вложенный. Ну, а кнопка под названием «Remove Item» служит для удаления выбранного в текущий момент.

Для каждого созданного пункта вы должны заполнить поля в области «Item Parameters».

в поле «Text» должны вписать текст
в поле «Link» должны вписать Урл страницы, на которую должен будет осуществиться переход
в поле «Tip» можете, при желании, указать . Содержимое тега TITLE будет видно, если подвести указатель мыши к ссылке
в поле «Target» из выпадающего списка вы можете выбрать способ открытия страницы, ссылку на которую вы прописали для данного пункта горизонтального или вертикального меню. Если вы оставите значение по умолчанию «_self», то при его выборе посетителем вашего сайта, страница откроется в этом же окне браузера. Если вы хотите, чтобы страница открывалась в новом окне браузера, то нужно будет выбрать из выпадающего списка вариант «_blank»

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

Существует несколько десятков вариантов, как на чистом CSS добавить полоску (разделитель) между пунктами меню. Варианты, которые используют ::before или ::after , или куда проще border-left, border-right я дублировать не буду.

Бывают ситуации, когда верстка построена так чудесненько, что без jquery не обойтись.

Html код у нас остается прежним, мы только подключаем в самом начале библиотеку jQuery и файл, который ее использует:

Сразу после </title>.

Как вы поняли, нужно создать файл script-menu-3.js и туда закинуть вот такой маленький код:

Стили CSS для такого меню нужно оставить те что есть, + забросить вот этот кусок в конец:

Можно просмотреть в режиме демо или скачать шаблон горизонтального меню ниже:

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

Преимуществами такого решения является:

меню будет тянутся динамически;
отступы от разделителя до пункта везде одинаковые;
более красивое и гибкое оформление.

Влияние меню сайта на продвижение

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

Удобная навигация и грамотная перелинковка. Внутренняя оптимизация в итоге будет оценена по достоинству и пользователями, и поисковыми роботами. Перелинковка помогает при ориентации посетителей в контенте ресурса, позволяет легко переходить по ссылкам в нужные разделы. Правило трех кликов должно стать основным при навигации по сайту.
Интересные названия разделов способствуют увеличению времени, которое посетитель проведет на страницах проекта. Для поисковиков это положительный критерий при оценке поведенческих факторов.
Грамотная разработка сайта подразумевает создание семантического ядра. Для этого предварительно собирается и анализируется информация о тематических поисковых фразах. Названия разделов должны представлять собой самые частотные из пользовательских запросов. Это значит, что заголовки меню нужно разрабатывать в тесном контакте с SEO-специалистом.
Графические элементы необходимо снабдить alt и title, чтобы поисковики учитывали их при индексации ресурса.

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%;
}

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120

.main-menu {

list-stylenone;

margin;

padding;

margin-top30px;

font-family’Montserrat’,sans-serif;

/* Для выравнивания меню по центру

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    */
}

.main-menu > li {

displayinline-flex;

}

.main-menu > li + li {

margin-left20px;

}

.main-menu > li > a {

padding20px;

positionrelative;

text-transformuppercase;

color#000;

font-weightbold;

letter-spacing0.2px;

font-size15px;

text-decorationnone;

}

.main-menu > li > a:hover {

text-decorationnone;

color#337AB7;

}

.main-menu > li > a:after {

width;

height3px;

background-color#337AB7;

content»;

left;

bottom10px;

positionabsolute;

transitionall.3s;

}

.main-menu > li > a:hover::after {

width100%;

}

.main-menu > li.active a:after {

width100%;

}

.main-menu li {

margin;

white-spacenowrap;

}

.main-menu li.menu-children {

positionrelative;

margin-right12px;

}

.main-menu li.menu-children:after {

positionabsolute;

content»\2039″;

color#337AB7;

font-size20px;

font-weightbold;

right-12px;

top-2px;

transformrotate(-90deg);

}

.main-menu li li.menu-children:after {

positionabsolute;

content»\2039″;

color#FFF;

font-size20px;

font-weightbold;

right10px;

top12px;

transformrotate(180deg);

}

.main-menu li.menu-children:hover > ul {

opacity1;

visibilityvisible;

transformtranslateY();

}

.main-menu ul {

padding10px;

margin;

list-stylenone;

background-color#337AB7;

positionabsolute;

z-index20;

min-width220px;

top100%;

left-30px;

opacity;

visibilityhidden;

transformtranslateY(5px);

transitionall200mscubic-bezier(0.43,0.59,0.16,1.25);

}

.main-menu ul li {

displayblock;

padding10px;

line-height1.1;

}

.main-menu ul li:last-child {

margin-bottom;

}

.main-menu ul li a {

displayblock;

color#fff;

padding10px;

transitionall.3s;

text-decorationnone;

}

.main-menu ul li a:hover {

color#337AB7;

background#FFF;

text-decorationnone;

}

.main-menu ul ul {

top;

left100%;

}

Простое вертикальное меню

Исходный html-код меню будет выглядеть так:

<nav class="menu_color">
  <ul class="my_menu">
    <li><a href="#/">пункт 1<a><li>
    <li><a href="#/">пунтк 2<a><li>
    <li><a href="#/">пункт 3<a><li>
    <li class="active"><a href="#/">пункт 4<a><li>
    <li><a href="#/">пункт 5<a><li>
  <ul>
<nav>

Кроме основных классов, рассмотренных в предыдущем материале, добавлен класс для активного пункта (ссылка на текущую страницу).

Сброс и установка стилей по умолчанию

Избавляемся от стилей для списков, назначенных браузером (или шаблоном) по умолчанию.

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

Здесь же можно задать размеры и другие свойства шрифта, если они отличаются от основных.

Файл my-menu.css

/* Убираем маркеры и отступы */
.my_menu {
  list-stylenone;
  margin;
  padding;
}
.my_menu li {
  margin;
  padding;
  positionrelative;
}
/* Общие правила для пунктов меню */
.my_menu li a {
  displayblock;
  margin;
  padding12px 20px;
  text-decoration none;
}
/*Наведение на активный пункт меню - курсор обычный */
.my_menu li.active > a:hover {
  cursor default;
}

Цветовое оформление

Прежде чем прописывать стили, составляем список объектов к которым обычно применяется цветовое оформление:

Цвет фона меню
Цвет и фон ссылки. При оформлении пунктов меню стилевые правила применяются непосредственно к ссылкам, т.е тегу
Цвет и фон ссылки при наведении курсора
Цвет и фон активной ссылки

Примечание

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

/* === Цветовое оформление menu_color === */
.menu_color {
  background#555;
}
/* Оформление пункта */
.menu_color > ul > li > a {
  color#999;
  background rgba(, , , );
}
/* Подсветка пункта при наведении */
.menu_color > ul > li > a:hover {
  color #bbb;
  background rgba(, , , 0.1);
}
/* Активный пункт */
.menu_color > ul > li.active > a,
.menu_color > ul > li.active > a:hover {
  color#fff;
  backgroundrgba(, , , 0.4);
}

Пояснения:

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

Замечание

Цвет фона меню задавать не обязательно, если он наследуется от родительского блока.

Разделители пунктов

Стили привязываем к классу , т.к. это элемент оформления, а не разметки.

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

Если в этом нет необходимости — заменяем на

/* Разделитель пунктов меню */
.menu_color > ul > li + li > a {
   border-top 1px solid rgba(255, 255, 255, 0.1);
   box-shadow  -1px  rgba(, , , 0.15);
}

Повторяем тот же трюк с использованием rgba. Цвета для верхней границы и тени заданы полупрозрачными — черный 15% прозрачности и белый 10% соответственно.

Это универсальное режение для любого темного бэкграунда. Если вы решите изменить цвет фона, то цвет рамки и тени изменится автоматически!

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

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

Горизонтальное меню можно создать путем стилизации обычного списка. Свойству display для элементов <li> нужно присвоить значение inline, чтобы пункты списка располагались друг за другом.

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

<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;
}
#navbar li { display: inline; }

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

Теперь нам осталось лишь определить стилевое оформление для нашего горизонтального меню:

#navbar {
  margin: 0;
  padding: 0;
  list-style-type: none;
  border: 2px solid #0066FF;
  border-radius: 20px 5px;
  width: 550px;
  text-align: center;
  background-color: #33ADFF;
}
#navbar a {
  color: #fff;
  padding: 5px 10px;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
  width: 100px;
}
#navbar a:hover {
  border-radius: 20px 5px;
  background-color: #0066FF;
}

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

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

Большинство из вас могут меня упрекнуть, мол такие менюшки, как я показал выше, это привет из прошлого и от части вы правы, хотя я встречал свежие верстки с такими менюшками.

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

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

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

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

Для очень длинных пунктов меню, такой вариант может быть не сильно удобным, так как они будут вылазить за пределы. Чтобы отключить это свойство, достаточно найти свойство «white-space:nowrap;» у селектора #menu1 ul li ul, и удалить его.

Ниже вы можете посмотреть демо или скачать исходники горизонтального выпадающего меню:

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

Без разделителей это меню смотрится так себе. Разделители можно добавить в хтмл руками, но если у вас CMS, например WordPress, – то руками там добавлять не сильно удобно.

Далее я покажу вам как можно добавить разделители в меню.

Как зафиксировать меню при прокрутке

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

<body>
  <!-- Блок до меню Navbar (например, логотип) -->
  <div style="height: 90px;">...</div> 
  <!-- Горизонтальное меню Navbar -->
  <nav class="navbar navbar-default navbar-static-top" style="position: -webkit-sticky; position: sticky; top: 0;">
    ...
  </nav>
</body>

Но данное решение не работает в браузерах IE и Edge. Если нужна их поддержка всех браузеров, то можно воспользоваться плагином Bootstrap 3 Affix.

<body>
  <!-- Блок до меню Navbar (например, логотип) -->
  <div style="height: 90px;">...</div> 
  <!-- Горизонтальное меню Navbar -->
  <nav class="navbar navbar-default navbar-static-top" data-spy="affix" data-offset-top="90">
    ...
  </nav>
</body>

.navbar.affix {
  top:0;
  width:100%;
}

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

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

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

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

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

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

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

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

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