Simple Responsive Menu
///////////////
// base style
///////////////
body {
margin: 0;
font-family: avenir, 'avenir next', helvetica, arial, sans-serif;
}
a {
text-decoration: none;
}
///////////////
// region style
///////////////
.navigation {
background: cyan;
height: 60px;
line-height: 60px;
}
///////////////
// menu style
///////////////
.navigation {
h2 {
display: none;
position: relative;
margin: 0;
padding: 0 20px;
cursor: pointer;
&:after {
position: absolute;
top: 0;
right: 20px;
content: "\2630";
}
}
a {
display: block;
padding: 0 10px;
color: #000;
line-height: 40px;
&:hover {
background: magenta;
}
}
ul {
margin: 0;
padding: 0;
text-align: center;
li {
display: inline-block;
vertical-align: middle;
zoom: 1;
*display: inline;
}
}
@media (max-width: 768px) {
h2 {
display: block;
}
a {
padding: 0 20px;
}
ul {
display: none;
width: 100%;
li {
display: block;
// text-align: left;
background: cyan;
border-bottom: solid 1px magenta;
&.last {
border-bottom: none;
}
}
}
}
}
$(function() {
$('.navigation h2') .click(function() {
$('.navigation ul').slideToggle();
});
});
<div class="navigation">
<nav class="block-menu">
<h2>Menu</h2>
<ul class="menu">
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
</ul>
</nav>
</div>