How to create Responsive Menu in Website without using JavaScript. Here is the simple code to make responsive Menu without using Js (JavaScript). You have to First create Html File with extension of .html and then you have to past the below HTML and then in <Head></Head> section create another section <Style></Style> and paste the Css Style Code and then Enjoy
Html Structure
<nav class="dropdownmenu"><ul><li><a href="">Home</a></li><li><a href=">About Me</a></li><li><a href="#">Pen with No Limit Offer</a><ul id="submenu"><li><a href="">Medical Study</a></li><li><a href="">Web Development</a></li><li><a href="">Tech News</a></li></ul></li><li><a href="">Downloads</a></li><li><a href="">Contact Us</a></li></ul></nav>
CSS Structure
.dropdownmenu ul, .dropdownmenu li {
margin: 0;
padding: 0;
}
.dropdownmenu ul {
background: gray;
list-style: none;
width: 100%;
}
.dropdownmenu li {
float: left;
position: relative;
width:auto;
}
.dropdownmenu a {
background: #30A6E6;
color: #FFFFFF;
display: block;
font: bold 12px/20px sans-serif;
padding: 10px 25px;
text-align: center;
text-decoration: none;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
.dropdownmenu li:hover a {
background: #000000;
}
#submenu {
left: 0;
opacity: 0;
position: absolute;
top: 35px;
visibility: hidden;
z-index: 1;
}
li:hover ul#submenu {
opacity: 1;
top: 40px; /* adjust this as per top nav padding top & bottom comes */
visibility: visible;
}
#submenu li {
float: none;
width: 100%;
}
#submenu a:hover {
background: #DF4B05;
}
#submenu a {
background-color:#000000;
}
Comments
Post a Comment