Мобильное меню делается очень просто. Я делал по примеру разработчиков YooTheme. Для начала нужно создать позицию, которая будет выезжать по клику на «Гамбургер». Назовем ее «offcanvas».
Вот примерно как выглядит этот код в
index.php шаблона. Этот кусок должен находится внутри <body>:
<?php if ($this->countModules('offcanvas')) : ?>
<div class="main-offcanvas">
<jdoc:include type="modules" name="offcanvas" />
</div>
<?php endif; ?>
Не забыть прописать позицию в
templateDetails.xml!
Далее, задаем стили для offcanvas'а в CSS. Я писал на LESS, перевести в CSS не составит труда, так что учтите это
/* ==========================================================================
Offcanvas
========================================================================== */
.main-offcanvas {
display: none;
width: 300px;
height: auto;
position: fixed;
z-index: 1050;
top: 0;
left: -320px;
bottom: 0;
overflow-y: auto;
border-right: 1px solid #949494;
background: #434343;
color: #fff;
transition: all 300ms;
.menu {
padding: 0;
margin: 0;
margin-bottom: 20px;
list-style: none;
a,
.separator {
display: block;
padding: 10px 20px;
text-decoration: none;
color: #fff;
border-bottom: 1px solid #696969;
&:hover,
&.active {
background: #696969;
}
}
.active,
.current {
& > a,
& > .separator {
background: #696969;
}
}
.separator {
&.parent {
&:after {
content: "";
display: inline-block;
position: relative;
top: -2px;
margin-left: 10px;
background: url("../images/arrow-down-white.png") no-repeat center;
width: 9px;
height: 5px;
}
&.active {
&:after {
background-image: url("../images/arrow-up-white.png");
}
}
}
}
ul {
list-style: none;
margin: 0;
padding: 0;
a {
padding-left: 30px;
}
}
}
&.active {
transition: all 300ms;
}
}
Добавляем @media queries, чтобы наш offcanvas был виден только на мелких дисплеях:
@media all and (max-width: 1023px) {
.main-offcanvas {
display: block;
&.active {
left: 0;
}
}
}
Теперь JS часть. Добавляем 2 функции, которые будут показывать и скрывать offcanvas.
function showMobileMenu() {
jQuery('.main-offcanvas').addClass('active');
jQuery('[data-offcanvas]').addClass('active');
function hideEvent(e) {
if(!jQuery(e.target).closest('.main-offcanvas').length) {
hideMobileMenu();
jQuery(document).off('click', 'body', hideEvent);
}
}
jQuery(document).on('click', 'body', hideEvent);
}
function hideMobileMenu() {
jQuery('.main-offcanvas').removeClass('active');
jQuery('[data-offcanvas]').removeClass('active');
}
И повесим событие на все элементы с аттрибутом
data-offcanvas, для удобства (кнопка гамбургера)
jQuery('[data-offcanvas]').click(function(){
if (jQuery(this).hasClass('active')) {
hideMobileMenu();
} else {
showMobileMenu();
}
return false;
});
Ну и небольшая вишенка, которая делает аккордеон для пунктов меню разделителей:
jQuery('.main-offcanvas .separator').each(function() {
var navChild = jQuery(this).siblings('.nav-child');
console.log(navChild.length);
if (navChild.length > 0) {
jQuery(this).addClass('parent');
navChild.hide();
}
jQuery(this).click(function() {
if (jQuery(this).hasClass('active')) {
jQuery(this).removeClass('active');
navChild.slideUp();
} else {
jQuery(this).addClass('active');
navChild.slideDown();
}
});
});
26.03.2025, 19:26:30