Online: 2523
Online: 2523
Online: 2523
The list of items that appear when clicking on a button or text selection. For example, many programs have a "File" drop down menu at the top left of their screen. Clicking on the "File" text generates a new menu with additional options.
To create dropdown menu we use position and display properties for creating dropdown menu
<style>
.dropdown {
position:relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: relative;
padding: 10px 6px 2px 10px ;
}
.dropdown:hover .dropdown-content {
display: block;
color:white;
background-color:green;
}
</style>
</head>
<body>
<p><i>Simple dropdown menu</i></p>
<div class="dropdown">
<span>Place mouse here</span>
<div class="dropdown-content">
<p>TechFunda</p>
</div>
</div>
</body>
In the above code snippet we have defined dropdown menu by using display property and position properties, we have dropdown, dropdown content and dropdown hover with different properties and in the main function we are div section which we have given the dropdown to the div tag by using class attribute, we are having another div in the div section which we have given dropdown content in the div section calls the properties in the dropdown content
output
We can create dropdown menu by using different css properties
<style>
.dropbtn {
background-color: green;
color: white;
padding: 20px;
font-size: 20px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: pink;
min-width: 140px;
}
.dropdown-content a {
color: orange;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: red;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color:magenta;
}
</style>
</head>
<body>
<h2>Dropdown Menu</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<div class="dropdown">
<button class="dropbtn">TechFunda</button>
<div class="dropdown-content">
<a href="#">AngularJS</a>
<a href="#">JavaScript</a>
<a href="#">CSS</a>
</div>
</div>
</body>
In the above code snippet we have definded dropdown menu by using different css properties, we have defined dropdown menu by using content, hover, dropbutton and dropdown, we have given dropdown to the div section which specifies for the entire div section, in the nextline we are having button to create dropdown by giving dropbtn in the button and in the nextline we are having div section which we have given the dropdown content to the div section by giving different values in the <a> tag
output
By using float property in the dropdown we can move the button of dropdown to left and right side
<style>
.dropbtn {
background-color: green;
color: black;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
right: 0;
background-color: pink;
min-width: 160px;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: red;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: orange;
}
</style>
</head>
<body>
<p><i>Dropdown menu with right and left side</i></p>
<div class="dropdown" style="float:left;">
<button class="dropbtn">DotNetFunda</button>
<div class="dropdown-content" style="left:0;">
<a href="#">Articles</a>
<a href="#">Forums</a>
<a href="#">Codes</a>
</div>
</div>
<div class="dropdown" style="float:right;">
<button class="dropbtn">TechFunda</button>
<div class="dropdown-content">
<a href="#">AngularJs</a>
<a href="#">JavaScript</a>
<a href="#">HTML5</a>
</div>
</div>
</body>
In the above code snippet we have defined dropdown menu with float, we have created two dropdown buttons using css properties dropdown cointent, drpbtn, hover, a, we used float to move the dropdown button to the left and we have used float right to move the dropdown button to right
output
We can create images to drop down in the list '
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: white;
min-width: 160px;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<h2>Dropdown Image</h2>
<div class="dropdown">
<img src="download (1).png" />
<div class="dropdown-content">
<img src="download (2).png" />
</div>
</div>
</body>
In the above code snippet we have created images in the dropdown menu, we used dropdown, dropdown content, hover, to create images in the dropdonw menu, in the first step we createda div section and we have given the dropdown to the div section, in that div section we have image and we created another div in that div section and we have given the dropdown content to the div section and we have given the image in the div section when the mouse is placed on the first image the second image which we have given displays in the dropdown menu
output
We can create dropdown nav bar using css properties
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: green;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color:pink;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: limegreen;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<p><i>Dropdown Navbar</i></p>
<ul>
<li class="dropdown">
<a href="home" class="dropbtn">SNITFunda</a>
<div class="dropdown-content">
<a>Techfunda</a>
<a>DotNetFunda</a>
<a>ITFunda</a>
</div>
</li>
<li class="dropdown">
<a href="#news">DotNetFunda</a>
<div class="dropdown-content">
<a>Articles</a>
<a>Forums</a>
<a>Codes</a>
</div>
</li>
<li class="dropdown">
<a href="#" class="dropbtn">ITFunda</a>
<div class="dropdown-content">
<a href="#">Sales</a>
<a href="#">Offline</a>
<a href="#">Online</a>
</div>
</li>
</ul>
</body>
In the above code snippet we have created dropdown nav bar using css properties, we used ul, dropdown, dropdown content, dropbutton, dropdown content a, dropdown content hover, to create navbar, In the main function we are having the ul to define list items as SNitfunda, DotNetFunda and ITFunda, we have given the css properties to the following lists
Output
