How to create responsive menu

Hi,

Today, i we will show you How to create responsive menu. This article will give you simple example of How to create responsive menu. you will learn How to create responsive menu. So let’s follow few step to create example of How to create responsive menu.

<html>
<head>
	<title>How to create responsive menu - CodePlaners.com</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<style>
nav ul{
	padding: 2px;
	margin: 0px;
	position: absolute;
	background-color: #fff;
}
nav ul li{
	margin: 5px;
	float: left;
	list-style: none;
	line-height: 30px;
	position: relative;
	border: 1px solid #078EE5;
	background-color: #078EE5;
}
nav ul li:hover{
	margin: 5px;
	color: #078EE5;
	background-color: #fff;
	border: 1px solid #078EE5;
}
nav ul li:hover > a{
	color: #078EE5;
}
nav ul li a{
	color: #fff;
	padding: 10px;
	text-decoration: none;
}
.mobile-menu{
	background-color: red;
	position: relative;
	display: none;
}
.bars{
  width: 35px;
  height: 5px;
  background-color: #fff;
  margin: 3px 0;
}
@media (max-width: 640px) {
.mobile-menu{
	display: grid;
	background-color: #078EE5;
	color: #fff;
	padding: 5px 10px;
	cursor: pointer;
}
.mobile-menu img{
	width: 25px;
	top: 2px;
	right: 10px;
	position: absolute;
}
nav{
	position: relative;
	height: auto;
}
nav ul{
	display: none;
	list-style: none;
	padding: 0;
	margin: 0;
	width: 99%; 
	top: 0;
	position: absolute;
}
nav ul li{ 
	width: 92%;
	position: relative;
	padding: 5px;
	background-color: #078EE5;
	cursor: pointer;
}
}
</style>
<body>
	<div class="mobile-menu" id="mobile-menu"> 
		<span class="bars"></span>
        <span class="bars"></span>
        <span class="bars"></span>
	</div>
	<nav>
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">About us</a></li>
			<li><a href="#">Services</a></li>
			<li><a href="#">Conatct Us</a></li>
		</ul>
	</nav>
	<script type="text/javascript">
	$(function() {
        var pull = $('#mobile-menu');
        menu = $('nav ul');
        menuHeight = menu.height();
        $(pull).on('click', function(e) {
            e.preventDefault();
            menu.slideToggle();
        });
        $(window).resize(function() {
            var w = $(window).width();
            if (w > 320 && menu.is(':hidden')) {
                menu.removeAttr('style');
            }
        });
    });
	</script>
</body>
</html>

How to create responsive menu

Recommended Posts

Random Post