Кнопка открыть закрыть html

Как при нажатии на кнопку открыть и закрыть меню

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

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

Стили по ситуации. Единственное что нужно, это скрыть меню .content .

А уже в JavaScript сделаем чтобы при нажатии на кнопку меню открывалось / закрывалось.

Должен быть подключен обязательно jQuery.

Затемнение заднего фона при открытом меню

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

Изменим JavaScript код. При клике на кнопку будем добавлять класс overlay для body.

Добавим стилей для затемнения.

Возможно придётся немного поиграться с z-index.

Закрытие меню при клике вне его

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

jQuery(($) => < // menu const menu = $(".content"); const menuBtn = $(".main-myButton"); $(document).mouseup(function (e) < console.log(e.target) if (e.target.className === "main-myButton") < menuBtn.addClass("is-active"); menu.stop().slideDown(); >else if (e.target.className === "main-myButton is-active") < menuBtn.removeClass("is-active"); menu.stop().slideUp(); >else if ((menu.has(e.target).length === 0) && (menuBtn.has(e.target).length === 0)) < // if ($(window).width() < 768) < menuBtn.removeClass("is-active"); menu.stop().slideUp(); // >> >); >);

1. Если меню закрыто — открыть его и добавить класс кнопке is-active.
2. Если меню открыто — закрыть его и удалить класс с кнопки is-active.
3. Если клик вне меню и кнопки открытия/закрытия меню — закрыть меню и удалить класс is-active.

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

Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.

Статьи из данной категории:

Источник

How to Create a Close Button in HTML CSS[With Examples]

Close buttons also called cancel buttons can be used to dismiss items on a website like menus, modals, and popups.

1. Close Button CSS 1: Times

You can make a close button using the times( × ) symbol.

2. Close Button CSS 2: Plus

You can also create a close button using the plus( + ) symbol.

You will need to rotate the plus sign so that it looks like a cancel button.

3. Close Button CSS 3

You can also use an SVG image of a cancel button for your close button.

4. Close Button CSS 4

You can also build a close button bulma style.

.navbar-burger < cursor: pointer; display: block; height: 3.25rem; position: relative; width: 3.25rem; >.navbar-burger span < background-color: currentColor; display: block; height: 1px; left: calc(50% - 8px); position: absolute; transform-origin: center; transition-duration: 86ms; transition-property: background-color,opacity,transform; transition-timing-function: ease-out; width: 16px; >.navbar-burger span:nth-child(1) < top: calc(50% - 6px); >.navbar-burger span:nth-child(2) < top: calc(50% - 1px); display: none; >.navbar-burger span:nth-child(3) < top: calc(50% + 4px); >.navbar-burger span:nth-child(1) < transform: translateY(5px) rotate(45deg); >.navbar-burger span:nth-child(3)

5. Close Button CSS 5: Before and After

You can also create a close button using Pseudo elements in CSS.

.close < position: absolute; right: 32px; top: 32px; width: 32px; height: 32px; opacity: 0.7; >.close:hover < opacity: 1; >.close:before, .close:after < position: absolute; left: 15px; content: ' '; height: 33px; width: 2px; background-color: #333; >.close:before < transform: rotate(45deg); >.close:after

6. Bootstrap Close Button

You can also create a close button on your website using Bootstrap.

Remember to import Bootstrap to your website before attempting to add the button.

Hi there! I am Avic Ndugu.

I have published 100+ blog posts on HTML, CSS, Javascript, React and other related topics. When I am not writing, I enjoy reading, hiking and listening to podcasts.

Front End Developer Newsletter

Receive a monthly Frontend Web Development newsletter.
Never any spam, easily unsubscribe any time.

Start understanding the whole web development field now

Stop all the confusion and start understanding how all the pieces of web development fit together.

Never any spam, easily unsubscribe any time.

About

If you are just starting out you can test the waters by attempting the project-based HTML tutorial for beginners that I made just for you.

Okay, you got me there, I made it because it was fun and I enjoy helping you on your learning journey as well.

You can also use the HTML and CSS projects list as a source of projects to build as you learn HTML, CSS and JavaScript.

Recent Posts

Источник

Как сделать кнопку в html css? Красивые кнопки для сайта с примерами

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

Итак из этой статьи вы узнаете:

• Для чего нужны кнопки и какие функции они выполняют
• Какие бывают кнопки и в чем их различия
• Как сделать кнопку в HTML
• Как сделать красивую кнопку в HTML и CSS

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

Для чего нужны кнопки на сайте?

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

Поэтому использовать кнопки надо “экономно”, в идеале не больше 1-2 в видимой области экрана. При этом пользователю должно быть максимально понятно, что произойдет, если он нажмет на кнопку.

Какие бывают кнопки?

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

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

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

В то же время атрибут href является невалидным для тега , поэтому его не стоит использовать в качестве кнопки-ссылки. Опять же, можно сделать кнопку ссылкой, придумав какие-нибудь “костыли” типа

Но зачем это нужно. Все гораздо проще и понятнее.

Как сделать кнопку в HTML?

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

Основными атрибутами таких кнопок являются:

type: button | submit | reset

Тип кнопки. Это необязательный параметр, и его можно пропустить. Если кнопка находится внутри формы и атрибут type отсутствует, браузер посчитает, что тип кнопки — submit и попытается отправить форму обработчику.

Несмотря на слухи, которые ходят в интернете, о том, что тег должен располагаться только внутри тегов , на самом деле это не так 🙂 Если вдруг по какой-то причине Вам нужно или хочется поместить свою кнопку вне формы, которую она должна отправлять/сбрасывать/еще-что-то-делать, просто используйте атрибут form со значением соответствующим атрибуту id этой формы.

Кроме того, у тега button могут быть следующие атрибуты:

• autofocus — Автоматически устанавливает фокус браузера на кнопке при загрузке страницы
• disabled — Кнопка заблокирована и нажатие на нее не выполняет никаких действий
• formaction (только для типа submit) — адрес обработчика формы, на который отправляются данные из формы
• formenctype (только для типа submit) — Тип отправляемых данных. Может быть application/x-www-form-urlencoded , multipart/form-data , text/plain
• formmethod (только для типа submit) — HTTP-метод, при помощи которого пересылаются данные. Может быть get или post
• formnovalidate (только для типа submit) — Отключает автоматическую валидацию введенных данных
• formtarget (только для типа submit) — Указывает на то, как выводится результат обработки формы. Может быть _blank , _self , _parent , _top или значение атрибута name фрейма
• name — Имя кнопки (можно использовать если, например, в форме есть несколько кнопок, которые ее отправляют, и обработчику нужно знать, какая из них нажата)
• value — Значение кнопки (смысл примерно тот же, что и с name)

Как сделать красивую кнопку в HTML и CSS?

У каждого из нас свое представление о красоте: кто-то считает красивым закат на берегу моря, а кто-то — Ниссан Жук. О вкусах, как говорится, не спорят.

В моем представлении красивая кнопка — это кнопка, которая обладает следующими качествами:

Является интерактивной (т.е. реагирует на взаимодействие с ней пользователем). Отличительной чертой кнопок, является то, что их можно нажимать, следовательно у кнопки должно быть несколько состояний: дефолтное (состояние «покоя»), нажатое и «ховер» (при наведение курсора)

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

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

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

Если вы хотите узнать как сделать кнопку объемной или с эффектом «стекляшечности», как сделать картинку кнопкой и т.д. — почитайте статьи по дизайну интерфейсов за 2005-2009 гг. 🙂

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

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

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

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css'); @import url('https://fonts.googleapis.com/css?family=Roboto');

.button < /* Сбрасываем дефолтные стили */ border: none; outline: none; display: inline-block; text-align: center; text-decoration: none; cursor: pointer; font-size: 16px; /* Можно также использовать любые встроенные и кастомные шрифты, например, отсюда */ font-family: Roboto, Verdana, Tahoma, sans; /* Тут можно поэкспериментировать */ padding: 12px 16px; border-radius: 100px; color: #fff; >.button i < margin-right: 4px; >.button + .button < margin-left: 6px; >.button.blue < background: #2196F3; >.button.purple

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

.button:hover < box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); >.button:hover.blue < background: #39a1f4; >.button:hover.purple < background: #a66bbe; >.button:active < box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); >.button:active.blue < background: #0d8aee; >.button:active.purple

