CSS: Responsive Navigation Menu for Beginners

Posted on
This very easy jQuery-based Responsive Navigation Menu.

HTML and jQuery code

<html> <head> <title>Responsive Navigation Menu for Beginners</title> <link rel="stylesheet" href="index.css" /> </head> <body> <ul id="navigation"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript"> $("#navigation").addClass("set").before('<div id="menu">Menu</div>'); $("#menu").click(function(){ $("#navigation").toggle(); }); $(window).resize(function(){ if(window.innerWidth > 700) { $("#navigation").removeAttr("style"); } }); </script> </body> </html>

CSS

* { margin: 0; padding: 0; font-family:Arial; } ul { width:100%; } li { list-style-type: none; width:33%; float:left; border-right: 2px solid #fff; } li:last-child { border-right:none; } li a { display: block; background:#d7e3f3; padding:10px; font-size:20px; text-decoration: none; color:#232323; transition: all 0.25s linear; } li a:hover { color:#fff; background:#4776ba; } @media screen and (max-width: 700px) { #menu { width:70px; height:35px; display: block; background:#ddd; font-size:18px; text-align: center; padding-top:10px; } #menu:hover { background:#ed770e; cursor:pointer; color:#fff; } #navigation.set { display: none; } ul { width:100%; } li { width:100%; border-right:none; } } @media screen and (min-width: 700px) { #menu { display: none; } }
Free Hit Counters