Css меню для начинающих

Плагин Page scroll to id

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

  • вертикальным и горизонтальным скроллингом;
  • разными настройками анимации;
  • поддержкой переходов по ссылкам на другие страницы;
  • подсветкой ссылок, заданием отступов, длительности перехода и т.п.;

Вот как выглядит пример меню:

Думаю, Page scroll to id будет полезен, если вам надо сделать навигацию на одностраничном лендинге, а базовый шаблон не обладает подобной опцией (либо она ограничена в настройках).

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

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

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

Горизонтальное меню с вкладками

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

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

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

Этот пример похож на предыдущий, поэтому рассмотрим только отличия.

  1. Оставляем у основного блока нашего горизонтального меню только нижнюю границу рамки (CSS border-bottom), а также изменяем внутренние отступы (CSS padding) таким образом, чтобы элементы списка прижались к этой границе. В этот раз мы не будем выравнивать пункты меню по какой-либо из сторон или по центру, а просто зададим большой левый отступ у основного блока, чтобы он немного отодвинул их от края.
  2. В результате действий первого этапа, наши пункты меню, а, следовательно, и ссылки прижались к нижней границе основного блока. Однако нам надо, чтобы они не просто прижались, а произошло наложение нижних частей рамок ссылок на эту границу. Для этого задаем элементам списка относительное позиционирование (CSS position:relative) и смещаем их вниз на расстояние равное толщине рамок (у нас это 2px). Смещение делаем с помощью свойства CSS bottom.
  3. Для элемента «current» и ссылок в момент наведения на них курсора мыши (CSS :hover) переопределяем цвет нижней границы рамки (CSS border-bottom-color) и делаем его таким же, как и фон этих элементов. Так мы скроем нижнюю границу в местах наложения ссылок и получим эффект вкладок.

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

Теперь перейдём к самому интересном, это то как сделать горизонтальное меню в HTML и CSS,  суть примерно такая же, как и с первым случаем, но тут буду уже использовать FlexBox.

Сначала надо внести изменения в HTML, мы просто перетащим навигацию в header.

XHTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<header>

<h3>Header</h3>

<nav>

<ul class=»menu»>

<li><a href=»#»>Главная</a></li>

<li><a href=»#»>Новости</a></li>

<li><a href=»#»>Игры</a></li>

<li><a href=»#»>Продукты</a></li>

</ul>

</nav>

</header>
<main>

<div class=»content»>

<h1>Content</h1>

</div>

</main>

Просто перенесли всё навигацию на верх, теперь изменим CSS.

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

header {

borderblack2pxsolid;

}
 

header nav {

width600px;

borderblack2pxsolid;

margin-right10px;

padding10px20px;

}
 

header nav ul {

displayflex;

justify-contentspace-around;

padding;

}
 

header nav ul li {

list-style-typenone;

}
 

main .content {

borderblack2pxsolid;

}

Тут самое важное, это то, что для работы с FlexBox, нужно сделать значение свойства , «flex», что и сделали для тега. Дальше, после этого идёт свойство , которое нужно для определения пространства между дочерними блоками, в нашем случае принимает значение «space-around», что означает равномерное распределение пространства, вот результат

Дальше, после этого идёт свойство , которое нужно для определения пространства между дочерними блоками, в нашем случае принимает значение «space-around», что означает равномерное распределение пространства, вот результат.

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

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

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

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

Разметка HTML

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

  • Первая закладка
  • Вторая закладка
  • Третья закладка
  • Четвертая закладка

Выпадающее меню (многоуровневое)

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

Изначально любое меню нужно создавать как многоуровневое!

В последние годы реально-многоуровневые меню уходят в прошлое. Двух уровней, обычно, вполне достаточно, остальные — оформляются отдельным дополнительным меню.

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

За основу взят код предыдущего примера. К одному из пунтков добавлен вложенный список второго уровня.

HTML-код 2-х уровневого меню:

<nav class="menu_color">
    <ul class="my_menu">
        <li><a href="#/">пункт 1<a><li>
        <li class="parent"><a href="#/">родительский пункт 2<a>
            <ul class="sub-menu">
                <li><a href="#/">дочерний подпункт 1<a><li>
                <li><a href="#/">дочерний подпункт 2<a><li>
            <ul>
        <li>
        <li><a href="#/">пункт 3<a><li>
        <li class="active"><a href="#/">пункт 4<a><li>
        <li><a href="#/">пункт 5<a><li>
    <ul>
<nav>

Добавлены классы — родительский тег, содержащий подменю, и — вложенный список выпадающего меню.

Разбиваем на несколько этапов:

  • Оформление
  • Скрыть в исходном состоянии
  • Вывод при наведении на родительский пункт

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

