Mostly a boilerplate one-level responsive menu
A Pen by Juan Alvarado on CodePen.
<header class="the-header clearfix"> | |
<div class="logo"><h1>CoolLogoDude</h1></div> | |
<a href="#" class="resToggle">☰</a> | |
<nav class="the-nav"> | |
<ul> | |
<li><a href="#">Apples</a></li> | |
<li><a href="#">Oranges</a></li> | |
<li><a href="#">Pears</a></li> | |
<li><a href="#">Strawberries</a></li> | |
<li><a href="#">Kiwis</a></li> | |
<li><a href="#">Grapes</a></li> | |
</ul> | |
</nav> | |
</header> | |
<br /> | |
<h2 class="align-center" >→ Go ahead and resize me! ←</h2> |
$('.resToggle').click(function(){ | |
$('.the-nav').toggleClass('active'); | |
}); |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
*, *:after, *:before { | |
box-sizing: border-box; | |
} | |
.clearfix:after { | |
content: ""; | |
display: table; | |
clear: both; | |
} | |
ul{ | |
margin: 0; | |
padding: 0; | |
} | |
.the-header { | |
background: #fa5a62; | |
.logo { | |
display: inline-block; | |
color: white; | |
float: left; | |
padding: 0 10px; | |
} | |
a { | |
color: white; text-decoration: none; | |
} | |
} | |
a.resToggle { display: none;} | |
.the-nav { | |
display: inline-block; | |
float: right; | |
li { | |
display: inline-block; | |
a { | |
display: block; | |
padding: 30px 15px; | |
} | |
&:hover a{ | |
background: #fc414e; | |
} | |
} | |
} | |
@media screen and (max-width: 768px) { | |
a.resToggle { | |
display: inline-block; | |
float: right; | |
padding: 30px; | |
&:hover { | |
background: #fc414e; | |
} | |
} | |
.the-nav { | |
display: none; | |
width: 100%; | |
&.active { | |
display: block; | |
} | |
li { | |
display: block; | |
border-bottom: 1px solid lighten(#fa444d, 10%); | |
a { | |
padding: 15px 10px; | |
} | |
} | |
} | |
} | |
.align-center { | |
text-align: center; | |
} |