PHP TUTORIALS

Sunday 15 February 2015

Responsive Navigation HTML5 AND CSS3

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Responsive Navigation HTML5 AND CSS3</title>
<style type="text/css">
*{
margin:0;
padding:0;

}
#brand{
font-family:Verdana, Geneva, sans-serif;
font-size:30px;
line-height:50px;
float:left;

}
nav{
background:#666;
width:100%;
text-align:center;

}
nav ul{float:right;line-height:50px;}
nav li{
list-style-type::none;
display:inline;
}
nav a{
text-decoration:none;
color:#CCC;
padding:10px;
font-family:Verdana, Geneva, sans-serif;
}
nav a:hover{color:#333;}
@media screen and (max-width:768px){

#brand{margin-top:-50px;}
nav{}
nav ul{float:none; margin-top:50px;background:#F03;}
nav li{display:inline;}
nav a{color:#ccc;}
nav a:hover{color:#ffffff;}

}

@media screen and (max-width:480px){

#brand{width:100%; text-align:center;}
nav{}
nav ul{float:none; margin-top:50px;background:#F03;}
nav li{display:inline;}
nav a{color:#ccc; display:block; border-bottom:1px dotted #ccc; margin:0; padding:3px;}
nav a:hover{color:#ffffff;}

}
</style>
</head>
<body>
<div id="brand">Responsive Navigation</div>
<nav>
<ul>
<a href="#"><li>HOME</li></a>
<a href="#"><li>ABOUT US</li></a>
<a href="#"><li>BLOG</li></a>
<a href="#"><li>PORTFOLIO</li></a>
<a href="#"><li>CONTACT US</li></a>
<a href="#"><li>CONTACT US</li></a>
</ul>
</nav>

</body>
</html>