How to Create Responsive Menu in HTML/PHP ?

By Hardik Savani May 14, 2024 Category : PHP HTML CSS jQuery

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

}

}

Try this........

Tags :
Shares