|
12 | 12 | body { |
13 | 13 | font-family: 'Open Sans', sans-serif; |
14 | 14 | padding: 25px; |
| 15 | + background: #fff; |
15 | 16 | } |
16 | 17 | </style> |
17 | 18 | </head> |
18 | 19 | <body> |
| 20 | + <div class="scrollbar"></div> |
19 | 21 | <div class="row"> |
20 | 22 | <div class="four columns"> |
21 | 23 | <h2>CSS UI - Dropdown menu</h2> |
22 | 24 | <div class="dropdown"> |
23 | 25 |
|
24 | 26 | <!-- dropdown menu click --> |
25 | | - <div class="clear"> |
26 | | - <a class="employ-toggle click float right" href="#"> |
27 | | - <i class="fa fa-ellipsis-v" aria-hidden="true"></i> |
28 | | - </a> |
29 | | - </div> |
| 27 | + <div class="clear"> |
| 28 | + <a class="employ-toggle click float right" href="#"> |
| 29 | + <i class="fa fa-ellipsis-v" aria-hidden="true"></i> |
| 30 | + </a> |
| 31 | + </div> |
| 32 | + |
| 33 | + <!-- show/hide menu --> |
| 34 | + <ul class="expand-dropdown"> |
| 35 | + <li><a href="#" class="top"><i class="fa fa-user-o" aria-hidden="true"></i>Profile</a></li> |
| 36 | + <li><a href="#" class="bottom"><i class="fa fa-sign-out" aria-hidden="true"></i>Logout</a></li> |
| 37 | + </ul> |
| 38 | + </div> |
30 | 39 |
|
31 | | - <!-- show/hide menu --> |
32 | | - <ul class="expand-dropdown"> |
33 | | - <li><a href="#" class="top">One</a></li> |
34 | | - <li><a href="#">Two</a></li> |
35 | | - <li><a href="#" class="bottom">Three</a></li> |
36 | | - </ul> |
37 | 40 | </div> |
38 | 41 | </div> |
39 | 42 | </div> |
40 | 43 |
|
41 | 44 | <!-- javascript libraries and plugins --> |
42 | 45 | <script src="../www/js/main.min.js"></script> |
43 | | - <script> |
44 | | - $(function() { |
45 | | - $('.employ-toggle').on('click', function() { |
46 | | - var dropdown = '.expand-dropdown'; |
47 | | - $(dropdown).fadeToggle('fast'); |
48 | | - $(dropdown).on('click', function(e) { |
49 | | - var target = e.target; |
50 | | - var employ = '.employ-toggle'; |
51 | | - if (!$(target).is(employ) && !$(target).parents().is(employ)) { |
52 | | - $(dropdown).hide(); |
53 | | - } |
54 | | - }); |
55 | | - }); |
56 | | - }); |
57 | | - </script> |
| 46 | + <script src="../www/js/dropdown.menu.js"></script> |
58 | 47 | </body> |
59 | 48 | </html> |
0 commit comments