responsive menu Archives - Codeplaners https://codeplaners.com/tag/responsive-menu/ Code Solution Tue, 18 May 2021 09:45:37 +0000 en-US hourly 1 https://wordpress.org/?v=6.1.7 https://codeplaners.com/wp-content/uploads/2020/09/cropped-favicon-social-32x32.png responsive menu Archives - Codeplaners https://codeplaners.com/tag/responsive-menu/ 32 32 How to create responsive menu https://codeplaners.com/how-to-create-responsive-menu/ https://codeplaners.com/how-to-create-responsive-menu/#respond Tue, 18 May 2021 09:45:37 +0000 https://codeplaners.com/?p=723 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.

The post How to create responsive menu appeared first on Codeplaners.

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

The post How to create responsive menu appeared first on Codeplaners.

]]> https://codeplaners.com/how-to-create-responsive-menu/feed/ 0