Новости Joomla

Quick Menu - модуль панели администратора для Joomla 4

После установки создайте и настройте модуль в менеджере модулей для панели администратора. Модуль выводит 2 столбца меню, один для задач контент-менеджмента, второй - для быстрого доступа к задачам администрирования сайта.

Вышел релиз Joomla 4.2.9

Это релиз исправлений и улучшений.

Вышел релиз Joomla 4.2.9

Доступна к загрузке Joomla 4.2.9. Это релиз исправлений и улучшений.

1   Вниз
0 Пользователей и 1 Гость просматривают эту тему.
  • 10 Ответов
  • 1245 Просмотров
*

DrShepard

  • Осваиваюсь на форуме
  • 42
  • 0 / 0
Выпадающее меню
« : 05.07.2021, 08:20:11 »
Здравствуйте! На сайте хотим сделать выпадающее меню категорий. Сейчас меню категорий есть только на главной и когда заходишь в карточку товара он не отображается. Категории выводятся модулем VirtueMart Категории.  Я решила его поднять в верх, и задать модулю стили как у стальныз верхних меню. А дальше возникли проблемы... 1) Можно ли скрыть все пункты категорий и чтоб они только появлялись при клики на каталог? Если возможно подскажите пожайлуйста или подскажите информацию какую почитать, чтоб это реализовать. Или может есть модули, который реализует выпадающие категории. И чтоб было понятно, что мы хотим вот сайт с примером https://www.wildberries.ru/ - Там при нажатии на три полоски появляются категории. Вот так же хотим и мы. Только все то их трех полосок наш стиль. 2) Надо сделать так что бы не создавать доп меню, чтоб не менялись url категорий.
Наш сайт: https://solt74.ru/
Заранее спасибо!
Записан
*

draff

  • Гуру
  • 5803
  • 433 / 7
  • ищу работу
Re: Выпадающее меню
« Ответ #1 : 05.07.2021, 10:39:02 »
Да тут писать и писать.Вкратце- начните с добавления гамбургера в нужное место и размещения модуля категорий ВИрт, а потом свяжете с подошью атрибут data-toggle
Записан
*

DrShepard

  • Осваиваюсь на форуме
  • 42
  • 0 / 0
Re: Выпадающее меню
« Ответ #2 : 08.07.2021, 08:11:09 »
В общем нашла на просторах инета и форума как сделать, но это для мобильных версиях. Ну все сделала. В index.php прописала код:
Код
 <!-- Burger pos -->
