Preview

View/Download
Notes
Based on Float – Horizontal Full
This example navigation includes:
- CSS reset
- Fully Responsive
- Built with Mobile First
- Built with SASS (SCSS)
- Built with
box-sizing: content-box
If you want the SASS (SCSS) files used to create the example download the example from GitHub (link above). I used css and not SASS (SCSS) for the CodePen examples to be more useful to more people.
- HTML
- CSS
- JS
<!-- HTML5 -->
<header>
<nav>
<ul>
<li class="logo"><a href="#"><img src="img/logo.png" alt="" /></a></li>
<li><a href="#">Link 1 ▼</a>
<ul>
<li><a href="#">Sub Link 1</a></li>
<li><a href="#">Sub Link 2</a></li>
<li><a href="#">Sub Link 3</a></li>
<li><a href="#">Sub Link 4</a></li>
<li><a href="#">Sub Link 5</a></li>
</ul>
</li>
<li><a href="#">Link 2 ▼</a>
<ul>
<li><a href="#">Sub Link 1</a></li>
<li><a href="#">Sub Link 2</a></li>
<li><a href="#">Sub Link 3</a></li>
<li><a href="#">Sub Link 4</a></li>
<li><a href="#">Sub Link 5</a></li>
</ul>
</li>
<li><a href="#">Link 3 ▼</a>
<ul>
<li><a href="#">Sub Link 1</a></li>
<li><a href="#">Sub Link 2</a></li>
<li><a href="#">Sub Link 3</a></li>
<li><a href="#">Sub Link 4</a></li>
<li><a href="#">Sub Link 5</a></li>
</ul>
</li>
<li><a href="#">Link 4 ▼</a>
<ul>
<li><a href="#">Sub Link 1</a></li>
<li><a href="#">Sub Link 2</a></li>
<li><a href="#">Sub Link 3</a></li>
<li><a href="#">Sub Link 4</a></li>
<li><a href="#">Sub Link 5</a></li>
</ul>
</li>
<li class="logo-moblie"><a href="#"><img src="img/logo.png" alt="" /></a></li>
<li class="nav-small"><a href="#"><img src="img/navimg.png" alt="" /></a></li>
</ul>
</nav>
</header>
<div class="containter">
<article>
<p>Your main content goes in here</p>
</article>
<footer>
<p>Your footer content goes in here</p>
</footer>
</div>
/* Includes CSS Reset */
li.logo a:link, li.logo a:visited,
li.nav-small a:link, li.nav-small a:visited {
padding: 0;
width: 100%;
text-align: right;
}
li.logo-moblie a:link, li.logo-moblie a:visited {
text-align: left;
}
li.logo-moblie a:link, li.logo-moblie a:visited {
width: 87%;
padding: 0 6.5%;
float: left;
}
li.logo a:hover, li.logo a:active, li.logo a:focus,
li.nav-small a:hover, li.nav-small a:active, li.nav-small a:focus,
li.logo-moblie a:hover, li.logo-moblie a:active, li.logo-moblie a:focus {
color: #00ff16;
background: none;
}
.logo img, li.logo-moblie img {
width: 100%;
max-width: 70px;
}
.logo {
display: none;
}
.nav-small img {
height: 50px;
width: 50px;
}
.nav-small a {
float: left;
}
.logo-moblie, .nav-small {
width: 50%;
}
.logo-moblie:hover, .nav-small:hover, .logo:hover {
background: none;
}
header {
width: 100%;
background: white;
float: left;
border-bottom: 5px double #00ff16;
}
header nav {
width: 100%;
max-width: 1000px;
background: white;
margin: 0 auto;
-webkit-transition: all, 0.5s;
-moz-transition: all, 0.5s;
-ms-transition: all, 0.5s;
-o-transition: all, 0.5s;
transition: all, 0.5s;
}
header nav ul {
float: left;
width: 100%;
}
header nav ul li {
float: left;
width: 100%;
}
header nav ul li a:link, header nav ul li a:visited {
width: 94%;
display: block;
padding: 1.15em 3%;
text-align: center;
text-decoration: none;
color: #000;
font-family: "SourceSansProLight", helvetica, arial, sans-serif;
font-size: 1em;
-webkit-transition: color, background 0.25s;
-moz-transition: color, background 0.25s;
-ms-transition: color, background 0.25s;
-o-transition: color, background 0.25s;
transition: color, background 0.25s;
}
header nav ul li a:hover, header nav ul li a:active, header nav ul li a:focus {
color: #111;
background: #00ff16;
}
header nav ul li ul {
background: #ddd;
display: none;
}
header nav ul li:hover {
background: #00ff16;
}
header nav ul li:hover ul, header nav ul li:focus ul {
display: block;
}
.smallnavjs {
margin-top: -12.6em;
}
@media screen and (min-width: 540px) {
.smallnavjs {
margin-top: 0 !important;
}
li.nav-small {
display: none;
}
li.logo-moblie {
display: none;
}
.logo {
display: block;
width: 93.5%;
padding: 0 3.25%;
}
li.logo a:link, li.logo a:visited {
text-align: center;
}
header nav {
max-width: 1000px;
margin: 0 auto;
width: 100%;
}
header nav ul {
margin: 1em 0 0 0;
}
header nav ul li {
width: 25%;
position: relative;
}
header nav ul li ul {
position: absolute;
top: 2.3em;
}
header nav ul li ul li {
width: 100%;
}
}
@media screen and (min-width: 800px) {
.logo {
width: 20%;
padding: 0;
}
li.logo a:link, li.logo a:visited {
text-align: left;
}
header nav ul {
width: 93.5%;
margin: 0 3.25%;
}
header nav ul li {
width: 20%;
}
header nav ul li ul {
top: 3.3em;
margin: 0;
width: 100%;
}
}
// Latest Jquery 1.X.X
$(document).ready(function() {
$('header nav').addClass('smallnavjs');
$('.nav-small').click(function(){
$('header nav').toggleClass('smallnavjs');
});
});