53 lines
2.2 KiB
HTML
53 lines
2.2 KiB
HTML
#[body]#
|
|
<a class="navbar-brand d-lg-none px-2" href="?cat={cat_id}">{cat_name}</a>
|
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#menuCore{root}">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse bg-secondary autosize-menu" id="menuCore{root}" style="overflow-x: clip;">
|
|
<ul class="navbar-nav mr-auto flex-nowrap" id="menuCoreNavbar{root}">
|
|
{menu_item}
|
|
</ul>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
|
if (window.innerWidth < 768 ) return; // Только для широких экранов
|
|
|
|
var navList = document.getElementById('menuCoreNavbar{root}');
|
|
var navItems = navList.getElementsByClassName('nav-item');
|
|
var moreMenu = document.createElement('li');
|
|
moreMenu.className = 'dropdown dropdown py-0';
|
|
moreMenu.innerHTML = '<a class="nav-link text-nowrap text-right bg-secondary align-self-baseline px-2 text-primary dropdown-toggle" href="#" data-toggle="dropdown"><i class="far fa-bars"></i> Ещё</a>' +
|
|
'<div class="dropdown-menu dropdown-menu-right py-0" style="z-index: 999"></div>';
|
|
|
|
var dropdownMenu = moreMenu.getElementsByClassName('dropdown-menu')[0];
|
|
|
|
var fullWidth = 100; // Ширина кнопки Ещё
|
|
var hideNext = false;
|
|
for (var i = 0; i < navItems.length; i++) {
|
|
fullWidth += navItems[i].offsetWidth
|
|
if (fullWidth > window.innerWidth) {
|
|
hideNext = true;
|
|
}
|
|
if (hideNext) {
|
|
var clone = navItems[i].cloneNode(true);
|
|
dropdownMenu.appendChild(clone);
|
|
navItems[i].classList.add('d-none');
|
|
}
|
|
|
|
}
|
|
if (hideNext) {
|
|
navList.appendChild(moreMenu);
|
|
}
|
|
});
|
|
</script>
|
|
#[!body]#
|
|
#[item]#
|
|
<li class="nav-item"><a class="nav-link text-truncate bg-secondary align-middle px-2 text-primary" href="?cat={cat_id}"><img src="{img}" style="height: 13px; width: 13px;top: -3px; position: relative;"> {cat_name} <span class="badge badge-primary"></span></a></li>
|
|
#[!item]#
|
|
#[item_sel]#
|
|
<li class="nav-item active"><a class="nav-link text-truncate bg-grey px-2 text-primary" href="?cat={cat_id}"><img src="{img}" style="height: 13px; width: 13px;top: -3px; position: relative;"> {cat_name} <span class="badge badge-primary"></span></a></li>
|
|
#[!item_sel]#
|
|
#[sep]##[!sep]#
|