Responsive Drop-down Menu bar – HTML 5,
CSS & Javascript
The source code :
<html>
<head>
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
*{
margin: 0;
padding: 0;
}
body{
background: #eee;
font-size: 18px;
font-family: sans-serif,verdana;
}
.logo{
position: absolute;
left: 20px;
top: 3px;
}
header{
width: 1000px;
height: 120px;
margin: 0 auto;
position: relative;
}
.nav{
width: 1000px;
height: 60px;
margin: 0 auto;
}
ul li{
list-style: none;
width: 200px;
line-height: 60px;
position: relative;
background: #222;
box-shadow: 0px 2px 5px 0px grey;
text-align: center;
float: left;
background: linear-gradient(darkred 20%,black 80%);
}
ul li ul{
position: absolute;
}
.nav > ul >li:nth-of-type(1){
border-radius: 5px 0px 0px 5px;
}
.nav > ul >li:nth-of-type(5){
border-radius: 0px 5px 5px 0px;
}
ul li a{
color: #fff;
width: 200px;
height: 58px;
display: inline-block;
text-decoration: none;
}
ul li a:hover{
font-weight: bold;
border-bottom: 2px solid #fff;
}
ul li ul{
display: none;
}
.nav ul li:hover ul{
display: block;
}
.fa{
margin-right: 5px;
}
.container{
width: 1000px;
height: auto;
margin: 0 auto;
padding: 20px;
}
.fa-bars.modify{
display: none;
font-size: 35px;
position: absolute;
right: 30px;
top: 45px;
cursor: pointer;
}
@media screen and (max-width:480px){
header{
width: 100%;
}
.nav{
width: 100%;
height: auto;
display: none;
}
ul li{
width: 100%;
float: none;
}
ul li a{
width: 100%;
display: block;
}
ul li ul{
position: static;
}
ul li ul li a{
background: #222;
}
.fa-bars.modify{
display: block;
}
.container{
width: 100%;
height: auto;
}
.nav > ul >li:nth-of-type(1){
border-radius: 0px;
}
.nav > ul >li:nth-of-type(5){
border-radius: 0px;
}
body{
overflow-x: hidden;
}
}
</style>
</head>
<body>
<header>
<div class="logo"><img src="logo.png"></div>
<div class="menu"><span class="fa fa-bars modify"></span></div>
</header>
<nav class="nav">
<ul>
<li><a href="#"><span class="fa fa-home"></span>Home</a></li>
<li><a href="#"><span class="fa fa-info"></span>About</a></li>
<li><a href="#"><span class="fa fa-gear"></span>Services</a>
<ul>
<li><a href="#">service 1</a></li>
<li><a href="#">service 2</a></li>
<li><a href="#">service 3</a></li>
</ul>
</li>
<li><a href="#"><span class="fa fa-download"></span>Downloads</a>
<ul>
<li><a href="#">downlad 1</a></li>
<li><a href="#">downlad 2</a></li>
</ul>
</li>
<li><a href="#"><span class="fa fa-phone"></span>Contact</a></li>
</ul>
</nav>
<section class="container">
<h1>Welcome to teqgeek</h1>
<p>Hello, Everyone</p>
</section>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
var menu = false;
$(".fa-bars.modify").click(function(){
if(menu == false)
{
$(".nav").fadeIn();
menu = true;
}
else{
$(".nav").fadeOut();
menu = false;
}
});
</script>
Hi guys,
ReplyDeleteIf you have any doubts and problems you can comment here