Вывод pdoMenu как на сайте docs.modx.pro
Добрый день!
Ребята, подскажите как вывести меню (на сайте docs.modx.pro/ с левой стороны)? У меня вывести не получается. Помогите с шаблоном вывода pdoMenu. Спасибо.
Ребята, подскажите как вывести меню (на сайте docs.modx.pro/ с левой стороны)? У меня вывести не получается. Помогите с шаблоном вывода pdoMenu. Спасибо.
Комментарии: 2
Если актуально еще то вот ссылка на пример!
Вызов pdoMenu
js
css
ссылка на источник!
Вызов pdoMenu
[[!pdoMenu?
&parents=`2`
&level=`0`
&outerClass=`anyClass skinClear`
&firstClass=`0`
&lastClass=`0`
&hereClass=`0`
&levelClass=`levels`
&tplInner=`@INLINE <ul>[[+wrapper]]</ul>`
]]
js
(function ($) {
$.fn.liHarmonica = function (params) {
var p = $.extend({
currentClass: 'cur', //Класс для выделенного пункта меню
onlyOne: true, //true - открытым может быть только один пункт,
//false - число открытых одновременно пунктов не ограничено
speed: 500 //Скорость анимации
}, params);
return this.each(function () {
var
el = $(this).addClass('harmonica'),
linkItem = $('ul', el).prev('a');
el.children(':last').addClass('last');
$('ul', el).each(function () {
$(this).children(':last').addClass('last');
});
$('ul', el).prev('a').addClass('harFull');
el.find('.' + p.currentClass).parents('ul').show().prev('a').addClass(p.currentClass).addClass('harOpen');
linkItem.on('click', function () {
if ($(this).next('ul').is(':hidden')) {
$(this).addClass('harOpen');
} else {
$(this).removeClass('harOpen');
}
if (p.onlyOne) {
$(this).closest('ul').closest('ul').find('ul').not($(this).next('ul')).slideUp(p.speed).prev('a').removeClass('harOpen');
$(this).next('ul').slideToggle(p.speed);
} else {
$(this).next('ul').stop(true).slideToggle(p.speed);
}
return false;
});
});
};
})(jQuery);
/*Инициализация плагина*/
$(function () {
$('.anyClass').liHarmonica({
onlyOne: false,
speed: 500
});
$('.anyClass2').liHarmonica({
onlyOne: false,
speed: 400
});
});
css
/*skin Clear [.skinClear]*/
.skinClear, .skinClear ul {
list-style:none;
padding:0;
margin:0;
font:14px/1.2em Arial, Helvetica, sans-serif
}
.skinClear ul {
display:none;
margin:0 0 0 10px;
}
.skinClear li {
list-style:none;
}
.skinClear a {
color:#888;
display:block;
position:relative;
text-decoration:none;
padding:1px 0 1px 9px;
}
.skinClear a:before {
content:'';
width: 0;
height: 0;
border:0;
display:inline-block;
position:absolute;
top:5px;
left:0px;
margin:0 4px 0 0;
}
.skinClear a.harFull.harOpen:before {
border:0;
border-left: 3px solid transparent;
border-top: 4px solid #000;
border-right: 3px solid transparent;
top:7px;
}
.skinClear a.harFull:before {
border:0;
border-top: 3px solid transparent;
border-left: 4px solid #000;
border-bottom: 3px solid transparent;
top:5px;
}
.skinClear a:hover {
text-decoration:underline;
}
.skinClear a.cur {
color:#000
}
.skinClear a.harOpen {
color:#000
}
ссылка на источник!
Дмитрий, спасибо огромное. Я уже и не надеялся!
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.