responsive menu CSS

responsive menu CSS

responsive menu CSS

responsive menu CSS:- As you know that today every website is changed to responsive even menu should also be responsive. If your website menu is not responsive then you can make it by using media queries.Its very easy just you have to follow steps:-

Html & CSS Code for responsive menu

here is a simple code for responsive website menu

<!DOCTYPE html>
<html>
<head>
<title>responsive menu css</title>
<style>
body {margin:0;}
ul.topmenures {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: blue;
}

ul.topmenures li {float: left;}

ul.topmenures li a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}

ul.topmenures li a:hover {background-color: #555;}

ul.topmenures li.icon {display: none;}


</style>
</head>
<body>

<ul class="topmenures" id="resNav">
<li><a class="active" href="#home">Home</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#project">Project</a></li>
<li><a href="#contact">Contact Us</a></li>
<li class="icon">
<a href="javascript:void(0);" onclick="mobileIcon()">☰</a>
</li>
</ul>

<div style="padding-left:16px">
<h2>responsive menu css</h2>

</div>

</body>
</html>

Media query for responsive menu

@media screen and (max-width:680px) {
 ul.topmenures li:not(:first-child) {display: none;}
 ul.topmenures li.icon {
 float: right;
 display: inline-block;
 }
}

@media screen and (max-width:680px) {
 ul.topmenures.responsive {position: relative;}
 ul.topmenures.responsive li.icon {
 position: absolute;
 right: 0;
 top: 0;
 }
 ul.topmenures.responsive li {
 float: none;
 display: inline;
 }
 ul.topmenures.responsive li a {
 display: block;
 text-align: left;
 }
}



Javascript code

This code calls the class responsive which we defined in CSS. When users go to mobile view it shows the icon to show the menu.

<script>
function mobileIcon() {
 var x = document.getElementById("resNav");
 if (x.className === "topmenures") {
 x.className += " responsive";
 } else {
 x.className = "topmenures";
 }
}
</script>

Full Code to make responsive menu

<!DOCTYPE html>
<html>
<head>

<title> responsive  menu css</title>
<style>
body {margin:0;}
ul.topmenures {
 list-style-type: none;
 margin: 0;
 padding: 0;
 overflow: hidden;
 background-color: #333;
}

ul.topmenures li {float: left;}

ul.topmenures li a {
 display: inline-block;
 color: #f2f2f2;
 text-align: center;
 padding: 14px 16px;
 text-decoration: none;
 transition: 0.3s;
 font-size: 17px;
}

ul.topmenures li a:hover {background-color: #555;}

ul.topmenures li.icon {display: none;}

@media screen and (max-width:680px) {
 ul.topmenures li:not(:first-child) {display: none;}
 ul.topmenures li.icon {
 float: right;
 display: inline-block;
 }
}

@media screen and (max-width:680px) {
 ul.topmenures.responsive {position: relative;}
 ul.topmenures.responsive li.icon {
 position: absolute;
 right: 0;
 top: 0;
 }
 ul.topmenures.responsive li {
 float: none;
 display: inline;
 }
 ul.topmenures.responsive li a {
 display: block;
 text-align: left;
 }
}
</style>
</head>
<body>

<ul class="topmenures" id="resNav">
 <li><a class="active" href="#home">Home</a></li>
 <li><a href="#about">About Us</a></li>
 <li><a href="#project">Project</a></li>
 <li><a href="#contact">Contact Us</a></li>
 <li class="icon">
 <a href="javascript:void(0);"  onclick="mobileIcon()">☰</a>
 </li>
</ul>

<div style="padding-left:16px">
 <h2>responsive  menu css</h2>
 <p>Resize the browser window to see how it works.</p>
</div>

<script>
function mobileIcon() {
 var x = document.getElementById("resNav");
 if (x.className === "topmenures") {
 x.className += " responsive";
 } else {
 x.className = "topmenures";
 }
}
</script>

</body>
</html>

 

Leave a Comment