How to create Responsive top navigation menu with logo and download free source code

How-to-create--Responsive-top-navigation-menu-with-logo-and-download-free-source-code

How to create  Responsive top navigation menu with logo and download free source code.

In this tutorial ,How to create  Responsive top navigation menu with logo and download free source code.

STEP:1 :- open an editor, paste the following code and save it as .html or the extension you want to save .

<!DOCTYPE html>
<html>
<head>
	<title>Responsive Header</title>
	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="images/favicon.png" rel="Shortcut Icon" />
	<link rel="stylesheet" type="text/css" href="css/maincss.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<link rel="stylesheet" type="text/css" href="css/animate.css">
	<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lato" />
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
	$(document).ready(function(){
    $("#toggle").click(function(){
        $(".second-header").slideToggle("slow");
     });
});

$(document).ready(function(){
    $("#dropdown").click(function(){
        $("#dropdown-content").toggle();
         $("#re-dropdown-content").hide();
          $("#backgrounddiv").show();
    });
});


$(document).ready(function(){
    $("#resources").click(function(){
        $("#re-dropdown-content").toggle();
        $("#backgrounddiv").show();
        
        $("#dropdown-content").hide();
    });
});
$(document).ready(function(){
    $("#backgrounddiv").click(function(){
        $("#re-dropdown-content").hide();
        $("#dropdown-content").hide();
    });
});
</script>
</head>
<body>
<div id="backgrounddiv" style="position: absolute;width:100%;height: 100%;background-color: transparent;display: none;z-index: -1">
</div>
<header class="top-header" >
<nav>
<ul>
<li class="cool-links">
<a href="">TEXT</a>
</li>
<li class="cool-links">
<a href="">TEXT</a>
</li>
<li class="cool-links">
<a href="">TEXT</a>
</li>
<li class="cool-links">
<a href="">TEXT</a>
</li>
<li>
<a href=""><i class="fa fa-facebook fa-icon-fb-header" aria-hidden="true" style=""></i></a>
</li>
<li>
<a href=""><i class="fa fa-twitter fa-icon-twitter-header" aria-hidden="true" ></i></a>
</li>
<li>
<a href=""><i class="fa fa-linkedin fa-icon-linked-in-header" aria-hidden="true"  ></i></a>
</li>
<li>
<a href=""><i class="fa fa-google-plus fa-icon-google-plus-header" aria-hidden="true"></i></a>
</li>
<li>
<form style="" class="search-form-top" >
<input class="textspace"  type="text" name="">
<input class="search-button" type="submit" name="" value="SEARCH">
</form>
</li>
</ul>
</nav>
</header>
<div class="second-div-header"  > 
<div class="second-div-header-inner">
<img style="width: 100%" src="images/logo.png">
</div>
<div id="toggle" class="toggle" style="">
<div class="toggle-lines" ></div>
<div class="toggle-lines" ></div>
<div class="toggle-lines" ></div>
</div>


<header class="second-header" style="">
<nav >
<ul style="float: left;">
<li class="cool-link">
<a href="">HOME</a>
</li>
<li class="cool-link">
<a href="">TEXT</a>
</li>
<li class="cool-link">
<a href="">TEXT</a>
</li>
</ul>
<ul style="float: left;">
<li class="cool-link" style="cursor: pointer;">
<div id="dropdown" class="dropdown">
 <a style="cursor: pointer;" >TEXT  <i style="font-size: 15px" class="fa fa-caret-down" aria-hidden="true"></i></a>
<div>
 
