CSS: Responsive Navigation Menu for Beginners

Posted on Apr 4, 2014
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;
	}
}

Leave a comment:

Thank you for your comment. After a while, our moderators will add it.
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

© Twiwoo 2020 Cookie Policy