How to create responsive menu in html/PHP ?

Share Me
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Today now in this blog I will show you how to create a responsive menu in our html website. Here i will show you how to create a responsive menu by using css, html and jquery. Now here we have to also use media query. So it is a pretty simple to create a responsive menu. Now i will list two file one is html and then the second one is css file. This two file is make a simple responsive menu and also we can easy to change and also modification in this file. So it will easy to integrate also with php, .net or any framework.

Here we will know about how to create a responsive menu bar in html. Also we know responsive menu bar jquery example and responsive menu using css and jquery. And also we know about responsive menu with css, html, jquery responsive menu bar example.

index.html

<html>
<head>
	<title>Responsive Menu</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>
<body>
	<div class="mobile-menu" id="mobile-menu"> 
		Menu <img src="http://www.shoredreams.net/wp-content/uploads/2014/02/show-menu-icon.png">
	</div>
	<nav>
		<ul>
			<li><a href="#">Home 1</a></li>
			<li><a href="#">Home 2</a></li>
			<li><a href="#">Home 3</a></li>
			<li><a href="#">Home 4</a></li>
			<li><a href="#">Home 5</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>

style.css

nav ul{
 padding: 2px;
 margin: 0px;
 position: absolute;
 background-color: #fff;
 border: 1px solid #078EE5;
}
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;
}
@media (max-width: 640px) {
 .mobile-menu{
 display: block;
 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;
 }
}

Read Also : Laravel 8 Mobile Number Verification Tutorial

Thanks for read this, I hope it will you. You can also follow us onĀ Facebook.

About code chef

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by code chef →