<div  id="dropdown-content" class="dropdown-content wow fadeIn animated" data-wow-delay="80ms" style="visibility: visible; animation-delay: 80ms; animation-name: fadeIn;">
<div class="whiteheader" style="">
<div class="triangle" >
</div>
</div>
<ul>
	<li class="wow fadeInLeft animated" data-wow-delay="100ms" style="visibility: visible; animation-delay: 100ms; animation-name: fadeInLeft;" >
		 <a    href="">TEXT</a>
	</li>
	<li class="wow fadeInLeft animated" data-wow-delay="200ms" style="visibility: visible; animation-delay: 200ms; animation-name: fadeInLeft;" >
		 <a   class=""  href="">TEXT</a>
	</li>
	<li class="wow fadeInLeft animated" data-wow-delay="300ms" style="visibility: visible; animation-delay: 300ms; animation-name: fadeInLeft;" >
		 <a   class=""  href="">TEXT</a>
	</li>
	<li class="wow fadeInLeft animated" data-wow-delay="400ms" style="visibility: visible; animation-delay: 400ms; animation-name: fadeInLeft;" >
		 <a   class=""  href="">TEXT</a>
	</li>
	<li class="wow fadeInLeft animated" data-wow-delay="500ms" style="visibility: visible; animation-delay: 500ms; animation-name: fadeInLeft;" >
		 <a   class=""  href="">TEXT</a>
	</li>
	<li class="wow fadeInLeft animated" data-wow-delay="600ms" style="visibility: visible; animation-delay: 600ms; animation-name: fadeInLeft;" >
		 <a   class=""  href="">TEXT</a>
	</li>
	<li class="wow fadeInLeft animated" data-wow-delay="700ms" style="visibility: visible; animation-delay: 700ms; animation-name: fadeInLeft;" >
		 <a   class=""  href="">TEXT</a>
	</li>
	<li class="wow fadeInLeft animated" data-wow-delay="800ms" style="visibility: visible; animation-delay: 800ms; animation-name: fadeInLeft;" >
		 <a   class=""  href="">TEXT</a>
	</li>
   </ul>
</div>
</div>
</div>
</li>
</ul>

<ul style="float: left;">
<li class="cool-link" style="cursor: pointer;">
<div id="resources" class="dropdown">
 <a style="cursor: pointer;" >TEXT  <i style="font-size: 15px" class="fa fa-caret-down" aria-hidden="true"></i></a>
<div>

<div  id="re-dropdown-content" class="dropdown-content wow fadeIn animated"  data-wow-delay="80ms" style="visibility: visible; animation-delay: 80ms; animation-name: fadeIn;">
<div class="whiteheader" style="">
<div class="triangle" >
</div>
</div>
<ul>
	<li class="wow fadeInLeft animated" data-wow-delay="100ms" style="visibility: visible; animation-delay: 100ms; animation-name: fadeInLeft;" >
		 <a    href="">TEXT</a>
	</li>
	<li class="wow fadeInLeft animated" data-wow-delay="200ms" style="visibility: visible; animation-delay: 200ms; animation-name: fadeInLeft;" >
		 <a   class=""  href="">TEXT</a>
	</li>
	<li class="wow fadeInLeft animated" data-wow-delay="300ms" style="visibility: visible; animation-delay: 300ms; animation-name: fadeInLeft;" >
		 <a   class=""  href="">TEXT</a>
	</li>
	<li class="wow fadeInLeft animated" data-wow-delay="400ms" style="visibility: visible; animation-delay: 400ms; animation-name: fadeInLeft;" >
		 <a   class=""  href="">TEXT</a>
	</li>
	<li class="wow fadeInLeft animated" data-wow-delay="500ms" style="visibility: visible; animation-delay: 500ms; animation-name: fadeInLeft;" >
		 <a   class=""  href="">TEXT</a>
	</li>
	<li class="wow fadeInLeft animated" data-wow-delay="600ms" style="visibility: visible; animation-delay: 600ms; animation-name: fadeInLeft;" >
		 <a   class=""  href="">TEXT</a>
	</li>
	<li class="wow fadeInLeft animated" data-wow-delay="700ms" style="visibility: visible; animation-delay: 700ms; animation-name: fadeInLeft;" >
		 <a   class=""  href="">TEXT</a>
	</li>
	<li class="wow fadeInLeft animated" data-wow-delay="800ms" style="visibility: visible; animation-delay: 800ms; animation-name: fadeInLeft;" >
		 <a   class=""  href="">TEXT</a>
	</li>
   </ul>
