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

Создать значок меню на чистом CSS

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

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

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

HTML

Код
<span class="damirunesa"></span> Menu zornet.ru

CSS

Код
.damirunesa{
  position: relative;
  display: inline-block;
  width: 1.25em;
  height: 0.8em;
  margin-right: 0.3em;
  border-top: 0.2em solid #0000cc;
  border-bottom: 0.2em solid #0000cc;
}

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

Как вы можете видеть, здесь используется em вместо px чтобы нарисованное меню было масштабируемо относительно размера шрифта. После того как установлен CSS, остается поместить по месту HTML фрагмент, где в стилях у вас будет возможность выставить оттенок цвета.

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

Демонстрация:
21 Декабря 2017 Просмотров: 3075 Комментариев: (1)
Поделиться в социальных сетях

Материал разместил
Kosten
Похожие материалы

Оставь свой отзыв

Комментарии: 1
Kosten
Kosten 05 Января 2018 18:501
0
Рассмотрим второй вариант, где идет кнопка, что аналогично создана на стилях.

Создание кнопки мобильного меню очень просто, используя CSS3. Вы можете найти других, которые все еще используют изображение для создания трех горизонтальных линий. С введением атрибутов after и before css3 это меню можно легко сделать указав содержимое позиции объекта и добавив атрибут контента. Следующее, что вам нужно сделать, это показать границы сверху и снизу чтобы достичь этого.

Прежде чем мы начнем писать код cssбыло бы неплохо понять, что означает атрибут: after: before и content. Атрибут: after означает, что вы хотите добавить что-то после окончания указанного элемента. Хотя атрибут: before означает что вы хотите добавить что-то до начала элемента. Самым атрибутом контента является то, что вы хотите добавить некоторый контент к указанному объекту.

HTML

Код
<div id='rmilasron_dasun'></div>

CSS

Код
#rmilasron_dasun{
   cursor:pointer;
   display:inline-block;
}

#rmilasron_dasun::after {
   display: block;
   content: '';
   height: 4px;
   width: 25px;
   border-top: 3px solid #fc0101;
   border-bottom: 3px solid #fc0101;
}

#rmilasron_dasun::before {
   display: block;
   content: '';
   height: 4px;
   width: 25px;
   border-top: 3px solid #fc0101;
}

Демонстрация:
Войдите:
avatar