Вот и все! Две симпатичные кнопки готовы.

При наличии желания и времени можно их дополнить плавными анимированными переходами. Вот несколько примеров:

А теперь обещанный бонус для тех кто дочитал этот пост до конца.

Красивая анимированная кнопка наверх для сайта

#scroll-top < position: fixed; bottom: 48px; right: 48px; >#scroll-top button < position: relative; overflow: hidden; height: 48px; width: 48px; border: none; outline: none; cursor: pointer; color: rgba(0, 0, 0, 0.3); font-size: 16px; background: #21c984; transition: width 0.5s; border-radius: 100px; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); >#scroll-top button span < display: inline-block; transition: opacity 0.3s ease 0s, transform 0.5s ease 0s; line-height: 48px; font-size: 20px; width: 100%; >#scroll-top button span::before < width: 100%; position: absolute; left: 0px; top: 200%; opacity: 0; content: attr(data-hover); -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); color: #fff; font-size: 16px; text-transform: uppercase; >#scroll-top:hover button < width: 120px; background: #9b59b6; >#scroll-top:hover button span < -webkit-transform: translateY(-200%); -moz-transform: translateY(-200%); transform: translateY(-200%); >#scroll-top:hover button span:before < opacity: 1; >#scroll-top button:active

jQuery(document).ready(function($) < $("#scroll-top >button").on("click", function(e) < var body = $("html, body"); body.stop().animate(< scrollTop: 0 >, 500, "swing"); >); >);

В итоге должно получиться что-то похожее на это 😉

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

Источник