</div>
</div>
</div>
</li>
</ul>
<ul style="float: left;">
<li class="cool-link">
<a href="">TEXT</a>
</li>
<li class="cool-link">
<a href="">TEXT</a>
</li>
</ul>
</nav>
</header>
</div>
<div style="width: 100%;border-top: 2px solid black;float: left;">
</div>
</body>
</html>

STEP:2 :- open an editor, paste the following code and save it as .css or the extension you want to save .


@media only screen and (min-width: 1px)
{
body
{
	margin: 0;
	padding: 0;
	font-family: Lato;

}
.top-header
{
	width: 100%;
	margin: 0;
	padding: 0;
	text-align: center;
}
.top-header nav ul
{
	width: 100%;
	list-style-type: none;
	display: inline-block;
	background-color: #00004d;
	margin: 0;
	padding:0;
}
.top-header nav ul li
{
	list-style-type: none;
	display: inline-block;
	margin:0 10px;
	line-height: 3em;
}
.top-header nav ul li a
{
text-decoration: none;
font-size: 10px;
font-weight: bold;
color: white;
}
.second-header
{
	width: 100%;
	margin: 0;
	padding: 0;
	float: left;
	text-align: left;
	background-color: #00004d;
	display: none;
}
.second-header nav ul
{
	width: 100%;
	list-style-type: none;
	display: inline-block;
	background-color: #00004d;
	margin: 0;
	padding:0;
}
.second-header nav 
{
	padding-left: 0;
}
.second-header nav ul li
{
	list-style-type: none;
	display: inline-block;
	margin:0 0px;
	line-height: 2em;
	border-bottom: 1px solid white;
	transition: width 0.5s;
	width: 100%;
	transition: 1s ease-in-out;
}
.cool-links 
{
    display: inline-block;
    color: transparent;
    text-align: center;
   
}
.cool-links::after {
    content: '';
    display: block;
    width: 0;
    height: 0px;
    background:  transparent;
    transition: width .3s;
     text-align: center;
}
.cool-links:hover::after {
    width: 100%;
    transition: width .3s;
     text-align: center;
}
.cool-link 
{
    display: inline-block;
    color: transparent;
   
}
.cool-link::after {
    content: '';
    display: block;
    width: 0;
    height: 3px;
    background: transparent;
    transition: width 0.5s;
}
.cool-link:hover::after {
    width: 100%;
    transition: width 0.5s;
}
.second-header nav ul li a
{
text-decoration: none;
font-size: 10px;
font-weight: bold;
color: white;
padding-left: 10px
}
.search-form-top .textspace
{
	line-height: 2em;
	width: 170px;
	padding-left: 5px;
}
.search-button
{
	line-height: 1em;
	width: 75px;
	height: 2.4em;
	background-color:#3366ff;
	border:none;
	padding-left: 1px;
	color: white;
}

.cool-links 
{
    display: inline-block;
    color: transparent;
    text-align: center;
   
}
.cool-links::after {
    content: '';
    display: block;
    width: 0;
    height: 4px;
    background: transparent;
    transition: width .3s;
     text-align: center;
}
.cool-links:hover::after {
    width: 100%;
    transition: width .3s;
     text-align: center;
}
.cool-link 
{
    display: inline-block;
    color: transparent;
   
}
.cool-link::after {
    content: '';
    display: block;
    width: 0;
    height: 3px;
    background: transparent;
    transition: width 0.5s;
}
.cool-link:hover::after {
    width: 100%;
    transition: width 0.5s;
}
.fa-icon-fb-header
{
	color: white;
	background-color: #4d6baa;
	padding: 6px;
	width: 20px;
    text-align: center;
     transition: 0.2s ease-in-out;
}
.fa-icon-fb-header:hover
{
	color: white;
	background-color: #4d6baa;
	padding: 6px;
	width: 20px;
    text-align: center;
    transition: 0.2s ease-in-out;
    border-radius: 50%;
}
.fa-icon-twitter-header
{
	color: white;
	background-color: #50c6f8;
	padding: 6px; 
	width: 20px;
    text-align: center;
    transition: 0.2s ease-in-out;
}
.fa-icon-twitter-header:hover
{
	color: white;
	background-color: #50c6f8;
	padding: 6px; 
	width: 20px;
    text-align: center;
     transition: 0.2s ease-in-out;
    border-radius: 50%;
}
.fa-icon-linked-in-header
{
	color: white;
	background-color: #238cc8;
	padding: 6px; 
	width: 20px;
    text-align: center;
     transition: 0.2s ease-in-out;
}
.fa-icon-linked-in-header:hover
{
	color: white;
	background-color: #238cc8;
	padding: 6px; 
	width: 20px;
    text-align: center;
     transition: 0.2s ease-in-out;
    border-radius: 50%;
}
.fa-icon-google-plus-header
{
	color: white;
	background-color: #e95b5b;
	padding: 6px;    
	width: 20px;
    text-align: center;
    transition: 0.2s ease-in-out;
}
.fa-icon-google-plus-header:hover
{
	color: white;
	background-color: #e95b5b;
	padding: 6px;    
	width: 20px;
    text-align: center;
    transition: 0.2s ease-in-out;
    border-radius: 50%;
}
.second-div-header
{
	width: 100%;
	float: left;
	margin:1% 0% 0.5%;
}
.second-div-header-inner
{
	width: 70%;
	float: left;
	margin-left: 3%
}
.toggle
{
	float: right;
	background-color: transparent;
	width: 35px;
	height: 35px;
	margin:2% 6%;
	border-radius: 5px
}
.toggle .toggle-lines
{
	width: 100%;
	height: 2px ;
	background-color: black;
	margin:7px 0;
}
.second-div-header-inner img

{
	margin-top: 3%
}
.rdrop
{
display: none;
transition: 1s ease;
}
.regions:hover + .rdrop
{
    display: block;
    background-color: red;
    width: 100%;
    height: 200px;
    transition: 1s ease;

}
.dropdown {
    position: relative;
    display: inline-block;
    transition: 1s ease;
}
.dropdown-content {
    display: none;
    position: relative;
    background-color:#00004d;
    min-width: 160px;
     
    z-index: 1;
    color: white;
    margin: 0 0px;
    transition: 1s ease!important;

}
.dropdown-content ul li 
{
	border: none!important;
	margin: 0px!important;
	transition: 1s ease!important;
	width: 100%!important;
	margin-left: 10px!important;

	
}
.dropdown-content ul li:hover
{
	background-color: white;
	width: 100%;
	color: black!important;
	    margin: 0 0px;
	    transition: 1s ease;
}

.dropdown-content ul li:hover a
{
	
	width: 100%;
	color: black!important;
	padding-left: 20px;
	transition: 1s ease;
}

.dropdown-content ul li a
{
	color: white!important;
	margin: 0 0px;
	padding-left: 20px;
	transition: 1s ease;
}

.whiteheader
{
display: none;
	width: 100%;height: 20px;background-color: white;
}



}





