/* Оформление sub-menu */
.menu_color .sub-menu {
  background #f5f5f5;
  border 1px solid #f5f5f5;
}
/* Офррмление подпунктов */
.menu_color .sub-menu li a{
  color #555;
  background rgba(, , , );
}
/* Офррмление подпунктов при наведении */
.menu_color .sub-menu li a:hover{
  color #fff;
  background #555;
}
/* Разделитель для пунктов sub-menu */
.menu_color .sub-menu > li + li > a {
  border-top 1px solid #fff;
  box-shadow  -1px  #ddd;
  padding-left 40px  /* Добавляем отступ для подпунктов */
}

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

Позиционирование и скрытие

Позиционирование осуществляется относительно родительского . (Именно для этого при сбросе и установке для него было задано )

/*Общие*/
.my_menu .sub-menu {
  display none;
  position absolute;
  top ;
  min-width 200px;
  z-index 9999;
} 

Вывод

В зависимости от расположения основного меню (левая/правая боковая колонка), подменю может выпадать как вправо, так и влево. Поэтому для определения стилевых правил используем класс родительского блока  (В исходном html-коде класс не указан, т.к. к коду меню отношения не имеет). 

/* Вывод */
.my_menu .parent:hover .sub-menu {
  display block;
  top 4px;
}
/* со смещением вправо */
.sidebar_left .my_menu .parent:hover .sub-menu {
  left 100%;
  margin-left -10px;
}

×

Информация

Если у родительского блока нет класса, или он применяется как к правой так и к левой колонкам — нужно этот класс добавить к тегу .

Подменю выпадающеее влево

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

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

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

Цель — универсальность! Вы один раз прописываете код, а потом размещаете меню где хотите и оно будет работать правильно!

/* Смещение влево */
.sidebar_right .my_menu .parent:hover .sub-menu {
  right 100%;
  left auto;
  margin-right -5px;
}

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

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

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

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

Разметка HTML

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

<div id="centeredmenu">
	<ul>
		<li><a href="#">Первая закладка</a></li>
		<li><a href="#" class="active">Вторая закладка</a></li>
		<li><a href="#">Третья закладка</a></li>
		<li><a href="#">Четвертая закладка</a></li>
	</ul>
</div>

Создание горизонтального выпадающего меню:

Сперва на HTML и CSS сделаем выпадающее меню которое будет проявляться при наведении мышки, вот его HTML.

XHTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<header>

<nav>

<ul>

<li><a href=»#»>Главная</a></li>

<li>Галерея

<ul>

<li><a href=»#»>Машины</a></li>

<li><a href=»#»>Горы</a></li>

<li><a href=»#»>Компьютеры</a></li>

</ul>

</li>

<li>О себе

<ul>

<li><a href=»#»>Имя</a></li>

<li><a href=»#»>Аватарка</a></li>

</ul>

</li>

</ul>

</nav>

</header>

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

Теперь перейдём к CSS, но сначала мы не будем делать прям выпадающие меню, оно просто при наведении мыши, будет просто появляться, вот и всё.

CSS

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

html, body {

margin;

padding;

}
 

nav > ul {

displayflex;

margin;

width100%;

background-colorgreen;

}
 

nav > ul > li {

margin-right20px;

}
 

li {

colorwhite;

list-stylenone;

font-size20px;

}
 

li a {

colorwhite;

text-decorationnone;

}
 

li > ul{

displaynone;

positionabsolute;

background-colortomato;

padding;

}
 

li:hover > ul{

displayblock;

}

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

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

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

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

Примечание:

Тут покажу только те селекторы, которые изменим, а не весь CSS, так как, там добавилось не много.

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

nav > ul {

displayflex;

margin;

width100%;

height25px;

background-colorgreen;

}
 

li > ul{

positionabsolute;

top40px;

visibilityhidden;

opacity;

background-colortomato;

padding;

transition400ms;

}
 

li:hover > ul{

visibilityvisible;

top25px;

opacity1;

}

В последнем селекторе который мы изменяем, который ещё отвечает за наведение мышки, убираем и добавляем , для показа элемента, равный 25 пикселям и , для полной не прозрачности.

Также появилось свойство , для плавных переходов, мы задаём ему время перехода 400 миллисекунды.

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

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

.menu li {

display: inline;

}

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

.menu li {

display: inline;

white-space: nowrap;

}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пара слов о пунктах меню сайта

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

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

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

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

Формы

Форма входаФорма регистрацииФорма оформления заказаКонтактная формаФорма входа в соцсетьФорма регистрацииФорма с иконкамиНовостная рассылкаСложенная формаАдаптивная формаPopup формаВстроенная формаОчистить поле вводаКопировать текст в буфер обменаАнимированный поискКнопка поискаПолноэкранный поискПоле ввода в навбареФорма входа в навбареПользовательский Checkbox/RadioВыбор пользователяКнопка — переключательВыбрать CheckboxОбнаружение Caps LockТриггер-кнопка нв вводеПроверка пароляПереключить видимость пароляМногошаговая формаАвтозаполнение

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

Исходный 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% соответственно.

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

Масштаб страниц в браузере

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

