Результат:
Рарзметка HTML:
Чанк adaptive_nav_tpl:
<li[[+classes]]>
[[+wrapper:isnot=``:then=`<div class="mobile_opener"></div>`]]
<a href="[[+link]]" [[+attributes]]><span>[[+menutitle]]</span></a>
[[+wrapper]]
</li>
Высов сниппета и оберточный HTML
<div class="header_nav adaptive_nav">
<div class="adaptive_nav_toprow clearafter">
<div class="adaptive_nav_logo"><a href="#">Inline_logo_name</a></div>
<div class="adaptive_nav_trigger">
<div class="burger_title">
Навигация
</div>
<div class="burger">
<div class="burger_x"></div>
<div class="burger_y"></div>
<div class="burger_z"></div>
</div>
</div>
</div>
<div class="adaptive_nav_links">
[[!pdoMenu?
&parents=`0`
&level=`4`
&levelClass=`level`
&tpl=`adaptive_nav_tpl`
]]
</div>
</div>
Стили CSS:
.adaptive_nav {
margin-top: 10px;
}
.adaptive_nav li{
position: relative;
font-family: "Roboto","Open Sans",Arial;
}
@media (min-width: 992px) {
.adaptive_nav_toprow{
display: none;
}
.adaptive_nav li a {
display: inline-block;
white-space: nowrap;
color: #000;
text-decoration: none;
}
.adaptive_nav li a > span {
border-bottom: 1px solid rgba(0, 0, 0, 0.22);
}
.adaptive_nav li a:hover span{
border-bottom: 1px solid #000;
}
.adaptive_nav li.level1{
display: inline-block;
}
.adaptive_nav li.level1 > a{
padding: 10px 20px;
font-size: 16px;
}
.adaptive_nav li.level2 > a{
font-size: 14px;
padding: 5px 10px;
}
.adaptive_nav li.level2{
display: block;
}
.adaptive_nav li.level1 > ul{
/*display: block !important;*/
opacity: 0;
visibility: hidden;
position: absolute;
background: #fff;
border-radius: 3px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
margin: 0;
padding: 10px;
top: 80%;
-webkit-transition: all 0.25s;
transition: all 0.25s;
z-index: 99;
}
.adaptive_nav ul ul: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;
}
.adaptive_nav li.level1:hover > ul{
opacity: 1;
top: 100%;
visibility: visible;
}
.adaptive_nav li.level2 ul{
display: none;
}
.mobile_opener{
display: none;
}
}
@media (max-width: 991px) {
.adaptive_nav_links{
display: none;
}
.adaptive_nav a {
color: #000;
text-decoration: none;
}
.adaptive_nav li a > span {
border-bottom: 1px solid rgba(0, 0, 0, 0.22);
}
.adaptive_nav li a:hover span{
border-bottom: 1px solid #000;
}
.adaptive_nav{
padding-top: 15px;
padding-bottom: 15px;
}
.adaptive_nav_logo{
float: left;
white-space: nowrap;
display: none;
}
.adaptive_nav_logo a{
line-height: 25px;
}
.adaptive_nav_trigger{
/*float: right;*/
text-align: center;
}
.adaptive_nav .burger {
height: 25px;
width: 26px;
cursor: pointer;
position: relative;
display: inline-block;
vertical-align: middle;
}
.adaptive_nav .burger_title {
display: none;
vertical-align: middle;
}
.adaptive_nav .burger_x, .adaptive_nav .burger_y, .adaptive_nav .burger_z {
position: absolute;
background: #fff;
border-radius:2px;
-webkit-transition: all 120ms ease-out;
-moz-transition: all 120ms ease-out;
-ms-transition: all 120ms ease-out;
-o-transition: all 120ms ease-out;
transition: all 120ms ease-out;
}
.adaptive_nav .burger_x, .adaptive_nav .burger_y, .adaptive_nav .burger_z {
height: 3px; width: 26px;
background-color: #000;
}
.adaptive_nav .burger_x{top:0px;}
.adaptive_nav .burger_y{top: 11px;}
.adaptive_nav .burger_z{top: 22px;}
.adaptive_nav .burger .collapse{top: 11px;}
.adaptive_nav .rotate30{
-ms-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
.adaptive_nav .rotate150{
-ms-transform: rotate(150deg);
-webkit-transform: rotate(150deg);
transform: rotate(150deg);
}
.adaptive_nav .rotate45{
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.adaptive_nav .rotate135{
-ms-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.adaptive_nav_links ul ul {
display: none;
padding-left: 20px;
margin-left: 15px;
}
.mobile_opener{
display: inline-block;
right: 0;
top: 3px;
cursor: pointer;
text-align: center;
background-color: #d4cad2;
z-index: 10;
padding: 4px 0;
width: 32px;
border-radius:3px;
}
.mobile_opener:before{
content:"+";
display: block;
-webkit-transition: all 120ms ease-out;
-moz-transition: all 120ms ease-out;
-ms-transition: all 120ms ease-out;
-o-transition: all 120ms ease-out;
transition: all 120ms ease-out;
}
.mobile_opener.active:before{
content:"-";
}
.adaptive_nav_links a{
display: inline-block;
padding: 7px 10px;
}
.mobile_opener.active + a{
font-weight: 500;
}
.mobile_opener.active + a:after{
content:":";
}
}
@media (max-width: 380px) {
.adaptive_nav_links ul ul {
display: none;
padding-left: 7px;
margin-left: 5px;
}
}
Инструкции JS:
$('.burger').on('click', function(){
if(!$(this).hasClass('open')){
openMobileMenu($(this));
}else{
closeMobileMenu($(this));
}
});
function openMobileMenu(t){
$(".adaptive_nav").find(".adaptive_nav_links").slideDown();
t.addClass('open');
t.find(".burger_x, .burger_z").addClass('collapse');
setTimeout(function(){
t.find('.burger_y').hide();
t.find('.burger_x').addClass('rotate30');
t.find('.burger_z').addClass('rotate150');
}, 30);
setTimeout(function(){
t.find('.burger_x').addClass('rotate45');
t.find('.burger_z').addClass('rotate135');
}, 60);
}
function closeMobileMenu(t){
$(".adaptive_nav").find(".adaptive_nav_links").slideUp(400,function(){
$(this).css("display","");
});
setTimeout(function(){
t.removeClass('open');
t.find('.burger_x').removeClass('rotate45').addClass('rotate30');
t.find('.burger_z').removeClass('rotate135').addClass('rotate150');
setTimeout(function(){
t.find('.burger_x').removeClass('rotate30');
t.find('.burger_z').removeClass('rotate150');
}, 20);
setTimeout(function(){
t.find('.burger_y').show();
t.find('.burger_x, .burger_z').removeClass('collapse');
}, 30);
}, 50);
}
$('.mobile_opener').on('click', function(){
var t = $(this);
var tUl = t.siblings("ul");
if(tUl.css("display") == "none"){
tUl.slideDown();
t.addClass("active");
}else{
tUl.slideUp(400,function(){
$(this).css("display","");
});
t.removeClass("active");
}
});
Комментарии (0)
Не писать ответ