Sunday, February 11, 2018

How To Create a Dropdown Navigation Bar Using CSS

In this tutorial, we are going to discuss how to create a Hoverable Dropdown Menu using CSS. Here we’ll take advantage of helpful CSS selectors to build a simple dropdown navigation menu.
How to Create a Simple CSS Dropdown Menu

How To Create a Hoverable Dropdown Menu :

Lets see the simple example to create a dropdown box that appears when the user moves the mouse over an element.
dropdown menu.html

<!DOCTYPE html>
<html>
<head>
<style>
body{
 background-color:#e5e5e5;
}

#main-container{
 width:600px;
 margin:0px auto;
} 
.menu {
    background-color: #ff6a80;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
 font-weight:bold;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
display: block;
}

.dropdown:hover .menu {
    background-color: #ff6a80;
}
</style>
</head>
<body>

<div id="main-container">
<h2>Dropdown Menu</h2>

<div class="dropdown"  >
  <button class="menu">Select Category</button>
  <div class="dropdown-content">
    <a href="#">Javascript</a>
    <a href="#">Jquery</a>
    <a href="#">PHP</a>
 <a href="#">Java</a>
 <a href="#">Reactjs</a>
 <a href="#">Android</a>
  </div>
</div>

</div>


</body>
</html>

Download Link :
https://github.com/skptricks/php-Tutorials/tree/master/How%20To%20Create%20a%20Dropdown%20Navigation%20Bar%20Using%20CSS

Demo Link :
https://skptricks.github.io/learncoding/how-to-create-dropdown-navigation-bar-using-css/dropdown%20menu.html

This is all about HTML Drop Down Menu Bar Using CSS. Hope you like this tutorial.


No comments:

Post a Comment