In this tutorial, we will learn How to create a responsive menu in html/PHP



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

nav ul li{
    margin: 5px;
    float: left;
    list-style: none;
    line-height: 30px;
    position: relative;
}

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{
    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;
        cursor: pointer;

    }

}


May this example help you


Are you facing problems in understanding this article?
You can watch the video. Watch it now