<?php if ($this->countModules('burger')) : ?>
<nav class="navigation" role="navigation">
<div class="navbar pull-left">
<a class="btn btn-navbar collapsed" data-toggle="collapse" data-target="#VMmenu".$ID">
<span class="sr-only">Каталог</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
</div>
<div class="nav-collapse" id="<?php echo "VMmenu".$ID ?>">
<jdoc:include type="modules" name="burger" style="themeHtml5" />
</div>
</nav>
<?php endif; ?>
Чтоб позиция была перед лого. Добавила новую позицию в templateDetails.xml.
Прописала скрипт
Код
$(document).ready(function() {
  $('.btn btn-navbar').click(function (event) {
    $('.btn btn-navbar,.<?php echo "VMmenu".$ID ?>').toggleClass('active');
    $('body').toggleClass('lock');
  });
И внеска правки в CSS
Но не могу найти, что нужно сделать чтоб в основной версии категории спрятать под кнопку гамбургера.
Записан
*

draff

  • Гуру
  • 5803
  • 433 / 7
  • ищу работу
Re: Выпадающее меню
« Ответ #3 : 08.07.2021, 09:13:32 »
А что в $ID  ?
Код
  id="<?php echo "VMmenu".$ID ?>">
$('body').toggleClass('lock');
В  классе  стиля lock должна быть прописана видимость, пример
Код
.lock .nav-collapse {display: block;}
А до клика на гамбургер
Код
.nav-collapse {display: none;}
Сейчас на вашем сайте не вижу гамбургер , ни модуль VirtueMart. Это для вас сайт знаком, а мне искать долго и непонятно где .
Записан
*

DrShepard

  • Осваиваюсь на форуме
  • 42
  • 0 / 0
Re: Выпадающее меню
« Ответ #4 : 08.07.2021, 09:18:57 »
Цитата: draff от 08.07.2021, 09:13:32
А что в $ID  ?
Код
  id="<?php echo "VMmenu".$ID ?>">
$('body').toggleClass('lock');
В  классе  стиля lock должна быть прописана видимость, пример
Код
.lock .nav-collapse {display: block;}
А до клика на гамбургер
Код
.nav-collapse {display: none;}
Сейчас на вашем сайте не вижу гамбургер , ни модуль VirtueMart. Это для вас сайт знаком, а мне искать долго и непонятно где .
А что в $ID  ? Это вывод модуля VirtueMart категории. На основном сайте этого нет, так я на тестовом делаю на полной копии основного.
$('body').toggleClass('lock');
В  классе  стиля lock должна быть прописана видимость, пример
Код
.lock .nav-collapse {display: block;}
А до клика на гамбургер
Код
.nav-collapse {display: none;}
Спасибо сейчас попробую.
Записан
*

draff

  • Гуру
  • 5803
  • 433 / 7
  • ищу работу
Re: Выпадающее меню
« Ответ #5 : 08.07.2021, 09:30:15 »
Цитата: DrShepard от 08.07.2021, 09:18:57
А что в $ID  ? Это вывод модуля VirtueMart категории.
А скрипт в макете модуля, иначе селектор .<?php echo "VMmenu".$ID ?>  не будет работать в яваскрипт
Код
 $('.btn btn-navbar,.<?php echo "VMmenu".$ID ?>').toggleClass('active');
#<?php echo "VMmenu".$ID ?> Это же селектор по id
Записан
*

DrShepard

  • Осваиваюсь на форуме
  • 42
  • 0 / 0
Re: Выпадающее меню
« Ответ #6 : 08.07.2021, 09:49:29 »
Цитата: draff от 08.07.2021, 09:30:15
А скрипт в макете модуля, иначе селектор .<?php echo "VMmenu".$ID ?>  не будет работать в яваскрипт
Код
 $('.btn btn-navbar,.<?php echo "VMmenu".$ID ?>').toggleClass('active');
#<?php echo "VMmenu".$ID ?> Это же селектор по id
Спасибо, что указали на ошибку. Я сейчас посмотрела убрала его из скрипта, гамбургер и так нажимается и показывается меню. Я его использовала, т.к меню категорий при обновление страницы каждый раз показывает новый ID.

Я сделала, что вы писали выше. Спасибо! Почти получилось. Меню скрылось, но когда разваричивает, кнопки нет, чтоб его снова скрыть в основной версии.
Записан
*

draff

  • Гуру
  • 5803
  • 433 / 7
  • ищу работу
Re: Выпадающее меню
« Ответ #7 : 08.07.2021, 09:56:25 »
Цитата: DrShepard от 08.07.2021, 09:49:29
Меню скрылось, но когда разваричивает, кнопки нет, чтоб его снова скрыть в основной версии.
Нужно чтобы при клике в любом месте, кроме по ссылке в модуле VirtueMart, меню скрывалось.
Пример с гугл
Код
$(document).on('click', function(e) {
  if (!$(e.target).closest(".parent_block").length) {
    $('.toggled_block').hide();
  }
 e.stopPropagation();
});
« Последнее редактирование: 08.07.2021, 10:04:11 от draff »
Записан
*

DrShepard

  • Осваиваюсь на форуме
  • 42
  • 0 / 0
Re: Выпадающее меню
« Ответ #8 : 02.09.2021, 11:31:55 »
Все переделывала, в таком в виде не работал модуль на других страницах. Код для позиции оставила такой же.
Код
<!-- Burger pos -->
<?php if ($this->countModules('burger')) : ?>
	<nav class="navigation" role="navigation">
		<div class="navbar pull-left">
			<a class="btn btn-navbar collapsed" data-toggle="collapse" data-target="#VMmenu".$ID">
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</a>
		</div>
		<div class="nav-collapse" id="<?php echo "VMmenu".$ID ?>">
			<jdoc:include type="modules" name="burger" style="themeHtml5" />
		</div>
	</nav>
<?php endif; ?>
В таком виде на комп версии показывался католог развернутый. А для моб версии появлялась кнопка и каталог сворачивался и разворачивался (фон был белым, чтоб видно было текст сделала фон черным).
Добавила стили в css:
Код
.nav-collapse.collapse {
  height: auto;
  overflow: hidden;
} 
nav.navigation {
  background: #211f22;
}
.nav-collapse {
    clear: both;
    height: 0;
    overflow: hidden;
}
Теперь кнопка работает. И на компьтерах и в мобильной версии.
Хотелось бы исправить и уменьшить позицию и поместить её рядом с логотипом. И чтоб в моб версии, тоже находилась так же. И чтоб каталог открывался поверх контента, а не сдвигал его. Просто я делаю уменьшаю позицию , чтоб она встала рядом с лого. При этом когда меню разворачивается он тоже остается маленьким.
Как правильно прописать в CSS, чтоб кнопка была маленькие и рядом с лого, а при нажатие меню разворачивал на экран?
Записан
*

darkghost

  • Живу я здесь
  • 2202
  • 95 / 0
Re: Выпадающее меню
« Ответ #9 : 17.10.2021, 22:53:56 »
где можно посмотреть на "изобретение" ибо по картинках тяжело шо то сказать. На сайте что-то не видать кнопки или уже данная идея не актуальная?
Записан
*

DrShepard

  • Осваиваюсь на форуме
  • 42
  • 0 / 0
Re: Выпадающее меню
« Ответ #10 : 20.10.2021, 12:36:16 »
Цитата: darkghost от 17.10.2021, 22:53:56
где можно посмотреть на "изобретение" ибо по картинках тяжело шо то сказать. На сайте что-то не видать кнопки или уже данная идея не актуальная?
Она актуальна. Я все делаю на тестовом сайте. Сейчас уже не много подругому делаю. Кнопку сделала рядом с поиском и при нажатие выпадает VMmenu. Вот только теперь надо найти как в vmmenu чтоб при раскрытие сразу были видны и подкатегории первого уровня.
Записан
1   Вверх
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Кликабельность псевдоэлемента в пункте меню

Автор vasilii.pupkov

 Ответов: 4
Просмотров: 617 		Последний ответ 29.12.2021, 23:15:38
от v42bis
Как закруглить края выпадающего меню?

Автор coliandra

 Ответов: 1
Просмотров: 617 		Последний ответ 11.12.2020, 21:15:57
от effrit
При прокрутке страницы виджет залезает на меню

Автор coliandra

 Ответов: 2
Просмотров: 610 		Последний ответ 27.11.2020, 11:33:58
от coliandra
Как убрать маркер только из одного пункта меню.

Автор kuraev64

 Ответов: 2
Просмотров: 922 		Последний ответ 20.07.2020, 11:18:44
от kuraev64
Проблема с меню на сайте

Автор nesskafe

 Ответов: 9
Просмотров: 775 		Последний ответ 01.06.2020, 11:03:58
от sivers