Чтобы уменьшить масштаб страницы надо зажать клавишу на клавиатуре, и нажать клавишу столько раз, пока веб-страница не уменьшиться до нужного вам размера ( + »). Чтобы увеличить масштаб страницы надо зажать клавишу на клавиатуре, и нажать клавишу столько раз, пока веб-страница не увеличится до нужного вам размера ( + »). Вместо нажатия клавиш и можно использовать колёсико мышки, прокручивая его от себя или на себя.

Примечание: для возврата масштаба страницы к исходному значению (100%), нажмите + .

С этой темой смотрят:

  • Создание html документа
  • Введение в html
  • HTML элементы

Настройка

Создайте пустой HTML-документ и назовите его index.html. Добавьте в него базовый HTML-код.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   
</body>
</html>

Я использовала шрифт Font Awesome для иконки меню. Поэтому добавьте приведенную далее строку кода ниже тега <title>.

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" rel="stylesheet">

Создайте файл styles.css и подключите его в HTML-документе:

<link rel="stylesheet" href="styles.css">

Я использовал в качестве логотипа приведенное ниже изображение. Вы можете добавить свое собственное изображение.

Что собой представляет меню сайта

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

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

Правильное меню сайта должно отвечать нескольким важным требованиям:

Разметка HTML

Меню построено на неупорядоченном списке и имеет один уровень (очень часто, такого уровня вложенности хватает для решения задач интерфейса приложения).

            <ul id="nav">
                <li><a href="#"><img src="images/t1.png" /> Главная</a></li>
                <li><a href="#" class="sub" tabindex="1"><img src="images/t2.png" />HTML/CSS</a><img src="images/up.gif" alt="" />
                    <ul>
                        <li><a href="#"><img src="images/empty.gif" />Ссылка 1</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Ссылка 2</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Ссылка 3</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Ссылка 4</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Ссылка 5</a></li>
                    </ul>
                </li>
                <li><a href="#" class="sub" tabindex="1"><img src="images/t3.png" />jQuery/JS</a><img src="images/up.gif" alt="" />
                    <ul>
                        <li><a href="#"><img src="images/empty.gif" />Ссылка 6</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Ссылка 7</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Ссылка 8</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Ссылка 9</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Ссылка 10</a></li>
                    </ul>
                </li>
                <li><a href="#"><img src="images/t2.png" />PHP</a></li>
                <li><a href="#"><img src="images/t2.png" />MySQL</a></li>
                <li><a href="#"><img src="images/t2.png" />XSLT</a></li>
            </ul>

Адаптация выпадающего html меню под мобильные устройства

Для того чтобы данное меню стало адаптироваться под мобильные устройства нам нужно:

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

    PHP

    <div class=»mobile-menu-button»> Меню </div>

    1 <div class=»mobile-menu-button»>Меню<div>
  2. 2.Далее нам нужно убедиться что к сайту подключена библиотека jQuery.

    Более подробно о её подключении вы можете узнать в этой статье «Как подключить jQuery к сайту»

  3. 3.Добавить небольшой скрипт, который отвечает за вызов выпадающего меню при нажатии на соответствующую кнопку на маленьких экранах. Данный скрипт вставляем перед закрытием тега </body>

    PHP

    <script>
    jQuery(document).ready(function($) {
    $(‘.mobile-menu-button’).click(function(e) {
    var $message = $(‘.new-mobile-menu’);
    if ($message.css(‘left’) != ‘0px’) {
    $message.css(‘left’,’0px’);
    var firstClick = true;
    $(document).bind(‘click.myEvent’, function(e) {
    if (!firstClick && $(e.target).closest(‘.new-mobile-menu’).length == 0) {
    $message.css(‘left’,’-1000px’);
    $(document).unbind(‘click.myEvent’);
    }
    firstClick = false;
    });
    }
    e.preventDefault();
    });
    });
    </script>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21

    <script>

    jQuery(document).ready(function($){

    $(‘.mobile-menu-button’).click(function(e){

    var$message=$(‘.new-mobile-menu’);

    if($message.css(‘left’)!=’0px’){

    $message.css(‘left’,’0px’);

    varfirstClick=true;

    $(document).bind(‘click.myEvent’,function(e){

    if(!firstClick&&$(e.target).closest(‘.new-mobile-menu’).length==){

    $message.css(‘left’,’-1000px’);

    $(document).unbind(‘click.myEvent’);

    }

    firstClick=false;

    });

    }

    e.preventDefault();

    });

    });

    </script>

Вот, собственно говоря, и всё! Теперь осталось всё сохранить, проверить работоспособность и при необходимости внести свои правки в html и css код.
На первый взгляд кода много, но он не сложный и вы без труда сможете скорректировать его под свой сайт.

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

Так же заходите на мой канал YouTube, уверена, что вы найдёте там что то интересное для себя!

Успехов вам и вашим проектам! До скорых встреч в других моих статьях и видео!

С уважением Юлия Гусарь

Оцените статью
Рейтинг автора
5
Материал подготовил
Илья Коршунов
Наш эксперт
Написано статей
134
Добавить комментарий