Вывод меню через pdoMenu
Всем привет!
Помогите вывести меню через pdoMenu.
Есть меню на сайте которое выползает по клику, и выводится все родительские категории, как добавить к этому еще и вывод дочерних категорий при наведении?
Есть такой код менюшки, но он выводит только дочерние категории(
Помогите вывести меню через pdoMenu.
Есть меню на сайте которое выползает по клику, и выводится все родительские категории, как добавить к этому еще и вывод дочерних категорий при наведении?
Есть такой код менюшки, но он выводит только дочерние категории(
<li class="dropdown le-dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-list"></i> Каталог товаров
</a>
<ul class="dropdown-menu">
<li><a href="#">Категория 1</a></li>
<li><a href="#">Категория 2</a></li>
<li><a href="#">Категория 3</a></li>
<li><a href="#">Категория 4</a></li>
<li><a href="#">Категория 5</a></li>
<li><a href="#">Категория 6</a></li>
<li><a href="#">Категория 7</a></li>
</ul>
</li>
Комментарии: 5
Задача плохо сформулирована.
Во-первых, это не полное меню у вас переведено, а один из пунктов 1 уровня так?
Если так, то ваша задаче реализуема на css в пару строк.
Во-первых, это не полное меню у вас переведено, а один из пунктов 1 уровня так?
Если так, то ваша задаче реализуема на css в пару строк.
.dropdown {
position: relative;
}
.dropdown-menu {
position: absolute;
display: none;
}
.dropdown:hover .dropdown-menu {
display: block;
}
Это так, что бы вы поняли идею реализации, остальное дописывается исхядя из задачи.
Да я плохо сформулировал вопрос.
Попробую еще раз!
Смотрите, у меня это меню работает вот таким образом s11660.h9.modhost.pro/catalog/
Если мы кликаем на каталог товаров, вылезает выпадающее меню, но как сделать чтобы подразделы вылезали сбоку при наведении вышкой?
Попробую еще раз!
Смотрите, у меня это меню работает вот таким образом s11660.h9.modhost.pro/catalog/
Если мы кликаем на каталог товаров, вылезает выпадающее меню, но как сделать чтобы подразделы вылезали сбоку при наведении вышкой?
То есть категории вылезают отлично, а вот как реализовать подкатегории? Я понимаю что это вопрос более по css, но все же помогите)) Как его потом вывести через pdoMenu это я думаю разберусь наверное)) А вот сам css не получается реализовать(
В общем:
Для начала скрываем наше меню которые должно выезжать справа, ведь его нет пока что-то не произойдет (в нашем случае hover) заодно напишем немного стилей для его позиционирования
Для начала скрываем наше меню которые должно выезжать справа, ведь его нет пока что-то не произойдет (в нашем случае hover) заодно напишем немного стилей для его позиционирования
.dropdownbtn {
display: none; //скрыли
position: absolute; // это понадобиться для позиционирования см. ниже
left: 100%;
top: 0;
width: 200px; //поменяете на тот размер который нужен
box-shadow: 0 6px 12px rgba(0,0,0,.175); //немного соли
}
Не забываем, что наше меню должно находиться напротив родителя, иначе бред получиться неимоверный все слепиться в кучу… значит что? правильно. позиционировать его надо относительно родителя:.mainmenubtn {
position: relative;
}
Ну и собственно магия, стили для того, чтобы отобразить меню пока hover на его родителе:.mainmenubtn:hover .dropdownbtn {
display: block;
}
Что получили в итоге:.mainmenubtn {
position: relative;
}
.dropdownbtn {
display: none;
position: absolute;
left: 100%;
top: 0;
width: 200px;
box-shadow: 0 6px 12px rgba(0,0,0,.175);
}
.mainmenubtn:hover .dropdownbtn {
display: block;
}
З.Ы. Кстати у вас там не верная структура, надо каждую ссылку в отдельный <li class="dropdown-child">
обернуть а не в один.
Евгений, ты гений) Спасибо, все заработало более чем)
Вывел через пдоменю и пдоресурс всю менюшку, работает вроде неплохо, единственное, ширина с родительскими категориями не растягивается в длину названия категории. Но все равно огромное спасибо вам!!!
Вывел через пдоменю и пдоресурс всю менюшку, работает вроде неплохо, единственное, ширина с родительскими категориями не растягивается в длину названия категории. Но все равно огромное спасибо вам!!!
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.