Кнопка три полоски css

Кнопка бургер меню для мобильного меню на чистом CSS

Здесь мы прописываем только один блок для кнопки, для примера я создал элемент с классом hamburger . Полоски будут создаваться в помощью стилей, мы будет создавать вторую и третью полоски через свойства border-bottom и border-top , а центральная полоска будет создаваться через псевдоэлемент before .

CSS

CSS код тоже простой. Здесь для понимания я все расписал.

.hamburger < position: relative; display: block; width: 50px; height: 25px; margin: 20px auto; border-top: 5px solid #fff; border-bottom: 5px solid #fff; >.hamburger:before

Ещё один вариант кнопки

.hamburger < position: relative display: flex flex-direction: column row-gap: 5px width: 50px height: fit-content margin: 20px auto >.hamburger hr < width: 100% height: 5px border: none background: #fff margin: 0 0 0 auto >.hamburger hr.line2 < width: 63% >.hamburger hr.line3

На этом всё!
Больше интересных статей в нашей группе — https://vk.com/progtime
Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи — https://vk.com/prog_time
Так же прокачивайте свои навыки на нашем канале — https://www.youtube.com/c/ProgTime

• Написание материала для курса по разработке ботов на Telegram
• Разработка универсального парсера на PHP

Каждый переведённый донат, мотивирует на создание новых записей и уроков на YouTube

Источник

Способы создания navicon

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

Существует несколько способов создания такой иконки. Ниже представлены несколько.

Растровая картинка

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

Twitter Bootstrap

Этот незаменимый CSS-фреймворк может помочь и с созданием navicon для сайта, такая иконка уже есть в стандартной сборке:

Иконочный шрифт

Существуют иконочные шрифты, в которые включена иконка navicon. Вот некоторые из них: Font Awesome и EnTypo. Предназначены они для обозначения совсем других вещей (например списков), но выглядят именно как navicon. Кроме того можно использовать такие инструменты, как IcoMoon для создания собственного иконочного шрифта.

Trigram For Heaven

Существует unicode-символ, выглядящий в точности как navicon, он называется «Trigram For Heaven». Вот он:

И вызывается так: #9776; (перед # необходимо поставить &).
Если правильно подобрать шрифт, то может получиться очень симпатичный navicon.

CSS

Navicon можно сделать и на чистом CSS, способы Tim Kadlec и Stu Robson.

SVG

Еще один способ — это использование SVG. Для кроссбраузерности можно использовать Modernizr:

Полезно почитать

Источник

Hamburger Menu Icons (Three Line Menu Icon / Navicon) Different Ways

A universal symbol for “menu” has been on a lot of people’s minds lately. (“Navicon”, get it?!). Jordan Moore wrote up a big article on it for Smashing Magazine. Jeremy Keith wrote about it. Stuart Robson wrote about it. Tim Kadlec wrote about it. If you want to read more about the thinking behind this stuff and see examples, read those. In this article, I’m going to focus on the “three-line” symbol (as opposed to down arrows or other possible navicons). I quite like the three-line symbol as a symbol to represent menus. If we have to pick one, I’m all for this one. We’re going to look at the “how” to create this symbol in a bunch of different ways.

How have we put symbols onto websites for… ever? Images. There is nothing wrong with this. This image is so simple it begs for SVG. SVG means it’s 1) super small file size and 2) can scale to any size crisply. The HTML would probably be:

If you are going to use the symbol unaccompanied by text, make sure to include the alt text. You could use a PNG or whatever also, but SVG is perfect for this kind of simple drawing.

There is nothing wrong with using an element, but if we use a pseudo-element and some trickery, we could make this symbol without the extra HTTP request that an image requires. (Yeah, it could be in your sprite, but you know what I mean).

In CSS, make some space on the left of the link with some padding-left . Set the positioning context with relative positioning. Then make a single black line absolutely positioned into that space on the top left. Then using box-shadow , make two more lines beneath it.

.box-shadow-menu < position: relative; padding-left: 1.25em; >.box-shadow-menu:before

Same markup as the one above. The same idea of creating a space for the pseudo-element to go. Only this time, use gradients to create the three lines. Remember gradients don’t actually need to fade color from one to another if you use “hard stops” where the color changes to another instantly at the same color-stop.

.gradient-menu < padding-left: 1.25em; position: relative; >.gradient-menu:before

Credit to Mr. Robson on this one. He created it by applying a double and a single solid border to the pseudo-element. He also used pixel values in his demo. Tim Kadlec converted them to ems so they scale with text which is nice.

.border-menu < position: relative; padding-left: 1.25em; >.border-menu:before

You would think that would be perfect, but in reality, it ends up quite blurry. Looks OK on my retina display but pretty bad on non-retina. This kind of thing should be as crisp as can be anywhere. You could always use an icon font as well. Entypo has this symbol in their free set. The lines are rounded, which looks good to me. Pictos has one with dot-line dot-line dot-line which is also good. I haven’t had too much trouble with icon fonts being blurry like that Unicode icon is. I have no clue why that it, but c’est la vie. Update: reader G S writes in:

Regarding the article https://css-tricks.com/three-line-menu-navicon/, an older Nokia phone with Opera 12 is able to display the unicode character for ‘IDENTICAL TO’ (U+2261), but not the TRIGRAM FOR HEAVEN’ (U+2630). It would seem that a mathematical operator is more likely to be implemented in fonts than an iChing symbol.

I’d probably avoid the Unicode symbol as it doesn’t have the correct semantic meaning. I’d probably avoid making an HTTP request for an image just for this. The gradient thing is nice, but it’s a good size chunk of code to maintain. I’d probably go for inline SVG.

