This is a CSS3 file for responsive menu for your website. It changes it's behaviour accordingly to screen resolution.
You need to add <meta>
tag for viewport info:
<head>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
</head>
Make a reference to responsive-menu-bundle.min.css
inside your <head>>
tag
<head>
<link rel='stylesheet' href='css/responsive-menu-bundle.min.css'>
</head>
I also suggest using FontAwesome icons
<head>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
</head>
Next step is to create a menu.
<div class='r-menu r-menu-light'>
<div class='r-menu-panel'>
<span class='fa fa-navicon' onclick='toggleMenu(this.parentNode.parentNode)'></span>
</div>
<ul class='r-menu-list'>
<li><a href='#'>Link 1</a></li>
<li><a href='#'>Link 2</a></li>
<li><a href='#'>Link 3</a></li>
<li><a href='#'>Link 4</a></li>
</ul>
</div>
The last step is to create a function that will toggle the menu on small screens. Since it's only a CSS base, I didn't want to enforce a method.
This is an example that works in all browsers, IE10 and newer:
function toggleMenu(elem) {
var ul = elem.querySelector('.r-menu-list');
if(ul.classList.toggle) { // less work for browser which support toggle
ul.classList.toggle('slide-down');
} else { // IE workaround...
if(ul.classList.contains('slide-down')) {
ul.classList.remove('slide-down');
} else {
ul.classList.add('slide-down');
}
}
}
See demo.htm
for a reference
.r-menu
- this is a class that the main container should have.r-menu-list
- this is the<ul>
tag of menu.r-menu-panel
- you need this, mobile gets bugged without it.r-menu-[theme name]
- this class sets a theme for menu. See Theming for more
This CSS uses 480px as a barrier for behaviour of menu. When resolution is lower than 480px there will be a "hamburger" which toggles the menu list. If the resolution is higher than 480px it will behave in a standard way.
Edit $break
variable in source files inside src
or edit compiled *.css
inside dist
if you want to change it.
You can choose a theme for menu. There are currently four themes:
- light
- dark
- blue
- red
r-menu.css
is a base, without colors. Each theme has a
separate file with proper name (for ex.r-menu-dark.css
).
If you want to use a theme, you have to add a reference to proper file inside your <head>
You can also use r-menu-bundle.css
which contains the base skeleton and all themes.
To apply a theme on menu, you have to add a corresponding class:
<div class='r-menu r-menu-dark'>
...
</div>