How To Create a Dropdown with hover effect on mouse motion
Example Explained
We have styled the Navigation bar with a background-color.
The .sub-menu class use position:absolute, and its parent li is position:relative which is needed when we want the dropdown or sub menu content to be placed below the sub menu button.
The .sub-menu class holds the actual dropdown menu. It is hidden by default, and will be displayed on hover (see above). Note the min-width is set to 100px. Yes you can change this. We also use z-index to place the dropdown in front of other elements.
The :hover selector is used to view the sub menu when the user moves the mouse over the sub menu button.
HTML and CSS Code Here:
<!DOCTYPE html>
<html>
<head>
<title>Navigation Bar with Sub Menu</title>
<style type="text/css">
body {margin:0; padding: 0px; font-family: 'Roboto', sans-serif;}
.wrapper{width: 100%; max-width: 1200px; margin: 0 auto;}
nav{margin-bottom: 15px;}
ul:after{clear: both; content: '';}
.redBg{background-color: #e01b1b;}
.blueBg{background-color: #3b9dfd;}
.orangeBg{background-color: #ff5722;}
.lightBlueBg{background-color: #00bcd4;}
.greenBg{background-color: #33b51a;}
.darkgreen{background-color: #1a7309;}
a{color: #fff; text-decoration: none;}
ul{margin: 0px; padding: 0px;}
ul li {display: inline-block; position: relative;}
ul li a{display: inline-block; }
ul li a{padding: 10px;}
ul li a:hover, li.active a{background-color: #424242; transition: all 0.5s ease;}
.sub-menu{display: none; min-width: 100px; position: absolute; left: 0px; top: 40px; z-index: 2;}
.sub-menu li{display: block; padding: 0px; margin: 0}
.sub-menu li a{color: #fff; font-size: 12px; display: block; border-bottom:1px solid #ececec; }
li:hover .sub-menu {display: block;}
li.callAction{float: right; }
</style>
</head>
<body>
<div class="wrapper">
<h2>Navigation and Sub Menu Style 01</h2>
<!-- Navigation html Start -->
<nav class="redBg">
<ul>
<li class="active"><a href="javascript:void();">Home</a></li>
<li><a href="javascript:void();">About Us</a></li>
<li>
<a href="javascript:void();">Services ↓</a>
<ul class="sub-menu redBg">
<li><a href="javascript:void();">Sub Menu 01</a></li>
<li><a href="javascript:void();">Sub Menu 02</a></li>
<li><a href="javascript:void();">Sub Menu 03</a></li>
<li><a href="javascript:void();">Sub Menu 04</a></li>
</ul>
</li>
<li><a href="javascript:void();">Contact Us</a></li>
<li class="last callAction orangeBg"><a href="javascript:void();">Call to Action</a></li>
</ul>
</nav>
<!-- Navigation html ended -->
<h2>Navigation and Sub Menu Style 02</h2>
<!-- Navigation html Start -->
<nav class="blueBg">
<ul>
<li class="active"><a href="javascript:void();">Home</a></li>
<li><a href="javascript:void();">About Us</a></li>
<li>
<a href="javascript:void();">Services ↓</a>
<ul class="sub-menu blueBg">
<li><a href="javascript:void();">Sub Menu 01</a></li>
<li><a href="javascript:void();">Sub Menu 02</a></li>
<li><a href="javascript:void();">Sub Menu 03</a></li>
<li><a href="javascript:void();">Sub Menu 04</a></li>
</ul>
</li>
<li><a href="javascript:void();">Contact Us</a></li>
<li class="last callAction lightBlueBg"><a href="javascript:void();">Call to Action</a></li>
</ul>
</nav>
<!-- Navigation html ended -->
<h2>Navigation and Sub Menu Style 03</h2>
<!-- Navigation html Start -->
<nav class="orangeBg">
<ul>
<li class="active"><a href="javascript:void();">Home</a></li>
<li><a href="javascript:void();">About Us</a></li>
<li>
<a href="javascript:void();">Services ↓</a>
<ul class="sub-menu orangeBg">
<li><a href="javascript:void();">Sub Menu 01</a></li>
<li><a href="javascript:void();">Sub Menu 02</a></li>
<li><a href="javascript:void();">Sub Menu 03</a></li>
<li><a href="javascript:void();">Sub Menu 04</a></li>
</ul>
</li>
<li><a href="javascript:void();">Contact Us</a></li>
<li class="last callAction redBg"><a href="javascript:void();">Call to Action</a></li>
</ul>
</nav>
<!-- Navigation html ended -->
<h2>Navigation and Sub Menu Style 04</h2>
<!-- Navigation html Start -->
<nav class="greenBg">
<ul>
<li class="active"><a href="javascript:void();">Home</a></li>
<li><a href="javascript:void();">About Us</a></li>
<li>
<a href="javascript:void();">Services ↓</a>
<ul class="sub-menu greenBg">
<li><a href="javascript:void();">Sub Menu 01</a></li>
<li><a href="javascript:void();">Sub Menu 02</a></li>
<li><a href="javascript:void();">Sub Menu 03</a></li>
<li><a href="javascript:void();">Sub Menu 04</a></li>
</ul>
</li>
<li><a href="javascript:void();">Contact Us</a></li>
<li class="last callAction darkgreen"><a href="javascript:void();">Call to Action</a></li>
</ul>
</nav>
<!-- Navigation html ended -->
</div>
<!-- .wrapper html ended -->
</body>
</html>
how to create transparent nav bar?
ReplyDeleteits very easy to transparent you can change your nav bar background color like this: "background-color:transparent;" in css.
DeleteAlso if you want to show body background from nav bar transparent so you can use like this in css:
background-color: rgba(117, 190, 218, 0.0); /* 0.0 - fully transparent */
background-color: rgba(117, 190, 218, 0.5); /* 0.5 - semi-transparent */
background-color: rgba(117, 190, 218, 1.0); /* 1.0 - fully opaque */