@media only screen and (min-width: 700px)
{
body
{
	margin: 0;
	padding: 0;
	font-family: Lato;

}
.top-header
{
	width: 100%;
	margin: 0;
	padding: 0;
	text-align: center;
}
.top-header nav ul
{
	width: 100%;
	list-style-type: none;
	display: inline-block;
	background-color: #00004d;
	margin: 0;
	padding:0;
}
.top-header nav ul li
{
	list-style-type: none;
	display: inline-block;
	margin:0 10px;
	line-height: 3em;
}
.top-header nav ul li a
{
text-decoration: none;
font-size: 10px;
font-weight: bold;
color: white;
}
.second-header
{
	width: 100%;
	margin: 0;
	padding: 0;
	float: left;
	text-align: left;
	width: 67%;
	background-color: white;
	display: inline-block;
}
.second-header nav ul
{
	width: auto;
	list-style-type: none;
	display: inline-block;
	background-color: white;
	margin: 0;
	padding:0;
}
.second-header nav 
{
	padding-left: 30px;
}
.second-header nav ul li
{
	list-style-type: none;
	display: inline-block;
	margin:0 10px;
	line-height: 2em;
	border-bottom: 3px solid white;
	transition: width 0.5s;
	width: auto;
	transition: 1s ease;
	transition: 1s ease;

}
.cool-links 
{
    display: inline-block;
    color: #3366ff;
    text-align: center;
   
}
.cool-links::after {
    content: '';
    display: block;
    width: 0;
    height: 4px;
    background:  #3366ff;
    transition: width .3s;
     text-align: center;
}
.cool-links:hover::after {
    width: 100%;
    transition: width .3s;
     text-align: center;
}
.cool-link 
{
    display: inline-block;
    color: #3366ff;
   
}
.cool-link::after {
    content: '';
    display: block;
    width: 0;
    height: 3px;
    background: #3366ff;
    transition: width 0.5s;
}
.cool-link:hover::after {
    width: 100%;
    transition: width 0.5s;
}
.second-header nav ul li a
{
text-decoration: none;
font-size: 10px;
font-weight: bold;
color: #00004d;
}
.search-form-top .textspace
{
	line-height: 2em;
	width: 390px;
	padding-left: 5px;
}
.search-button
{
	line-height: 1em;
	width: 100px;
	height: 2.4em;
	background-color:#3366ff;
	border:none;
	padding-left: 1px;
	color: white;
}
.fa-icon-fb-header
{
	color: white;
	background-color: #4d6baa;
	padding: 6px;
	width: 20px;
    text-align: center;
     transition: 0.2s ease-in-out;
}
.fa-icon-fb-header:hover
{
	color: white;
	background-color: #4d6baa;
	padding: 6px;
	width: 20px;
    text-align: center;
    transition: 0.2s ease-in-out;
    border-radius: 50%;
}
.fa-icon-twitter-header
{
	color: white;
	background-color: #50c6f8;
	padding: 6px; 
	width: 20px;
    text-align: center;
    transition: 0.2s ease-in-out;
}
.fa-icon-twitter-header:hover
{
	color: white;
	background-color: #50c6f8;
	padding: 6px; 
	width: 20px;
    text-align: center;
     transition: 0.2s ease-in-out;
    border-radius: 50%;
}
.fa-icon-linked-in-header
{
	color: white;
	background-color: #238cc8;
	padding: 6px; 
	width: 20px;
    text-align: center;
     transition: 0.2s ease-in-out;
}
.fa-icon-linked-in-header:hover
{
	color: white;
	background-color: #238cc8;
	padding: 6px; 
	width: 20px;
    text-align: center;
     transition: 0.2s ease-in-out;
    border-radius: 50%;
}
.fa-icon-google-plus-header
{
	color: white;
	background-color: #e95b5b;
	padding: 6px;    
	width: 20px;
    text-align: center;
    transition: 0.2s ease-in-out;
}
.fa-icon-google-plus-header:hover
{
	color: white;
	background-color: #e95b5b;
	padding: 6px;    
	width: 20px;
    text-align: center;
    transition: 0.2s ease-in-out;
    border-radius: 50%;
}
.second-div-header
{
	width: 100%;
	float: left;
	margin:1% 0% 0.5%;
}
.second-div-header-inner
{
	width: 30%;float: left;margin-left: 3%
}
.toggle
{
	float: right;
	background-color: transparent;
	width: 35px;
	height: 35px;
	margin:2% 6%;
	border-radius: 5px;
	display: none;
}
.second-div-header-inner img

{
	margin-top: 1%
}
.rdrop
{
display: none;
transition: 1s ease;
}
.regions:hover + .rdrop
{
    display: block;
    background-color: red;
    width: 100%;
    height: 200px;
    transition: 1s ease;

}
.dropdown {
    position: relative;
    display: inline-block;
    transition: 1s ease;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color:#00004d;
    min-width: 160px;
    
    z-index: 1;
    color: white;
    margin: 0 0px;
    transition: 1s ease!important;

}
.dropdown-content ul li 
{
	border: none!important;
	margin: 0px!important;
	transition: 1s ease!important;
	width: 100%!important;
	border-bottom: 1px solid white!important;

	
}
.dropdown-content ul
{
	background-color: #00004d!important;
}



.dropdown-content ul li:hover
{
	background-color: white;
	width: 100%;
	color: black!important;
	    margin: 0 0px;
	    transition: 1s ease;
	    cursor: pointer;
}

.dropdown-content ul li:hover a
{
	
	width: 100%;
	color: black!important;
	padding-left: 20px;
	transition: 1s ease;
	cursor: pointer;
}

.dropdown-content ul li a
{
	color: white!important;
	margin: 0 0px;
	padding-left: 20px;
	transition: 1s ease;
	cursor: pointer;
}
.dropdown-content .triangle
{
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 0 20px 20px 0px;
border-color: transparent transparent #00004d transparent;
z-index: 9999999;
}
.whiteheader
{
display: block;
	width: 100%;height: 20px;background-color: white;
}




}