Источник

Как создать бургер меню с выезжающей панелью на чистом CSS

Сегодня будет простенькая статья о том как сделать простое выезжающее меню без использования скриптов, то есть на чистом html + CSS. Данный урок будет полезен тем, кто верстает простые макеты, хочет создать свой сайт и изучает верстку. Конечно же, подойдет и мастерам, что создают темы на WordPress. Материал интересный и отлично подойдет для создания простых меню или меню для мобильных устройств, то бишь которое появляется на адаптивных страницах.

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

Первое что понадобится — добавить html разметку. Это обычное меню сделанное списком, но его особенность это checkbox. Обычный чекбокс с label, которые мы и превратим в кнопку, то есть бургер меню. Бургер меню — это обычно три полоски расположены друг под другом, напоминая бургер. Поэтому меню и носит такое название. Для посетителей сайтов и пользователей мобильных устройств данный вид кнопки привычный и люди интуитивно понимают что это кнопка меню. Как раз нажимая на наш чекбокс в виде бургера и будет происходить появление панели с пунктами меню.

В нужное вам место на сайте добавьте html следующий код:

Давайте я подробно распишу что и как тут устроено и для чего каждый элемент

• Сначала идет главный блок-контейнер с классомburger-menu, внутри которого и располагается наше меню и кнопка бургер. Можете задавать любой класс или вообще изъять все меню и кнопку из контейнера. Он не обязателен. Он сделан для удобства. Возможно вам он будет мешать. Например, вы решите разместить меню в виде UL списка в одном месте, а кнопку-чекбокс бургер меню в другом.
• Далее идет чекбокс с ID — menu-toggle, которое менять нельзя (можно, если вы понимаете что делает и аналогично смените в стилях CSS все подвязки к этому айди). Чекбокс будет скрываться но он и будет кнопкой, его мы модифицируем.
• Далее идет label с классом —menu-btn, менять тоже не нужно, если для вас это не критично. Внутри label расположен span элемент, который в будущем будет полосками бургер меню. Сделаем это благодаря псевдоэлементам before и after.
• После идет наше основное меню в виде ul списка с классом — menubox. Наш чекбокс, будет использовать данный класс, чтобы открыть панель. Тут как вам удобно, располагаете пункты вашего меню со ссылками. Классы, порядок, структуру — делаете как вам нравится, у меня просто сделано для примера пять простых пунктов в виде ссылок.

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

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

Задаем стили нашему label и span внутри него, чтобы он стал кнопкой в виде бургера.

.menu-btn < display: flex; align-items: center; position: absolute; top: 0; right:0; width: 26px; height: 26px; cursor: pointer; z-index: 1; >.menu-btn > span, .menu-btn > span::before, .menu-btn > span::after < display: block; position: absolute; width: 100%; height: 2px; background-color: #616161; transition-duration: .25s; >.menu-btn > span::before < content: ''; top: -8px; >.menu-btn > span::after < content: ''; top: 8px; >Далее задаем стили для нашего меню, то бишь ul списку. .menubox

left: -100%; — в шестой строке это и есть расположение панели меню слева за пределами страницы. Если надо справа, смените на right: -100%;.

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

.menu-item < display: block; padding: 12px 24px; color: #333; font-family: 'Roboto', sans-serif; font-size: 20px; font-weight: 600; text-decoration: none; transition-duration: .25s; >.menu-item:hover < background-color: #CFD8DC; >Теперь скрываем стандартный чекбокс в виде галочки #menu-toggle

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

#menu-toggle:checked ~ .menu-btn > span < transform: rotate(45deg); >#menu-toggle:checked ~ .menu-btn > span::before < top: 0; transform: rotate(0); >#menu-toggle:checked ~ .menu-btn > span::after < top: 0; transform: rotate(90deg); >#menu-toggle:checked ~ .menubox

В предпоследнем рядке, мы указываем, что панель появится слева в самом начале страницы — left: 0;. Если хотите справа, то просто смените на right: 0;.

Ну и весь код целиком, если вы не копировали по порядку, предыдущие отрезки.

.menu-btn < display: flex; align-items: center; position: absolute; top: 0; right:0; width: 26px; height: 26px; cursor: pointer; z-index: 1; >.menu-btn > span, .menu-btn > span::before, .menu-btn > span::after < display: block; position: absolute; width: 100%; height: 2px; background-color: #616161; transition-duration: .25s; >.menu-btn > span::before < content: ''; top: -8px; >.menu-btn > span::after < content: ''; top: 8px; >.menubox < display: block; position: fixed; visibility: hidden; top: 0; left: -100%; width: 300px; height: 100%; margin: 0; padding: 80px 0; list-style: none; background-color: #ECEFF1; box-shadow: 1px 0px 6px rgba(0, 0, 0, .2); transition-duration: .25s; >.menu-item < display: block; padding: 12px 24px; color: #333; font-family: 'Roboto', sans-serif; font-size: 20px; font-weight: 600; text-decoration: none; transition-duration: .25s; >.menu-item:hover < background-color: #CFD8DC; >#menu-toggle < opacity: 0; >#menu-toggle:checked ~ .menu-btn > span < transform: rotate(45deg); >#menu-toggle:checked ~ .menu-btn > span::before < top: 0; transform: rotate(0); >#menu-toggle:checked ~ .menu-btn > span::after < top: 0; transform: rotate(90deg); >#menu-toggle:checked ~ .menubox

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

На этом все, спасибо за внимание.

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

Промокод для скидки на сайте REG.RU
D0A2-CC4A-B2E4-BE02

Источник