Как работает меню
Данное выпадающее меню на jquery раскрывается по клику мыши на кнопку меню и закрывается при клике в любое место на странице, кроме самого раскрывшегося меню. Скрипт позволяет использовать на странице бесконечное множество таких меню. Данная структура уже стилизована, однако вы можете поменять стили на свой вкус. Если вы новичок в программировании, то можете просто разместить данные коды в соответствующие места или скачать архив с кодами, с уже готовыми подключениями.
Как подключить меню
1. Подключить библиотеку можно в теге <head></head> или перед закрывающимся тегом </body>, главное чтобы оно было выше чем подключен скрипт с меню. Подключение выглядит так:
|
1 |
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> |
2. Разместите следующий код в html-документе в тело сайта в тег <body></body>
html
|
1 2 3 4 5 6 7 8 |
<!-- Выпадающее меню --> <div class="hc_drop_menu"> <div class="hc_btn_drop">Меню</div> <div class="hc_body_drop"> <div class="hc_tre_drop"></div> Содержимое </div> </div> |
3. Далее подключите стили для выпадающего меню в отдельный файл и разместите в него следующий код
css
|
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 |
.hc_drop_menu{ position: relative; width: 100px; display: inline-block; } .hc_btn_drop{ color:white; background: gray; padding: 10px 15px; border-radius: 10px; cursor: default; text-align: center; user-select:none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } .hc_tre_drop{ position: absolute; top:-8px; left:40px; border-bottom: 8px solid white; border-left: 8px solid transparent; border-right: 8px solid transparent; } .hc_body_drop{ position: absolute; left: 0; padding: 10px 15px; background: white; box-shadow: 0 0 5px 0 rgba(0,0,0,0.3); width: 200px; height: 200px; border-radius: 10px; transform: scale(0); opacity: 0; margin-top: 10px; } .hc_drop_menu.active .hc_body_drop{ transform: scale(1); transition:opacity 0.5s, margin-top 0.3s; opacity: 1; margin-top: 0px; } .hc_drop_menu.active .hc_btn_drop{ background: green; } |
4. И наконец разместите данный javascript-код в отдельный файл и подключите его
javascript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
//Закрытие меню по клику на документ $(document).click(function() { $('.hc_drop_menu').removeClass('active'); }); //Отмена закрытия по клику на выпадающее меню $('.hc_body_drop').click(function(event){ event.stopPropagation(); }); //Клик по кнопке меню $('.hc_drop_menu').click(function(event){ if($(this).hasClass('active')){ $('.hc_drop_menu').removeClass('active'); }else{ $('.hc_drop_menu').removeClass('active'); $(this).addClass('active'); } event.stopPropagation(); }); |
Вы можете скачать архив с файлами.
Комментарии и отзывы
Ещё нет комментариев к данной записи...