<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Responsive Navigation</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<style>
/* general rules */
body, div, nav, ul, li, a{
font-family: Helvetica, Arial ,sans-serif;
font-size: 1em;
margin: 0;
padding: 0;
border: 0;
}
.navigation{
width: 100%;
height: auto;
background-color: #F0F0F0;
}
a{
text-decoration: none;
color: #222222;
}
ul{
list-style: none;
}
/* ----------- */
/* mobile first */
@media only screen{
nav{
height: 50px;
}
nav ul{
display: none;
}
nav ul li{
width: 100%;
display: inline-block;
text-align: left;
background-color: #CCCCCC;
padding: 10px 30px;
margin-bottom: 1px;
}
nav ul li a{
font-size: 0.875em;
letter-spacing: 1px;
display: block;
}
nav .nav-container{
width: 100%;
display: block;
cursor: pointer;
}
nav .nav-container #toggle{
position: relative;
line-height: 50px;
padding-left: 60px;
}
nav .nav-container #toggle:before{
content: "";
width: 25px;
height: 3px;
top: 0;
left: 30px;
position: absolute;
display: block;
background: #222222;
box-shadow: 0 0.4em 0 0 #222222, 0 0.8em 0 0 #222222;
}
}
/* ------------- */
/* tablet styles */
@media only screen and (min-width: 40.063em) and (max-width: 64em){
nav{
width: 100%;
margin: 0 auto;
}
nav ul{
margin-left: 30px;
display: block;
}
nav ul li{
width: auto;
background-color: transparent;
margin-bottom: 0;
padding: 0;
}
nav ul li a{
line-height: 50px;
margin-right: 20px;
}
nav ul li a:hover{
text-decoration: underline;
}
nav .nav-container{
display: none;
}
}
/* ------------- */
/* large screens */
@media only screen and (min-width: 64.0625em){
nav{
width: 960px;
margin: 0 auto;
}
nav ul{
display: block;
}
nav ul li{
width: auto;
background-color: transparent;
margin-bottom: 0;
padding: 0;
}
nav ul li a{
line-height: 50px;
margin-right: 20px;
}
nav ul li a:hover{
text-decoration: underline;
}
nav .nav-container{
display: none;
}
}
</style>
</head>
<body>
<div class="navigation">
<nav>
<div class="nav-container">
<a id="toggle" href="#">MENU</a>
</div>
<ul id="nav">
<li><a href="#">PROJECT</a></li>
<li><a href="#">TEAM</a></li>
<li><a href="#">PUBLICATIONS AND RESOURCES</a></li>
<li><a href="#">PARTNERS</a></li>
</ul>
</nav>
<script>
$(document).ready(function(){
var touch = $('#toggle');
var menu = $('#nav');
$(touch).on('click', function(e){
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function(){
var w =$(window).width();
if (w > 640 && menu.is(':hidden')){
menu.removeAttr('style');
}
});
});
</script>
</div>
</body>
</html>
website Responsive Navigation
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.