Как сделать иконку меню на CSS

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

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

Наш HTML:

<div id="mobile_nav_icon"></div>

Пишем CSS для иконки мобильного меню:

#mobile_nav_icon {
  border-bottom: 10px double #888;
  border-top: 3px solid #888;
  cursor: pointer;
  float: left;
  height: 4px;
  margin-left: 5px;
  margin-top: 5px;
  padding-top: 4px;
  transition: all 0.2s ease 0s;
  width: 25px;
}

Мы используем 2 свойства border, причем одно из них в значении double.
Теперь вы знаете как при помощи стилей очень просто можно сделать иконку меню для мобильной версии вашего сайта не прибегая к изображениям.

Пример того, как будет выглядеть иконка мобильного меню на чистом CSS можно увидеть чуть ниже:

автор: Dmitriy

З 2011 року займаюся веб-розробкою. Зараз я – PHP Full Stack Developer.
Обговорити ваш проект, а також дізнатися більше про мене ви можете на цьому сайті:
dev.forwww.com

Email: dmitriyribka@gmail.com

Залишити відповідь