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

в 7:58, , рубрики: css, адаптивный дизайн, веб-дизайн, Веб-разработка, метки:

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

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

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

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

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

Twitter Bootstrap

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

<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">  
    <span class="icon-bar"></span>  
    <span class="icon-bar"></span>  
    <span class="icon-bar"></span>  
</button> 

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

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

Trigram For Heaven

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

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

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

CSS

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

HTML-разметка:

<div id="nav-btn"></div>

CSS:

#lines{ 
    border-bottom: 17px double black; 
    border-top: 6px solid black; 
    content:"";
    height: 5px; 
    width:30px;
}

Результат на JSFiddle:

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

SVG

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

if (!Modernizr.svg) {
    $("#svg-icon").css("background-image", "url(fallback.png)");
}

Готовый SVG-файл иконки можно скачать, а пример посмотреть на codepen.io:

Автор: grokru

Источник


* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js