Как сделать кнопку открывающее меню

Обновлено: 01.07.2024

Узнайте, как создать анимированное закрываемое боковое навигационное меню на сайте.

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

Шаг 1) Добавить HTML:

Пример

Шаг 2) Добавить CSS:

Пример

/* Положение и стиль кнопки закрытия (верхний правый угол) */
.sidenav .closebtn position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
>

/* На экранах меньшего размера, где высота меньше 450px, измените стиль sidenav (меньше отступов и меньший размер шрифта) */
@media screen and (max-height: 450px) .sidenav
.sidenav a
>

Шаг 3) Добавить JavaScript:

Пример ниже выскальзывает в боковой навигации и делает его шириной 250 пикселей:

Оверлей боковой навигаци. Пример

/* Установите ширину боковой навигации до 250 пикселей */
function openNav() document.getElementById("mySidenav").style.width = "250px";
>

/* Установите ширину боковой навигации на 0 */
function closeNav() document.getElementById("mySidenav").style.width = "0";
>

Приведенный ниже пример перемещает боковую навигацию и сдвигает содержимое страницы вправо (значение, используемое для установки ширины sidenav, также используется для установки левого поля "страницы из содержимым"):

Боковая навигация выталкивает контент

/* Установите ширину боковой навигации 250 пикселей, и левый край содержимого страницы - 250 пикселей. */
function openNav() document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
>

/* Установите ширину боковой навигации равной 0, и левое поле содержимого страницы - 0. */
function closeNav() document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
>

Приведенный ниже пример также перемещает боковую навигацию и перемещает содержимое страницы вправо, только на этот раз мы добавляем черный цвет фона с непрозрачностью 40% к элементу body, чтобы "выделить" боковую навигацию:

Боковая навигация выталкивает контент с непрозрачностью

/* Установите ширину боковой навигации 250 пикселей, и левое поле содержимого страницы - 250 пикселей и добавьте черный цвет фона к телу. */
function openNav() document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
>

/* Установите ширину боковой навигации равной 0, и левое поле содержимого страницы - 0, и цвет фона тела - белым. */
function closeNav() document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
document.body.style.backgroundColor = "white";
>

Пример ниже скользит в боковой навигации слева и охватывает всю страницу (ширина 100%):

Боковая навигация на всю ширину:

/* Открыть боковую навигацию */
function openNav() document.getElementById("mySidenav").style.width = "100%";
>

/* закрыть/скрыть боковую навигацию */
function closeNav() document.getElementById("mySidenav").style.width = "0";
>

Пример ниже открывает и закрывает боковое меню навигации без анимации:

Боковая навигация без анимации

/* Открыть боковую навигацию */
function openNav() document.getElementById("mySidenav").style.display = "block";
>

/* Закрыть/скрыть боковую навигацию */
function closeNav() document.getElementById("mySidenav").style.display = "none";
>

В приведенном ниже примере показано, как создать правое навигационное меню:

Правосторонняя навигация:

В приведенном ниже примере показано, как создать боковое навигационное меню, которое всегда отображается (зафиксировано):

Всегда отображать боковую навигацию:

Совет: Посетите CSS Навбар учебник чтобы узнать больше о панелях навигации на нашем сайте W3Schools на русском.

Этот сниппет создает разделенную кнопку с выпадающим списком (меню) при помощи CSS.

Разделенная кнопка с выпадающим меню

Наведите курсор мышки на иконку стрелки, чтобы открыть выпадающее меню:

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

Шаг 1) Добавляем HTML:

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

Объяснение примера

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

Если ваш веб-сайт не ограничивается одной веб-страницей, то стоит подумать о добавлении панели навигации (меню). Меню - раздел веб-сайта, предназначенный помогать посетителю перемещаться по сайту. Любое меню представляет собой список ссылок, ведущих на внутренние страницы сайта. Самым простым способом добавить панель навигации на сайт является создание меню с помощью CSS и HTML.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Tilda анонсировала новый блок меню ME606, который мне сразу напомнил навигацию сайта Skillbox. Есть одно отличие- данный блок показан всегда, а его "Оригинал" показывается при клике на кнопку.

Данную статью я разобью на несколько частей, в каждой из которых будет показаны разные варианты исполнения данного меню, с применением нового блока меню ME606 и Zero block, а так же из 2-х Zero block. Блок будет показываться и скрываться при клике на кнопку. В этом нам поможет скрипт из одной из прошлых статей "Скрываем и показываем блоки по клику в Tilda".

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

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

И вот возникает дилемма: для обычных компьютеров удобным было бы описанное выше выпадающее меню (кстати, меню такого типа очень широко применяются вебмастерами на практике). Тогда как на мобильном устройстве оно попросту не сработает, т.е. пользователь не сможет открыть выпадающий список и пройтись по пунктам меню. Т.е., по сути, желательно, чтобы на сайте были реализованы обе технологии для ОДНОГО И ТОГО ЖЕ МЕНЮ. Как же быть?

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

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

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

