CSS | DropDowns
Dropdowns are one of the most important parts of an interactive website. CSS is used to design the drop-down menus. A drop-down is a bunch of lists under an unordered list i.e. <ul> as it is popularly known in HTML world. Nested list (<li>) tags under the <ul> tag used to create drop-down structure. To bring out the effects use CSS for the components present in the structure. The CSS is very straightforward property used to create the drop-down menu.
<!DOCTYPE html><html> <head> <title>Dropdown property</title> </head> <body> <nav> <ul> <li class="Lev-1"> <a href="">Level-1</a> <ul> <li><a href="">Link 1</a></li> <li><a href="">Link 2</a></li> <li><a href="">Link 3</a></li> <li><a href="">Link 4</a></li> </ul> </li> </ul> </nav> </body></html> |
Output:
Example: Adding CSS property in HTML structure to create interactive drop-down structure.
<!DOCTYPE html><html> <head> <title>Navigation property</title> <style> a { color: white; background-color:#990; text-decoration: none; } nav{ background: #333; } nav >ul{ margin: 0 auto; width: 80px; } nav ul li{ display: block; float: left; margin-left:-40px; position: relative; } nav ul a{ display: block; float: left; width: 150px; padding: 10px 20px; } nav ul a:hover{ background: #090; } nav ul li ul li{ float: none; } nav ul li ul{ display: none; position: absolute; background: #333; top: 42px; } nav ul li:hover>ul{ display: block; } nav ul li a{ display: block; } .gfg { font-size:40px; font-weight:bold; color:#009900; Text-align:center; } p { font-size:20px; font-weight:bold; text-align:center; } </style> </head> <body> <div class="gfg">GeeksforGeeks</div> <p>Dropdown Navigation property</p> <nav> <ul> <li class="Lev-1"> <a href="">Level-1</a> <ul> <li><a href="">Link 1</a></li> <li><a href="">Link 2</a></li> <li><a href="">Link 3</a></li> <li><a href="">Link 4</a></li> </ul> </li> </ul> </nav> </body></html> |
Output:
The above-written code producing a proper output on the basis of a drop-down structure. Important parts of HTML code are discussed below:
- nav is the outermost container
- nav ul li ul li – float is set to none so that it remains intact when we hover over it.
- Use relative position so that li moves or changes its position relative to its component.
- Use ‘>’ after hover to see the effect of hover on the immediate next ul of the li.
Right-aligned Dropdown: Right aligned dropdown is a dropdown that float value is right to display drop-down content on the right screen. Add float right to the div which holds the content.
<!DOCTYPE html><html> <head> <title>right-aligned dropdown content property</title> <style> #drop { background-color: teal; color: white; padding: 10px; font-size: 16px; width: : 200px; height: : 60px; border-radius: 5px; font-size: 20px; } #drop-down { position: relative; display: inline-block; } #dropdown-menu { display: none; position: absolute; background-color: #666; width: 160px; margin-left:-45px; border-radius: 5px; z-index: 1; } #dropdown-menu a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .gfg { font-size:40px; font-weight:bold; color:#009900; Text-align:center; } p { font-size:20px; font-weight:bold; text-align:center; } #dropdown-menu a:hover {background-color: #ddd;} #drop-down:hover #dropdown-menu {display: block;} </style> </head> <body> <div class="gfg">GeeksforGeeks</div> <p>Right-aligned Dropdown content property</p> <div id="drop-down" style=" float: right; margin-right: 70px;"> <button id="drop">DropDown</button> <div id="dropdown-menu"> <a href="">Item 1</a> <a href="">Item 2</a> <a href="">Item 3</a> <a href="">Item 4</a> </div> </div> </body></html> |
Output:
Image Dropdown: It is not a dropdown but enlarges the image on which you hover. Needs basic CSS and an image to make it work.
Example:
<!DOCTYPE html><html> <head> <title>Image Dropdown</title> <style> .dropmenu { position: relative; display: inline-block; margin-left:150px; } .sub-dropmenu { display: none; position: absolute; } .dropmenu:hover .sub-dropmenu { display: block; } .enlarge { padding: 15px; text-align: center; } .gfg { margin-left:40px; font-size:30px; font-weight:bold; } </style> </head> <body> <div class = "gfg">Image Dropdown property</div> <div class="dropmenu"> width="150" height="50" align="middle"> <div class="sub-dropmenu"> width="600" height="200"> </div> </div> </body></html> |
Output:
Clicked Drop-downs: This requires basic understanding of JavaScript as it is used to run some functions to make the clicked drop-down work.
Example:
<!DOCTYPE html><html> <head> <title>clicked dropdown</title> <style type="text/css"> button { background: #009900; width: 200px; height: 60px; color: white; border: 1px solid #fff; font-size: 20px; border-radius: 5px; } ul li { list-style: none; } ul li a { display: block; background: #c99; width: 200px; height: 50px; text-decoration: none; text-align: center; padding: 10px; border-radius: 5px; text-align: center; color: white; font-size: 25px; } ul li a { text-decoration: none; } ul li a:hover { background: #009900; } .open {display: none;} .gfg { font-size:40px; font-weight:bold; color:#009900; Text-align:center; } p { font-size:20px; font-weight:bold; text-align:center; } </style> <script type="text/javascript"> function open_menu(){ var clicked= document.getElementById('drop-menu'); if(clicked.style.display=='block') { clicked.style.display='none'; } else{ clicked.style.display='block'; } } </script> </head> <body> <div class="gfg">GeeksforGeeks</div> <p>Clicked Dropdown content property</p> <div id="dropdown"> <button onclick="open_menu()">Click Me!</button> <div class="open" id="drop-menu"> <ul> <li><a href="">Item-1</a></li> <li><a href="">Item-2</a></li> <li><a href="">Item-3</a></li> <li><a href="">Item-4</a></li> </ul> </div> </div> </body> </html> |
Output:
Note: Some important highlights of the code:
- The javascript function will expand and collapse the menu when the button “Click Me” is clicked.
- We use onclick to call the javascript function in the button tag.
Please Login to comment...