ZorNet.Ru — сайт для вебмастера » HTML и CSS » Значок меню гамбургера на чистом CSS

Значок меню гамбургера на чистом CSS

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

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

HTML

Код

<span class="namigazugtum"></span> Меню

CSS

Код

.namigazugtum {
  position: relative;
  display: inline-block;
  width: 1.24em;
  height: 0.8em;
  margin-right: 0.3em;
  border-top: 0.2em solid #fffbfb;
  border-bottom: 0.2em solid #fffcfc;
  text-shadow: 0 1px 0 #151414;
}

.namigazugtum:before {
  content: "";
  position: absolute;
  top: 0.3em;
  left: 0px;
  width: 100%;
  border-top: 0.2em solid #f7efef;
}

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

Демонстрация

07 Июня 2018 Просмотров: 3871 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 0