Дело в том, что кнопка "Полезная информация" (точнее, блок, соответствующий ей) находится внутри блока, для которого задан обработчик события
onclick = "closeMenu('menu_polezn_inf');return(true)" ,
предназначенный для скрытия всплывающего меню при клике на основной области страницы. Т.е. вначале срабатывает событие onClick=openMenu для кнопки "Полезная информация", а затем - событие onClick=closeMenu для основной области: ведь кнопка-то размещена внутри нее. Поэтому для корректной работы меню следует или разместить его ВНЕ основной области страницы (например, слева или справа), или же реализовать перехват событие OnClick: т.е. чтобы при нажатии на кнопку "Полезная информация" срабатывал только обработчик для нее, но не для всех других блоков div, которые содержат эту кнопку (по отношению к которым она является вложенной).

Ссылка простого пункта выпадающего меню может иметь, например, такой вид:

Таким образом, при возникновении события нажатия на пункт меню функция openMenu() , считывая имя параметра id , выполняет функцию его раскрытия, после чего формируется раскрывающийся список.

Как видно, если элемент документа html (в данном случае элемент ul ), определяемый идентификатором id1 , отображается на экране (т.е. ему присвоено свойство display , равное "block" ), то функция openMenu() делает его неотображаемым, присваивая ему значение "none" .

В противоположном случае (т.е. если элемент не отображался) она присваивает ему значение "block" , после чего элемент становится виден на экране.

Функция openMenu11() вызывает отображение на экране элемента, имеющего идентификатор id1 , независимо от того, был ли он отображен на экране до этого или нет.

Кроме того, описана также функция closeMenu() . Она делает неотображаемым блок меню с идентификатором id2 , неважно, отображался ли он на экране до этого или нет.

В обеих функциях имеется свойство return(false) . Оно необходимо для того, чтобы предотвратить переход по ссылке после срабатывания события ( onclick или onmouseover ). Если бы тег, в котором приписывались указанные события, не был ссылкой ( … ), то return(false) можно было бы опустить.

Таким образом, при наведении указателя мыши на область пункта меню реализуется событие onmouseover и вызывается функция openMenu11() , а при нажатии на этот пункт меню реализуется событие onclick и вызывается функция openMenu() .

Обычный ПК (ноутбук)

Если пользователь работает на обычном ПК (или ноутбуке), то вначале реализуется событие onmouseover (ибо вначале мышь наводится на элемент, и только потом нажимается). Следовательно, как только указатель мыши попадет на область соответствующего меню, вначале будет вызвана функция openMenu11() , которая выполнит раскрытие списка меню. Этот список появится на экране. Пользователь сможет пройтись по списку, выбрать интересующий его пункт меню.

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

При повторном наведении мыши на пункт меню вновь сработает событие onmouseover , появится раскрывающийся список и т.д.

Мобильное устройство

Если же пользователь просматривает страницу сайта с мобильного устройства, то, в силу отсутствия возможности реализации события наведения мыши, onmouseover срабатывать не будет. Но при прикосновении к пункту меню будет реализовано событие onclick . В результате сработает функция openMenu() , которая откроет раскрывающийся список (как это делается – см. выше). Повторное нажатие на пункт меню, как и при просмотре с обычного компьютера, скроет этот список.

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

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

class = "классы" onclick = "closeMenu('menu_polezn_inf');return(true)" >

В качестве классов в блоке div задаются правила оформления соответствующей части страницы (той, которая содержится в этом блоке). Кроме того, в описании блока содержится обработчик уже известного нам события onclick , которое в данном случае вызывает функцию closeMenu() . Эта функция скрывает список меню, устанавливая его стиль display равным "none" вне зависимости от текущего его значения.

JS скрипт onclick = "closeMenu('menu_polezn_inf');return(true)" следует разместить в том теге, при нажатии на котором будет скрываться раскрывающийся список. Например, это может быть блок div , содержащий в себе весь контент страницы или даже тег .

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

Свойство return(true) необходимо для того, чтобы ВСЕ ссылки, содержащиеся в блоке, в котором прописан указанный JS скрипт, были активны.

Как уже говорилось, если вместо true установить false , в случае, если в браузере поддерживаются JS-скрипты, ссылки активны не будут, т.е. нажатие на них не приведет по переходу по указанным в них URL. Так, если прописать указанный JS-скрипт в теге div , содержащем в себе все остальные блоки и иной контент, ни одна из ссылок, имеющихся на странице, не будет активной. Именно поэтому необходимо свойство true . Кстати, вот этот момент как-то неявно описан в источниках, которыми нам довелось пользоваться при разработке описанной выше технологии.

Итак, если устанавливаем свойство true , то при поддержке javascript будут активны и ссылка, и сам скрипт (если же поддержка отключена, то активной будет только ссылка; скрипт, естественно, работать не будет). Тогда как свойство false сделает ссылку неактивной при включенной поддержке javascript; она станет активной только в случае, если скрипты отключить, как показано на приведенной схеме.

Вывод

Таким образом, Вы ознакомились с универсальным вертикальным всплывающим меню. Которое, впрочем, имеет недостаток: при повторном нажатии на основную кнопку ("Полезная информация") меню не раскрывается, приходится отводить мышь и подводить вновь. Недостаток вызван, как уже говорилось, тем фактом, что основная кнопка находится внутри блока div, при клике на котором вызывается функция closeMenu. Т.е. вначале срабатывает openMenu, а затем сразу же closeMenu. Естественно, поэтому меню и не появляется вновь. Однако, если реализовать простой перехватчик события onClick, то указанный недостаток исчезнет.

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

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