Вертикальное меню «аккордион» для Joomla в Sidebar
Версий вертикального меню «аккордион» для Joomla в Sidebar — много. В том числе и модули популярной cms. Но задачи бывают разные и специфика применения на практике тоже. И нужны ли модули для решения «узких» задач?..
Потребовалось решение задачи: меню многоуровневое «аккордион» с открытием вложенных подпунктов кликом только по иконке «раскрытия». При этом, текстовая часть ссылки функционирует — только как ссылка.
Проще показать, нежели описать
, важны нюансы.
Пример (demo) меню — на развороте страницы.
(К слову, реализации конкретно-нужной мне задачи в Сети не нашлось.)
При нажатии на текстовую составляющую меню — происходит переход по ссылке. При нажатии на иконку «» - происходит развертывание пунктов подменю.
Всё просто, в принципе. Тем не менее, практической реализации решения (в виде модуля Joomla) в Сети не найдено. Возможно, за ненадобностью подобной задачи?.. Возможно. А возможно, что мобильный интернет окончательно вытеснил изначальный десктоповский. А возможно, сайтостроение умирает?.. не важно.
Меню прредназначалось для сайта по ссылке: sidebar-меню Кулинарная книга (правый блок в desktop версии сайта), много уровней вложенности меню, необходимость его компактности.
Предполагается, что на сайте, на котором планируется использовать данное меню, подключены библиотеки jQuery и Font Awesome, версия Joomla 5.x (хотя cms, в данном случае, не имеет значения).
Для практической реализации меню, код html + js + css размещаются в рэндомном (произвольный код html) модуле Joomla или в любом ином нужном месте контента. Правка html и css может быть (разумеется) любая, на усмотрение вкусовых пристрастий вебмастера и специфике «привязки» меню по месту назначения.
Ниже по тексту приведены версии кода реализации меню, которое размещено на данной странице данного сайта. Все пункты меню (ссылки и тексты
),
стили, иконки, пр. — легко
изменить на необходимые,
правка проистекает в ручном режиме, возможно — всё. В случае проблем:
пишите в Комментарии или воспользуйтесь услугами Chat GPT
html
<div class="sidebar"><div id="leftside-navigation">
<ul class="level-0">
<li><a href="/pamyatka/zametki-na-polyakh"><strong class="fa-sharp-duotone fa-solid fa-star-sharp"></strong><span>Уровень 1</span></a></li>
<li class="parent"><a href="#"><strong class="fa-sharp-duotone fa-solid fa-star-sharp"></strong><span>Уровень 1</span><i class="arrow fa-light fa-chevron-right"></i></a>
<ul class="level-1">
<li class="parent"><a href="#"><strong class="fa-sharp-duotone fa-solid fa-arrow-right"></strong><span>Уровень 2</span><i class="arrow fa-light fa-chevron-right"></i></a>
<ul class="level-2">
<li><a href="#"><strong class="fa-sharp-duotone fa-solid fa-chevron-right"></strong>Уровень 3</a></li>
<li><a href="#"><strong class="fa-sharp-duotone fa-solid fa-chevron-right"></strong>Уровень 3</a></li>
<li><a href="#"><strong class="fa-sharp-duotone fa-solid fa-chevron-right"></strong>Уровень 3</a></li>
</ul>
</li>
</ul>
</li>
<li class="parent"><a href="#"><strong class="fa-sharp-duotone fa-solid fa-star-sharp"></strong><span>Уровень 1</span><i class="arrow fa-light fa-chevron-right"></i></a>
<ul class="level-1">
<li class="parent"><a href="#"><strong class="fa-sharp-duotone fa-solid fa-arrow-right"></strong><span>Уровень 2</span><i class="arrow fa-light fa-chevron-right"></i></a>
<ul class="level-2">
<li><a href="#"><strong class="fa-sharp-duotone fa-solid fa-chevron-right"></strong>Уровень 3</a></li>
<li><a href="#"><strong class="fa-sharp-duotone fa-solid fa-chevron-right"></strong>Уровень 3</a></li>
<li><a href="#"><strong class="fa-sharp-duotone fa-solid fa-chevron-right"></strong>Уровень 3</a></li>
</ul>
</li>
</ul>
</li>
<li class="parent"><a href="#"><strong class="fa-sharp-duotone fa-solid fa-star-sharp"></strong><span>Уровень 1</span><i class="arrow fa-light fa-chevron-right"></i></a>
<ul class="level-1">
<li class="parent"><a href="#"><strong class="fa-sharp-duotone fa-solid fa-arrow-right"></strong><span>Уровень 2</span><i class="arrow fa-light fa-chevron-right"></i></a>
<ul class="level-2">
<li><a href="#"><strong class="fa-sharp-duotone fa-solid fa-chevron-right"></strong>Уровень 3</a></li>
<li><a href="#"><strong class="fa-sharp-duotone fa-solid fa-chevron-right"></strong>Уровень 3</a></li>
<li><a href="#"><strong class="fa-sharp-duotone fa-solid fa-chevron-right"></strong>Уровень 3</a></li>
</ul>
</li>
</ul>
</li>
<li class="parent"><a href="#"><strong class="fa-sharp-duotone fa-solid fa-star-sharp"></strong><span>Уровень 1</span><i class="arrow fa-light fa-chevron-right"></i></a>
<ul class="level-1">
<li class="parent"><a href="#"><strong class="fa-sharp-duotone fa-solid fa-arrow-right"></strong><span>Уровень 2</span><i class="arrow fa-light fa-chevron-right"></i></a>
<ul class="level-2">
<li><a href="#"><strong class="fa-sharp-duotone fa-solid fa-chevron-right"></strong>Уровень 3</a></li>
<li><a href="#"><strong class="fa-sharp-duotone fa-solid fa-chevron-right"></strong>Уровень 3</a></li>
<li><a href="#"><strong class="fa-sharp-duotone fa-solid fa-chevron-right"></strong>Уровень 3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div></div>
css
<style>
.sidebar #leftside-navigation ul {margin:0; padding:0; display:inline-block; width:100%; }
.sidebar #leftside-navigation ul li {display:block; width:100%; vertical-align:middle; list-style-type:none; border-bottom:1px solid rgba(0, 0, 0, 0.1);}
.sidebar #leftside-navigation ul li.open > a > i {transform:rotate(90deg);}
.sidebar #leftside-navigation ul li.open > a > i:not(:hover) {color:#800000;}
.sidebar #leftside-navigation ul li a {position:relative; display:block; color:#242424; text-decoration:none; text-transform:uppercase; width:100%; padding:10px 5px; box-sizing:border-box; font-size:20px; line-height:22px; outline:0;}
.sidebar #leftside-navigation ul li a:hover {color:#800000;}
.sidebar #leftside-navigation ul li a span {display:inline-block;}
.sidebar #leftside-navigation ul li a i {top:0; right:0; width:42px; height:42px; line-height:42px; text-align:center; display:block; position:absolute; touch-action: manipulation;}
.sidebar #leftside-navigation ul li a i:hover {background-color:#eee; color:#242424;}
.sidebar #leftside-navigation ul li a i .fa-angle-left, .sidebar #leftside-navigation ul li a i .fa-angle-right {padding-top:3px;}
.sidebar #leftside-navigation ul ul {display:none; background-color:rgba(0, 0, 0, 0.05);}
.sidebar #leftside-navigation ul ul li {border-bottom:none;}
.sidebar #leftside-navigation strong.fa-solid {font-weight:300 !important; margin-right:10px !important; font-size:90%;}}
</style>
js
<script>
$(document).ready(function() {
$('#leftside-navigation .parent > a > i').on('click', function (e) {
e.preventDefault();
var toClose = $('#leftside-navigation ul').not($(this).parents('ul'));
toClose.slideUp();
toClose.parent().removeClass('open');
if (!$(this).parent().next().is(':visible')) {
var toOpen = $(this).parent().next();
toOpen.slideDown();
toOpen.parent().not('.open').addClass('open');
}
e.stopPropagation();
});
});
</script> Тестируйте, перепиливайте, комментируйте. Нужно ли вам подобное меню? Вам решать. Оставьте свой комментарий, при желании. Вопросы, если возникнут, задавайте. По возможности ответим
Для комментирования материалов регистрация на сайте не нужна. Правила публикации: наличие здравого смысла. Комментарии проходят премодерацию и публикуются только после проверки администратором.