При работе с крупным сайтом важно организовать продуманную структуру. Для это используется более сложное выпадающее меню, при наведении мыши или при клике на кнопку.
Подключите jQuery и скрипт common.js в head.
1 2 |
<script src="js/jquery-3.2.1.min.js"></script> <script src="js/common.js"></script> |
common.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
$(document).ready(function() { $('html').removeClass('no-js'); $('.menu-click a').on('click', function () { var el = $(this); el.parent().toggleClass('menu-active'); el.parent().siblings('.menu-click.menu-active').removeClass('menu-active'); }); }); |
Для отображения меню по наведению мыши необходимо добавить класс menu-hover к требуемой кнопки li.
Для отображения меню по клику мыши добавить класс menu-click.
В примере 1 и 2 кнопки работают по наведению, а 4 и 5 по клику.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<ul id="bar"> <li class="menu menu-hover"> <a href="#" class="button">Button 1</a> <ul class="submenu"> <li><a href="#">Menu item 1</a></li> <li><a href="#">Menu item 2</a></li> <li><a href="#">Menu item 3</a></li> <li><a href="#">Menu item 4</a></li> </ul> </li> <li class="menu menu-hover"> <a href="#" class="button">Button 2</a> <ul class="submenu"> <li><a href="#">Menu item 1</a></li> <li><a href="#">Menu item 2</a></li> <li><a href="#">Menu item 3</a></li> <li><a href="#">Menu item 4</a></li> </ul> </li> <li class="menu menu-hover"><a href="#" class="button">Button 3</a></li> <li class="menu menu menu-click"> <a href="#" class="button">Button 4</a> <ul class="submenu"> <li><a href="#">Menu item 1</a></li> <li><a href="#">Menu item 2</a></li> <li><a href="#">Menu item 3</a></li> <li><a href="#">Menu item 4</a></li> </ul> </li> <li class="menu menu-right menu-click"> <a href="#" class="button">Button 5</a> <ul class="submenu"> <li><a href="#">Menu item 1</a></li> <li><a href="#">Menu item 2</a></li> <li><a href="#">Menu item 3</a></li> <li><a href="#">Menu item 4</a></li> </ul> </li> </ul> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 |
#bar { background: #3F5883 -webkit-linear-gradient(top, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.25); height: 50px; list-style: none; margin: 20px auto; padding: 0 10px; width: 40%; } #bar > li { float: left; margin-right: 30px; position: relative; } #bar > li > a { color: #fff; display: block; font-weight: bold; margin-right: 0; padding: 15px 0; text-decoration: none; text-shadow: 0 -1px rgba(0, 0, 0, 0.25); -webkit-transition: all 0.25s; } .menu .submenu { background: #fff; border-radius: 0px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); left: -12px; list-style: none; margin: 0; opacity: 0; padding: 0; position: absolute; top: 38px; -webkit-transition: all 0.25s; transition: all 0.25s; visibility: hidden; width: 200px; } .no-js .menu:hover .submenu, .menu-hover:hover .submenu, .menu-click.menu-active .submenu { opacity: 1; top: 100%; visibility: visible; } .menu .submenu:before, .menu .submenu::before { border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid white; content: ""; height: 0; left: 24px; position: absolute; top: -6px; width: 0; } .menu .submenu li { border-bottom: 1px solid #EBEBEB; padding: 7px 10px; } .menu .submenu li:last-child { border-bottom: none; } .menu .submenu a { color: #777; display: inline-block; line-height: 1.2em; padding: 5px 0; text-decoration: none; } .menu .submenu a:hover { color: #3F5883; } .menu-right .submenu { left: auto; right: -12px; text-align: right; } .menu-right .submenu:before, .menu-right .submenu::before { left: auto; right: 24px; } |