Выпадающее меню

DrShepard

Осваиваюсь на форуме
42
0 / 0

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

главная страница.png (489.54 КБ, 1000x466 - просмотрено 65 раз.)

карточка товара.png (90.2 КБ, 1000x463 - просмотрено 48 раз.)

поднятое меню.png (241.08 КБ, 1000x476 - просмотрено 48 раз.)

Записан

draff

Гуру
5801
434 / 7
ищу работу

Re: Выпадающее меню

« Ответ #1 : 05.07.2021, 10:39:02 »

Да тут писать и писать.Вкратце- начните с добавления гамбургера в нужное место и размещения модуля категорий ВИрт, а потом свяжете с подошью атрибут data-toggle

Записан

Удалю вирус с сайта. Обновление Joomla!, JoomShopping, Virtuemart Интеграция Retailcrm | Отзывы

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
Но не могу найти, что нужно сделать чтоб в основной версии категории спрятать под кнопку гамбургера.

пк.png (482.86 КБ, 1000x466 - просмотрено 44 раз.)

кнопка.png (131.13 КБ, 869x913 - просмотрено 44 раз.)

раскрытие меню.png (96.46 КБ, 873x903 - просмотрено 42 раз.)

Записан

draff

Гуру
5801
434 / 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. Это для вас сайт знаком, а мне искать долго и непонятно где .

Записан

Удалю вирус с сайта. Обновление Joomla!, JoomShopping, Virtuemart Интеграция Retailcrm | Отзывы

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

Гуру
5801
434 / 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

Записан

Удалю вирус с сайта. Обновление Joomla!, JoomShopping, Virtuemart Интеграция Retailcrm | Отзывы

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

Гуру
5801
434 / 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 »

Записан

Удалю вирус с сайта. Обновление Joomla!, JoomShopping, Virtuemart Интеграция Retailcrm | Отзывы

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, чтоб кнопка была маленькие и рядом с лого, а при нажатие меню разворачивал на экран?

позиция7.png (461.24 КБ, 1920x866 - просмотрено 41 раз.)

позици.png (649.78 КБ, 1920x859 - просмотрено 25 раз.)

меню.png (49.46 КБ, 505x822 - просмотрено 25 раз.)

Записан

darkghost

Живу я здесь
2212
97 / 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 чтоб при раскрытие сразу были видны и подкатегории первого уровня.

Записан

Кликабельность псевдоэлемента в пункте меню Автор vasilii.pupkov	Ответов: 4 Просмотров: 3703	29.12.2021, 23:15:38 от v42bis
Как закруглить края выпадающего меню? Автор coliandra	Ответов: 1 Просмотров: 1535	11.12.2020, 21:15:57 от effrit
При прокрутке страницы виджет залезает на меню Автор coliandra	Ответов: 2 Просмотров: 1453	27.11.2020, 11:33:58 от coliandra
Как убрать маркер только из одного пункта меню. Автор kuraev64	Ответов: 2 Просмотров: 1696	20.07.2020, 11:18:44 от kuraev64
Проблема с меню на сайте Автор nesskafe	Ответов: 9 Просмотров: 1453	01.06.2020, 11:03:58 от sivers

Выпадающее меню - Вопросы по CSS

Новости Joomla

Событие Pizza, Bugs & Fun - 29-30 января 2026 года.

Вышла Kunena 7.0 — стабильный релиз для Joomla! 5.4 и 6.0.

Поле для вставки видео RUTUBE в материалы

Настройки и работа с полем:

DrShepard

Выпадающее меню

draff

Re: Выпадающее меню

DrShepard

Re: Выпадающее меню

draff

Re: Выпадающее меню

DrShepard

Re: Выпадающее меню

draff

Re: Выпадающее меню

DrShepard

Re: Выпадающее меню

draff

Re: Выпадающее меню

DrShepard

Re: Выпадающее меню

darkghost

Re: Выпадающее меню

DrShepard

Re: Выпадающее меню

Похожие темы