| Есть мобильное подменю. Это див с классом .submenu, который скроллится пальчиком вправо-влево. Задача: если активный пункт (класс .active) невидно целиком, то скроллить так, чтобы он был справа |
bitrix.menu template.php
<? if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED !== true) die(); ?><?
global $USER;
if (!empty($arResult)) {
$vis = true;
foreach ($arResult as $k => $arItem) {
if($arItem["SELECTED"]){
$vis = false;
break;
}
}?>
<div class="submenu <?=$vis?"":"hidemenu"?>">
<ul><?
foreach ($arResult as $k => $arItem) {?>
<li><a href="<?= $arItem["LINK"] ?>" <? if ($arItem["SELECTED"]) { ?>class="active" <? } ?>><?= $arItem["TEXT"] ?></a></li>
<? } ?>
</ul>
</div>
<? } ?> |
.submenu{ overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
margin: 28px 0 25px;
}
.submenu.hidemenu{
opacity: 0;
}
.submenu::-webkit-scrollbar {
display: none;
}
.submenu ul{
display: inline-block;
margin: 0 10px;
}
@media (min-width: 500px) {
.submenu ul{
margin: 0 35px;
}
}
.submenu ul li{
display: inline;
margin: 0 5px;
}
.submenu ul li a{
display: inline-block;
padding: 5px 7px;
background: #EDEDED;
text-decoration: none;
color: #000;
}
.submenu ul li a.active{
color:#fff;
background: #2C77D2;
} |
if($('.submenu .active').length>0){
//если элемент целиком невидно
if(($(".submenu .active").offset().left + $(".submenu .active")[0].offsetWidth)>window.innerWidth) {
$(".submenu").animate({
//по правому краю
scrollLeft:$(".submenu .active").offset().left + $(".submenu .active")[0].offsetWidth-window.innerWidth+10
//по центру
//scrollLeft: $(".submenu .active").offset().left - (window.innerWidth-$(".submenu .active")[0].offsetWidth)/2
}, 1);
setTimeout(function(){
$(".submenu").css('opacity',1);
},1);
}
else{
$(".submenu").css('opacity',1);
}
} |