ITSourceCode.com

We Exist to Provide 100% Free Source Code and Tutorials

Custom Search

24-CSS Drop Down Properties

Dropdown Property– This property is extensively used in CSS.The basic use of this when a user takes the cursor over a particular then it shows all the information regarding that topic or a word.

To understand it more clearly I have presented a very basic Dropdown code

Example:-

 

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .drop {
  6.   position: relative;
  7.   display: inline-block;
  8. }
  9.  
  10. .drop-content {
  11.   display: none;
  12.   position: absolute;
  13.   background-color: #f9f9f9;
  14.   min-width: 180px;
  15.   box-shadow: 0px 10px 18px 0px rgba(0,0,0,0.2);
  16.   padding: 10px 14px;
  17. }
  18.  
  19. .drop:hover .drop-content {
  20.   display: block;
  21. }
  22. </style>
  23. </head>
  24. <body>
  25.  
  26. <h1> It’s a Hoverable Dropdown</h1>
  27. <p>point the mouse to the text below to open the given dropdown content.</p>
  28.  
  29. <div class="drop">
  30.   <span>Mouse here</span>
  31.   <div class="dropdown-content">
  32.   <p>Magic Begins!!</p>
  33.   </div>
  34. </div>
  35.  
  36. </body>
  37. </html>

Not only this but the Unique way of using this drop-down menu which you can see on almost all the newly build websites.
[bha size=’620×203′ variation=’01’ align=’none’] Here I have presented another different approach to use dropdown property.

Example:

 

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .drop {
  6.   background-color: #4CAF50;
  7.   color: white;
  8.   padding: 20px;
  9.   font-size: 20px;
  10.   border: none;
  11.   cursor: pointer;
  12. }
  13.  
  14. .dropdown {
  15.   position: relative;
  16.   display: inline-block;
  17. }
  18.  
  19. .dropdown-content {
  20.   display: none;
  21.   position: absolute;
  22.   background-color: #f9f9f9;
  23.   min-width: 180px;
  24.   box-shadow: 0px 10px 18px 0px rgba(0,0,0,0.2);
  25. }
  26.  
  27. .dropdown-content a {
  28.   color: black;
  29.   padding: 10px 14px;
  30.   text-decoration: none;
  31.   display: block;
  32. }
  33.  
  34. .dropdown-content a:hover {background-color: #f1f1f1}
  35.  
  36. .dropdown:hover .drop-content {
  37.   display: block;
  38. }
  39.  
  40. .dropdown:hover .drop {
  41.   background-color: #3e8e41;
  42. }
  43. </style>
  44. </head>
  45. <body>
  46.  
  47. <h2>Dropdown Menu</h2>
  48. <p>Move the mouse over the button to open the dropdown menu.</p>
  49.  
  50. <div class="dropdown">
  51.   <button class="dropbtn">Dropdown</button>
  52.   <div class="dropdown-content">
  53.   <a href="https://itsourcecode.com">Link 1</a>
  54.   <a href=" https://itsourcecode.com ">Link 2</a>
  55.   <a href=" https://itsourcecode.com ">Link 3</a>
  56.   </div>
  57. </div>
  58. </body>
  59. </html>

This way you can create any sort of menu to make a better web page.

Facebook Comments

Check Your Domain Ranking

Leave a Reply

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

ITSourceCode.com © 2016 Frontier Theme

Subscribe For Latest Updates

Signup for our newsletter and get notified when we publish new articles for free!