@media only screen and (min-width: 1250px)
{
body
{
	margin: 0;
	padding: 0;
	font-family: Lato;

}
.top-header
{
	width: 100%;
	margin: 0;
	padding: 0;
	text-align: left;
}
.top-header nav ul
{
	width: 100%;
	list-style-type: none;
	display: inline-block;
	background-color: #00004d;
	margin: 0;
	padding:0;
}
.top-header nav ul li
{
	list-style-type: none;
	display: inline-block;
	margin:0 10px;
	line-height: 3em;
	


}
.top-header nav ul li a
{
text-decoration: none;
font-size: 11px;
font-weight: bold;
color: white;
}
.second-header
{
	margin: 0;
	padding: 0;
	float: left;
	text-align: left;
	width: 67%;
	background-color: transparent;
}
.second-header nav ul
{
	width: auto;
	list-style-type: none;
	display: inline-block;
	background-color: transparent;
	margin: 0;
	padding:0;
}
.second-header nav 
{
	padding-left: 50px;
}
.second-header nav ul li
{
	list-style-type: none;
	display: inline-block;
	margin:0 10px;
	line-height: 3em;
	border-bottom: 3px solid white;
	transition: width 0.5s;
	width: auto;
	transition: 1s ease;
}
.cool-links 
{
    display: inline-block;
    color: #3366ff;
    text-align: center;
   
}
.cool-links::after {
    content: '';
    display: block;
    width: 0;
    height: 4px;
    background:  #3366ff;
    transition: width .3s;
     text-align: center;
}
.cool-links:hover::after {
    width: 100%;
    transition: width .3s;
     text-align: center;
}
.cool-link 
{
    display: inline-block;
    color: #3366ff;
   
}
.cool-link::after {
    content: '';
    display: block;
    width: 0;
    height: 3px;
    background: #3366ff;
    transition: width 0.5s;
}
.cool-link:hover::after {
    width: 100%;
    transition: width 0.5s;
}
.second-header nav ul li a
{
text-decoration: none;
font-size: 12px;
font-weight: bold;
color: #00004d;
}
.search-form-top .textspace
{
	line-height: 2em;
	width: 490px;
	padding-left: 5px;
}
.search-button
{
	line-height: 1em;
	width: 100px;
	height: 2.4em;
	background-color:#3366ff;
	border:none;
	padding-left: 1px;
	color: white;
}
.fa-icon-fb-header
{
	color: white;
	background-color: #4d6baa;
	padding: 6px;
	width: 20px;
    text-align: center;
     transition: 0.2s ease-in-out;
}
.fa-icon-fb-header:hover
{
	color: white;
	background-color: #4d6baa;
	padding: 6px;
	width: 20px;
    text-align: center;
    transition: 0.2s ease-in-out;
    border-radius: 50%;
}
.fa-icon-twitter-header
{
	color: white;
	background-color: #50c6f8;
	padding: 6px; 
	width: 20px;
    text-align: center;
    transition: 0.2s ease-in-out;
}
.fa-icon-twitter-header:hover
{
	color: white;
	background-color: #50c6f8;
	padding: 6px; 
	width: 20px;
    text-align: center;
     transition: 0.2s ease-in-out;
    border-radius: 50%;
}
.fa-icon-linked-in-header
{
	color: white;
	background-color: #238cc8;
	padding: 6px; 
	width: 20px;
    text-align: center;
     transition: 0.2s ease-in-out;
}
.fa-icon-linked-in-header:hover
{
	color: white;
	background-color: #238cc8;
	padding: 6px; 
	width: 20px;
    text-align: center;
     transition: 0.2s ease-in-out;
    border-radius: 50%;
}
.fa-icon-google-plus-header
{
	color: white;
	background-color: #e95b5b;
	padding: 6px;    
	width: 20px;
    text-align: center;
    transition: 0.2s ease-in-out;
}
.fa-icon-google-plus-header:hover
{
	color: white;
	background-color: #e95b5b;
	padding: 6px;    
	width: 20px;
    text-align: center;
    transition: 0.2s ease-in-out;
    border-radius: 50%;
}
.second-div-header
{
	width: 100%;
	float: left;
	margin:1% 0% 0.5%;
}
.second-div-header-inner
{
	width: 30%;float: left;margin-left: 3%
}

.toggle
{
	float: right;
	background-color: transparent;
	width: 35px;
	height: 35px;
	margin:2% 6%;
	border-radius: 5px;
	display: none;
}
.second-div-header-inner img

{
	margin-top: 0%
}
.rdrop
{
display: none;
transition: 1s ease;
}
.regions:hover + .rdrop
{
    display: block;
    background-color: red;
    width: 100%;
    height: 200px;
    transition: 1s ease;

}
.dropdown {
    position: relative;
    display: inline-block;
    transition: 1s ease;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color:#00004d;
    min-width: 160px;
    
    z-index: 1;
    color: white;
    margin: 0 0px;
    transition: 1s ease!important;

}
.dropdown-content ul li 
{
	border: none!important;
	margin: 0px!important;
	transition: 1s ease!important;
	width: 100%!important;
	border-bottom: 1px solid white!important;

	
}
.dropdown-content ul li:hover
{
	background-color: white;
	width: 100%;
	color: black!important;
	    margin: 0 0px;
	    transition: 1s ease;
	    cursor: pointer;
}

.dropdown-content ul li:hover a
{
	
	width: 100%;
	color: black!important;
	padding-left: 20px;
	transition: 1s ease;
	cursor: pointer;
}

.dropdown-content ul li a
{
	color: white!important;
	margin: 0 0px;
	padding-left: 20px;
	transition: 1s ease;
	cursor: pointer;
}
.dropdown-content .triangle
{
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 0 20px 20px 0px;
border-color: transparent transparent #00004d transparent;
z-index: 9999999;
}
.whiteheader
{
display: block;
	width: 100%;height: 20px;background-color: white;
}
.dropdown:focus
{
	background-color: transparent!important;
}
}

Now i explain few blocks of code below :-

The Below JS Code is used to open the DIV on mouse click with "slow" Animation.

$(document).ready(function(){
    $("#toggle").click(function(){
        $(".second-header").slideToggle("slow");
     });
});

The Below JS Code is used to First open the DIV on mouse click and Hide the Another Div which may or may not be open and it will open the another DIV on back with "background-color:transparent;" which will help in close the DIV when click on body .

$(document).ready(function(){
    $("#dropdown").click(function(){
        $("#dropdown-content").toggle();
         $("#re-dropdown-content").hide();
          $("#backgrounddiv").show();
    });
});

 

 

DEMO     DOWNLOAD CODE 

STAY CONNECTED FOR MORE :)

ADD COMMENT

Your email address will not be published. Required fields are marked *








Be the first to comment. :)

The primary motive of our company is to provide beyond satisfactory results .

Request a free consultation quote

WWW.BHAGAUTI.COM © COPYRIGHT 2018 | TERMS AND CONDITIONS | Privacy & Policy