Instantly share code, notes, and snippets.
-
Star
(0)
0
You must be signed in to star a gist -
Fork
(0)
0
You must be signed in to fork a gist
-
Save YakovSPb/2f2350757cff200ad032d580a0daed52 to your computer and use it in GitHub Desktop.
mmenu - меню
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//1 БЫСТРОЕ МЕНЮ | |
//БЫСТРОЕ МОБИЛЬНОЕ МЕНЮ// | |
HTML | |
<a class="gumburger"><i class="fa fa-bars"></i></a> | |
делаем дубликат меню ul и добавляем класс m-menu перед body | |
и делаем первым в списке пункт | |
<li class="close-menu">×</li> | |
CSS | |
/скрываем меню | |
.top_menu | |
display: none | |
//Mobile menu// | |
.gumburger | |
display: none | |
position: fixed | |
right: 30px | |
top: 20px | |
font-size: 30px | |
cursor: pointer | |
.m-menu | |
margin: 0 | |
position: fixed | |
right: 0 | |
top: 0 | |
height: 100vh | |
width: 100% | |
display: flex | |
flex-direction: column | |
align-items: center | |
justify-content: center | |
list-style-type: none | |
font-size: 30px | |
line-height: 60px | |
background-color: #960794 | |
z-index: 1000 | |
transform: translateX(100%) | |
transition: .5s ease | |
a | |
color: #fff | |
text-decoration: none | |
.m-menu__active | |
transform: translateX(0) | |
.close-menu | |
position: fixed | |
right: 30px | |
top: 25px | |
margin: 0 | |
font-size: 50px | |
font-weight: 900 | |
cursor: pointer | |
@media only screen and (max-width : 1200px) | |
.top_menu | |
display: none | |
.gumburger | |
display: block | |
JS | |
const link = document.getElementsByClassName('gumburger') | |
const close = document.getElementsByClassName('menu__item--close') | |
const menu = document.getElementsByClassName('menu') | |
link[0].addEventListener('click', event => { | |
event.preventDefault() | |
menu[0].classList.add('menu--active') | |
link[0].style.display = 'none' | |
}) | |
close[0].addEventListener('click', event => { | |
event.preventDefault() | |
menu[0].classList.remove('menu--active') | |
link[0].style.display = 'block' | |
}) | |
// jQUERY | |
// const link = $('.gumburger'); | |
// const close = $('.close-menu'); | |
// const menu = $('.m-menu'); | |
// link.on('click', function(event){ | |
// event.preventDefault(); | |
// menu.toggleClass('m-menu__active') | |
// }); | |
// close.on('click', function(event){ | |
// event.preventDefault(); | |
// menu.toggleClass('m-menu__active') | |
// }); | |
////////////////ГАМБУРГЕР\\\\\\\\\\\\\ | |
1. npm i hamburgers | |
2. Подключаем стили | |
@import "hamburgers/_sass/hamburgers/hamburgers.scss" | |
2. Выбираем https://jonsuh.com/hamburgers/ | |
3. Вставляем в правом верхнем углу | |
<a href="#my-menu" class="hamburger hamburger--emphatic"> | |
<span class="hamburger-box"><span class="hamburger-inner"></span></span> | |
</a> | |
4. Пишем стили | |
.hamburger | |
position: absolute | |
top: 12px | |
right: 10px | |
.hamburger-inner, .hamburger-inner::after, .hamburger-inner::before | |
background-color: #fff | |
////////////////Mmenu////////////////////// | |
1. bower i mmenu | |
2. js подключаем в gulpfile.js | |
'app/libs/jQuery.mmenu/dist/jquery.mmenu.all.js' | |
3. css подключаем в libs.sass | |
@import '../libs/jQuery.mmenu/dist/jquery.mmenu.all.css' | |
4. Заходим в документацию | |
https://mmenujs.com/tutorials/off-canvas/the-page.html | |
5. Пишем в Js | |
var windowWidth = $(window).width(); | |
if(windowWidth < 1200){ | |
$('#my-menu').mmenu({ | |
extensions: ['theme-black', 'effect-menu-slide', 'pagedim-black', 'position-right'], | |
navbar: { | |
title: '<div class="logo">Gustoso</div>' | |
} | |
}); | |
} | |
var api = $("#my-menu").data("mmenu"); | |
api.bind('open:finish', function () { | |
$('.hamburger').toggleClass('is-active'); | |
}).bind('close:finish', function () { | |
$('.hamburger').removeClass('is-active'); | |
}); | |
6. Пишем стили | |
//Mobile menu | |
.hamburger | |
position: absolute | |
display: none | |
top: 12px | |
right: 10px | |
z-index: 10 | |
.hamburger-inner, .hamburger-inner::after, .hamburger-inner::before | |
background-color: #fff | |
.hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::after, .hamburger.is-active .hamburger-inner::before | |
background-color: #fff | |
.mm-navbar | |
position: relative | |
border: none | |
.mm-navbar__title | |
padding: 0 | |
.logo | |
color: #ffffff | |
line-height: 40px | |
margin-bottom: 20px | |
.mm-panel::after, .mm-panel::before | |
height: 0 | |
.mm-panels > .mm-panel > .mm-listview:first-child, .mm-panels > .mm-panel > .mm-navbar + .mm-listview | |
margin: 0 | |
html.mm-opened | |
overflow-y: scroll | |
.mm-panels > .mm-panel.mm-hasnavbar | |
right: -18px | |
.mm-listitem::after | |
display: none | |
.mm-panels, .mm-panels > .mm-panel | |
top: -15px | |
.mm-panel | |
padding: | |
left: 0 | |
right: 0 | |
.mm-listview | |
> li | |
> a | |
padding: | |
left: 10% | |
right: 10% | |
top: 5px | |
&::before | |
content: '\f005' | |
font-family: 'FontAwesome' | |
margin-right: 20px | |
color: #ffffff | |
&.active | |
&>a | |
color: $accent | |
.mm-panels > .mm-panel > .mm-listview:first-child, .mm-panels > .mm-panel > .mm-navbar + .mm-listview | |
margin-top: 30px | |
//END MOBILE MENU// | |
////////////////////ЕЩЕ МЕНЮ | |
https://codepen.io/CreativeJuiz/pen/oCBxz | |
1.Вставляем кнопку <a href="#" class="toggle-mnu hidden-md hidden-lg"><span></span></a> | |
2. Вставляем js | |
$(".toggle-mnu").click(function () { | |
$(this).toggleClass("on"); | |
$(".line-menu").slideToggle(); | |
}); | |
3. Пишем стили | |
.toggle-mnu | |
display: block | |
position: absolute | |
right: 30px | |
top: 10px | |
float: right | |
color: red | |
padding: 10px 6px | |
width: 40px | |
height: 40px | |
.toggle-mnu span:after, | |
.toggle-mnu span:before | |
content: "" | |
position: absolute | |
left: 0 | |
top: -9px | |
.toggle-mnu span:after | |
top: 9px | |
.toggle-mnu span | |
position: relative | |
display: block | |
.toggle-mnu span, | |
.toggle-mnu span:after, | |
.toggle-mnu span:before | |
width: 100% | |
height: 5px | |
background-color: #888 | |
transition: all 0.3s | |
backface-visibility: hidden | |
border-radius: 2px | |
.toggle-mnu.on span | |
background-color: transparent | |
.toggle-mnu.on span:before | |
transform: rotate(45deg) translate(5px, 5px) | |
.toggle-mnu.on span:after | |
transform: rotate(-45deg) translate(7px, -8px) | |
.toggle-mnu.on + #menu | |
opacity: 1 | |
visibility: visible | |
------------------ | |
1. Подключаем меню плагином | |
пишем в комстроке | |
bower i superfish | |
2. В libs.sass пишем | |
@import "../app/libs/superfish/dist/css/superfish" | |
Мобильное меню | |
1. https://gist.github.com/ramzs/65ee2174c1aa17208bc3#file-mobile-menu-toggle-button-markdown | |
2. пишем в комстроке bower i mmenu | |
https://mmenu.frebsite.nl/tutorials/off-canvas/ | |
3. Удаляем все в jQuery.mmenu кроме папки dist | |
4. подключаем в libs.sass @import "../app/libs/jQuery.mmenu/dist/jquery.mmenu.all.css" | |
5. В gulpfile подключаем './app/libs/jQuery.mmenu/dist/jquery.mmenu.all.js', | |
// HTML MENU | |
<nav class="menu header__menu"> | |
<ul class="menu__list"> | |
<li class="menu__item menu-item--close"><img src="img/cross_icon.svg" alt=""></li> | |
<li class="menu__item menu__item--hassubmenu"><a class="menu__link" href="">О центре</a> | |
<ul class="menu__submenu"> | |
<li class="menu__sub-item"><a class="menu__sub-link" href="">История</a></li> | |
<li class="menu__sub-item"><a class="menu__sub-link" href="">Структура</a></li> | |
<li class="menu__sub-item"><a class="menu__sub-link" href="">Документы</a></li> | |
<li class="menu__sub-item"><a class="menu__sub-link" href="">Реквизиты</a></li> | |
<li class="menu__sub-item"><a class="menu__sub-link" href="">Благодарственные письма</a></li> | |
<li class="menu__sub-item"><a class="menu__sub-link" href="">Профсоюзная организация</a></li> | |
<li class="menu__sub-item"><a class="menu__sub-link" href="">Работа и стажировка</a></li> | |
<li class="menu__sub-item"><a class="menu__sub-link" href="">Область акредитации</a></li> | |
</ul> | |
</li> | |
<li class="menu__item menu__item--hassubmenu menu__item--active"><a class="menu__link" href="">Услуги</a> | |
<ul class="menu__submenu"> | |
<li class="menu__sub-item"><a class="menu__sub-link" href="">Метрология</a></li> | |
<li class="menu__sub-item"><a class="menu__sub-link" href="">Испытания</a></li> | |
<li class="menu__sub-item"><a class="menu__sub-link" href="">Подтверждение соответствия</a></li> | |
<li class="menu__sub-item"><a class="menu__sub-link" href="">Аттестация испытательного оборудования</a></li> | |
<li class="menu__sub-item"><a class="menu__sub-link" href="">Оценка состояния измерений</a></li> | |
<li class="menu__sub-item"><a class="menu__sub-link" href="">Производство стандартных образцов</a></li> | |
<li class="menu__sub-item"><a class="menu__sub-link" href="">Узлы учета энергоресурсов</a></li> | |
<li class="menu__sub-item"><a class="menu__sub-link" href="">Межлабораторные сличительные испытания</a></li> | |
<li class="menu__sub-item"><a class="menu__sub-link" href="">Иструментальный контроль технического состояния изделий медицинской техники</a></li> | |
<li class="menu__sub-item"><a class="menu__sub-link" href="">Ремонт оптико-механических приборов</a></li> | |
</ul> | |
</li> | |
<li class="menu__item"><a class="menu__link" href="">Конкурсы</a></li> | |
<li class="menu__item"><a class="menu__link" href="">Новости</a></li> | |
<li class="menu__item menu__item--hassubmenu"><a class="menu__link" href="">Обратная связь</a> | |
<ul class="menu__submenu"> | |
<li class="menu__sub-item"><a class="menu__sub-link" href="">FAQ</a></li> | |
<li class="menu__sub-item"><a class="menu__sub-link" href="">Жалобы, предложения</a></li> | |
</ul> | |
</li> | |
<li class="menu__item"><a class="menu__link" href="">Контакты</a></li> | |
<li class="menu__item menu__item--social"> | |
<a class="menu__link menu__item--social_link" href=""><img src="img/phone_icon.svg" alt=""></a> | |
<a class="menu__link menu__item--social_link" href=""><img src="img/email_icon.svg" alt=""></a> | |
</li> | |
</ul> | |
</nav> | |
//CSS | |
// HEADER MENU | |
.menu-item--close | |
display: none | |
.menu | |
font-size: 18px | |
font-weight: 700 | |
&__item--active | |
.menu__link | |
background: $accent | |
color: #fff | |
&__list | |
list-style-type: none | |
display: -webkit-flex | |
display: -moz-flex | |
display: -ms-flex | |
display: -o-flex | |
display: flex | |
padding-left: 0 | |
&__item | |
padding: 23px 5px 28px 5px | |
position: relative | |
&:hover | |
.menu__submenu | |
display: block | |
&__link | |
padding: 5px 8px | |
border-radius: 10px | |
color: $accent | |
text-transform: uppercase | |
transition: .3s all ease | |
&:hover | |
text-decoration: none | |
background: $accent | |
color: #fff | |
&__submenu | |
position: absolute | |
width: 207px | |
top: 55px | |
left: 5px | |
background-color: $gray | |
border-radius: 10px | |
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25) | |
z-index: 1000 | |
list-style-type: none | |
padding: 10px 0 | |
&__sub-item | |
margin-left: 0 | |
margin-bottom: 10px | |
&:hover | |
display: block | |
&__submenu | |
display: none | |
&__sub-item | |
margin-bottom: 0 | |
padding: 0 9px | |
transition: all .3s ease | |
&:hover | |
background: $accent | |
color: #fff | |
.menu__sub-link | |
color: #fff | |
text-decoration: none | |
&__sub-link | |
text-transform: uppercase | |
color: $accent | |
font-size: 16px | |
display: block | |
transition: all .3s ease | |
======================================== | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment