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

Read Also: How to Get HTML Tag Value in PHP?
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 :
Previous

How to Convert Line Breaks to br in jQuery ?
Next

How to Set URL without Http of Other Site in Laravel?

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares