<header>
<div class="menu-links">
<ul class="toggle-menu">
<li class="toggle">
<span class="toggle-menu-bar"></span>
<span class="toggle-menu-bar"></span>
<span class="toggle-menu-bar"></span>
</li>
<li class="content" style="display: none;">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</li>
</ul>
</div>
</header>
@import url(https://fonts.googleapis.com/css?family=Ubuntu:400,500,700);
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
font-family: 'Ubuntu', sans-serif;
font-weight: bold;
}
body {
background-color: #e58139;
}
header {
background-color: #333;
width: 100%;
height: 65px;
}
.menu-links {
float: right;
padding-right: 20px;
}
.toggle-menu {
float: right;
}
.toggle-menu li {
display: block;
float: left;
list-style-type: none;
text-align: left;
}
.toggle {
padding-top: 5px;
cursor: pointer;
}
li.toggle:hover span.toggle-menu-bar {
background-color: #ddd;
}
.toggle-menu-bar {
display: block;
width: 25px;
height: 4px;
background-color: #e58139;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin: 0 auto 3px;
transition: background-color 0.2s;
}
a {
font-size: 25px;
text-decoration: none;
color: #e58139;
padding-right: 20px;
transition: color 0.2s;
}
a:hover {
color: #ddd;
}
jQuery(document).ready(function($){
$("li.content").hide();
$("ul.toggle-menu").delegate("li.toggle", "click", function() {
$(this).next().toggle("fast").siblings(".content").hide("fast");
});
});
This Pen doesn't use any external CSS resources.