Jquery DropDown
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Dropdown Menu</title> | |
| <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> | |
| <style> | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| font-family: 'Open Sans', sans-serif; | |
| } | |
| nav { | |
| margin: 100px 255px; | |
| } | |
| nav ul { | |
| list-style: none; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| nav li { | |
| float: left; | |
| width: 160px; | |
| height: 40px; | |
| background-color: midnightblue; | |
| line-height: 40px; | |
| text-align: center; | |
| position: relative; | |
| } | |
| nav li a { | |
| display: block; | |
| width: 100%; | |
| height: 100%; | |
| text-decoration: none; | |
| color: white; | |
| border: 1px solid lightgrey; | |
| } | |
| nav li a:hover { | |
| background-color: lightseagreen; | |
| } | |
| nav ul.sub { | |
| position: absolute; | |
| display: none; | |
| } | |
| nav ul.sub li ul.sub { | |
| top:0; | |
| left: 160px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <nav> | |
| <h1>Dropdown Menu</h1> | |
| <ul class="main"> | |
| <li> | |
| <a href="#">A</a> | |
| <ul class="sub"> | |
| <li><a href="#">A-1</a></li> | |
| <li> | |
| <a href="#">A-2</a> | |
| <ul class="sub"> | |
| <li><a href="#">A-2-1</a></li> | |
| <li><a href="#">A-2-2</a></li> | |
| <li> | |
| <a href="#">A-2-3</a> | |
| <ul class="sub"> | |
| <li><a href="#">A-2-3-1</a></li> | |
| <li><a href="#">A-2-3-2</a></li> | |
| <li><a href="#">A-2-3-3</a></li> | |
| </ul> | |
| </li> | |
| </ul> | |
| </li> | |
| <li><a href="#">A-3</a></li> | |
| </ul> | |
| </li> | |
| <li> | |
| <a href="#">B</a> | |
| <ul class="sub"> | |
| <li><a href="#">B-1</a></li> | |
| <li><a href="#">B-2</a></li> | |
| <li><a href="#">B-3</a></li> | |
| </ul> | |
| </li> | |
| <li> | |
| <a href="#">C</a> | |
| <ul class="sub"> | |
| <li><a href="#">C-1</a></li> | |
| <li> | |
| <a href="#">C-2</a> | |
| <ul class="sub"> | |
| <li><a href="#">C-2-1</a></li> | |
| <li><a href="#">C-2-2</a></li> | |
| </ul> | |
| </li> | |
| <li><a href="#">C-3</a></li> | |
| </ul> | |
| </li> | |
| <li> | |
| <a href="#">D</a> | |
| <ul class="sub"> | |
| <li><a href="#">D-1</a></li> | |
| <li><a href="#">D-2</a></li> | |
| <li><a href="#">D-3</a></li> | |
| </ul> | |
| </li> | |
| <li> | |
| <a href="#">E</a> | |
| <ul class="sub"> | |
| <li><a href="#">E-1</a></li> | |
| <li><a href="#">E-2</a></li> | |
| <li><a href="#">E-3</a></li> | |
| </ul> | |
| </li> | |
| </ul> | |
| </nav> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> | |
| <script> | |
| $(function(){ | |
| $(".main li").hover( | |
| function(){ | |
| //$('ul.sub', this).slideDown(500); | |
| //$('>ul.sub', this).slideDown(500); | |
| $('>ul.sub:not(:animated)', this).slideDown(500); | |
| }, | |
| function(){ | |
| //$('ul.sub',this).slideUp(300); | |
| $('>ul.sub',this).slideUp(300); | |
| } | |
| ); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |
Comments
Post a Comment