July 30, 2013 at 11:58Ways to create navicon
- Tutorial
Navicon is an icon for the menu that appears on responsive sites when viewed on mobile devices. Usually represents three horizontal strips. An example can be seen on many sites, for example:
There are several ways to create such an icon. Below are a few.
Of course, this is the easiest way - just draw three stripes in any graphics editor and set it as a button. But such a solution has an obvious drawback of bitmap images - this is a deterioration in quality when scaling.
This indispensable CSS-framework can help with the creation of navicon for the site, such an icon is already in the standard assembly:
There are icon fonts that include the navicon icon. Here are some of them: Font Awesome and EnTypo . They are intended to indicate completely different things (for example, lists), but they look exactly like navicon. In addition, you can use tools such as IcoMoon to create your own icon font.
There is a unicode character that looks exactly like a navicon, it is called " Trigram For Heaven ". There he is:
And it is called like this: # 9776; (before # you must put & ).
If you choose the right font, you can get a very nice navicon.
Navicon can be done with pure CSS, Tim Kadlec and Stu Robson methods .
HTML markup:
CSS:
Result on JSFiddle :
Another way is to use SVG. For cross-browser compatibility, you can use Modernizr :
You can download the finished SVG file for the icon , and see the example on codepen.io for an example :
There are several ways to create such an icon. Below are a few.
Bitmap picture
Of course, this is the easiest way - just draw three stripes in any graphics editor and set it as a button. But such a solution has an obvious drawback of bitmap images - this is a deterioration in quality when scaling.
Twitter bootstrap
This indispensable CSS-framework can help with the creation of navicon for the site, such an icon is already in the standard assembly:
Icon Font
There are icon fonts that include the navicon icon. Here are some of them: Font Awesome and EnTypo . They are intended to indicate completely different things (for example, lists), but they look exactly like navicon. In addition, you can use tools such as IcoMoon to create your own icon font.
Trigram For Heaven
There is a unicode character that looks exactly like a navicon, it is called " Trigram For Heaven ". There he is:
☰
And it is called like this: # 9776; (before # you must put & ).
If you choose the right font, you can get a very nice navicon.
CSS
Navicon can be done with pure CSS, Tim Kadlec and Stu Robson methods .
HTML markup:
CSS:
#lines{
border-bottom: 17px double black;
border-top: 6px solid black;
content:"";
height: 5px;
width:30px;
}
Result on JSFiddle :
Svg
Another way is to use SVG. For cross-browser compatibility, you can use Modernizr :
if (!Modernizr.svg) {
$("#svg-icon").css("background-image", "url(fallback.png)");
}
You can download the finished SVG file for the icon , and see the example on codepen.io for an example :