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> |
