How to create responsive menu in html/PHP ?
In this post we will give you information about How to create responsive menu in html/PHP ?. Hear we will give you detail about How to create responsive menu in html/PHP ?And how to use it also give you demo for it if it is necessary.
Now i am going to show how to create responsive menu in your html website. i will show you how to create responsive menu using css, html and jquery. we have to also use media query. it is a pretty simple to create responsive menu. now i listed two file one is html and second is css file this two file make a simple responsive menu and you can easy to change and modification in in this file. it will easy to integrate with php, .net or any php framework.
how to create a responsive menu bar in html, responsive menu bar jquery example, responsive menu using css and jquery, 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 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;
}
}
Try this……..
Hope this code and post will helped you for implement How to create responsive menu in html/PHP ?. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs