Вертикальное меню «аккордион» для 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>
Тестируйте, перепиливайте, комментируйте. Нужно ли вам подобное меню? Вам решать. Оставьте свой комментарий, при желании. Вопросы, если возникнут, задавайте. По возможности ответим
Для комментирования материалов регистрация на сайте не нужна. Правила публикации: наличие здравого смысла. Комментарии проходят премодерацию и публикуются только после проверки администратором.