Пример работы на JSFIDDLE
Подключаемые файлы
Подключаем один из предложенных файлов стилей:
<link rel="stylesheet" href="#"> <!-- или --> <link rel="stylesheet" href="#"> <!-- или --> <link rel="stylesheet" href="#">
Подключаем библиотеку "jQuery" и плагин "liHarmonica":
<script src="/js/jquery-1.8.min.js"></script> <script src="/js/jquery.liHarmonica.js"></script>
Для работы псевдокласса :before в IE версий ниже 9, подключаем ie.js
<!--[if lt IE 9]> <script src="/px.png"></script> <![endif]-->
Инициализация плагина
<script>
$('.anyClass').liHarmonica({
currentClass:'cur',//Класс для выделенного пункта меню
onlyOne:true, //true - открытым может быть только один пункт,
//false - число открытых одновременно пунктов не ограничено
speed:500 //Скорость анимации
});
</script>
Структура HTML
<ul class="anyClass skinPlank">
<li><a href="#">Very long link</a>
<ul>
<li><a href="#">Clickable link One</a></li>
<li><a class="cur" href="#">Clickable link Two</a></li>
<li><a href="#">Clickable link Three</a></li>
<li><a href="#">Clickable link Four</a></li>
<li><a href="#">Clickable link Five</a></li>
</ul>
</li>
<li><a href="#">Short link</a>
<ul>
<li><a href="#">Clickable link One</a></li>
<li><a href="#">Clickable link Two</a></li>
<li><a href="#">Clickable link Three</a></li>
<li><a href="#">Clickable link Four</a></li>
</ul>
</li>
<li><a href="#">Very long link</a></li>
<li><a href="#">Short link</a>
<ul>
<li><a href="#">Clickable link One</a></li>
<li><a href="#">Clickable link Two</a></li>
<li><a href="#">Clickable link Three</a></li>
<li><a href="#">Clickable link Four</a></li>
</ul>
</li>
</ul>
Комментарии
Такой вопрос: как сделать в "меню" чтобы при открытии какого-то линка меню не сворачивалось, а был веделен тот линк который соответствует странице
спасибо!
во общем сдела так :
$(document).rea dy(function() {
$('.skinClear a').each(functi on () {
var position = window.location .href;
var thisTab = this.href;
var thisTabHahs = window.location .hash;
//сравниваем переменные если совпадают добавляем к ссылке класс
if(position == thisTab || position == thisTab + thisTabHahs){$( this).addClass( 'cur');}
});
});
Если средствами php у вас нет возможности поставить текущей ссылке класс "cur", то ваш способ вполне сгодится
Стили и скрипты добавляются в тег "head",
А код HTML добавляется в тег "body"
1. Если вам нужно открыть какой-то один пункт то допишите активной ссылке класс "cur"
2. А если вам нужно чтобы при загрузке страницы были открыты все пункты с вложенностью, то нужно в CSS для вложенных контейнеров "ul" свойство "display:none" заменить на "display:block"
пример: http://jsfiddle.net/yurik417/8NdQN/57/
вот этот вопрос меня интересует!)
Линку, который соответсвует странице, допишите класс 'cur'
1. Чтобы в следующий раз вас понимали, цитируйте комментарий на который отвечаете, иначе теряется смысл.
2. Код выше нужно подключать перед подключением плагина.
1)...код...
2)...плагин...
3)...инициализация...
Пример: http://jsfiddle.net/8NdQN/60/
Добрый день. Присоединяюсь к вопросу. Не работает и все, уже всю плешь проел. Делал все, как описано выше. Или все пункты открыты или все закрыты. Нужно, чтобы открыт был только тот пункт меню, который соответствует текущей странице. Помогите разобраться, очень нужно. P.s.Если, конечно, ветка еще жива.
Добрый день!
Вариант 1.
На соответствующих страницах ставите соответствующим ссылкам класс "cur". (это легко делается в PHP)
пример с открытым блоком: http://jsfiddle.net/yurik417/8NdQN/412/
Вариант 2.
использовать window.location.href
пример:
http://jsfiddle.net/yurik417/8NdQN/435/
Буду благодарен за помощь, заранее спасибо.
Киньте ссылку
Еще один полезный плагин, спасибо!
Вопрос: как сделать, чтобы нужный узел всегда был раскрытым, не смотря на текущую ветку (она может быть другая), и чтобы мышкой его нельзя было закрыть.
Попробуйте так:
http://jsfiddle.net/8NdQN/78/
Нужной ссылке надо добавить класс "allways"
Помогите, плз, у меня стоит "display:block" , но, тем не менее, при каждом обновлении страницы меню отображается развернутым. В чем может быть еще дело?
Помогите, плз, у меня стоит "display:block" , но, тем не менее, при каждом обновлении страницы меню отображается развернутым. В чем может быть еще дело?
Если у вас стоит "display:block" , то меню и должно быть развернутым.
Киньте ссылку на страницу с нерабочим меню
Спасибо)
Не забываем изменить на свой стиль оформление.
Написал
Все плагины jQuery необходимо инициализироват ь после загрузки DOM.
Это делают с помощью функции:
$(document).ready(function(){
//здесь код инициализации
})
или сокращенно:
$(function(){
//здесь код инициализации
})
$(document).on("ajaxComplete",function(){
$('.right-tree' ).liHarmonica({
currentClass:'c ur',
onlyOne:true,
speed:500
});
});
И тут начинаются проблемы с открытием/закры тием подпунктов. Если закрыты подпункты, нажимая на ссылуку.harFull ее подпункты сначала открываются потом сразу же закрываются а потом еще раз открываются. Если подпункты открыты, то нажатие на их заголовок (a.harFull) сначала их закрывает потом открывает и опять закрывает. Такое чувство, что происходит двойное срабатывание, хотя если эти же элементы списка сразу загрузить на страницу и делать такую же инициализацию только в $(document).rea dy, все отлично работает.
Хочу сделать так, чтобы при заходе на сайт, был открыт первый пункт меню.
В комментариях не нашёл ответа.
Подскажите, пожалуйста.
1. Либо дописываете ссылке, которая должна быть открыта класс "cur":
2. Либо обратите внимание на этот комментарий:
/index.php/k2/item/51-liharmonica#comment-99
Валерий, если вы хотите обменяться ссылками, пишите на почту limasscode
Меню имеет функционал стандартного "аккордеона" и поэтому возможности зайти на ссылку-триггер нет.
Для таких целей рекомендую: /index.php/k2/item/35-limenuvert
Но хочется ЕЩЕ чуть чуть большего.
Нельзя ли что-то сделать на примере
http://www.jqueryscript.net/demo/Lightweight-Folding-Menu-Plugin-For-jQuery-treemenu-js/
когда сворачивание/ра зворачивание осуществляется не текстом (и тем более не текстовой ссылкой), а специальным блоком перед текстом (ссылкой). (При том ОЧЕНЬ бы хотелось, чтоб "блок" добавлялся не через PHP (в моем случае), а скриптом.)
СПАСИБО!
Цитирую Роман:
Пользуйтесь на здоровье
http://jsfiddle.net/yurik417/8NdQN/399/
Скоро добавлю в архив этот функционал
Very long link
был кликабельным и вел на страницу с материалом, а не просто был разделителем и выводил подпункты меню.
Пользуйтесь на здоровье
http://jsfiddle.net/yurik417/8NdQN/399/
LiMasscode, спасибо - классный скрипт.
Скажите, можно ли модифицировать эту версию так, чтобы переход по ссылке осуществлялся при клике на треугольник (div.harBtn), а подпункты раскрывались при клике на текст ссылки т.е. наоборот чем в текущей версии.
Ну кроме последнего уровня вложенности пунктов меню - там где div.harBtn нет и переход осуществлялся так как сейчас - по клику на ссылку.
Забирайте
http://jsfiddle.net/yurik417/8NdQN/404/
LiMasscode, спасибо - забрал.
Но работает не совсем корректно)
По клику на текст ссылки подпункты разворачивает - это ок
По клику на текст ссылки на последнем уровне вложенности (там где div.harBtn нет) - переход по соответствующей ссылке - это ок
Но вот по клику на треугольник (div.harBtn) переход осуществляется всегда на одну и ту же страничку- та которая прописана самой первой ссылке (если на примере http://jsfiddle.net/yurik417/8NdQN/404/ - то это 4-ая строка html-кода a href="#") и это происходит при клике на треугольник любого пункта или подпункта меню.
Исправлено: http://jsfiddle.net/yurik417/8NdQN/404/
Работает. Спасибо!
Теперь ковыряю, чтобы открывалось на нужном уровне вложенности в зависимости от текущего линка. Вот этот функционал:
Цитирую LiMasscode:
пока не работает..
Я не очень понимаю формат вашей работы: у вас команда или вы один? беретесь ли помогать с сайтами, естественно не бесплатно? в jquery у меня явный пробел, а сайт допилить надо.
Я пытаюсь поставить на сайт Ваш скрипт вот с этим функционалом:
http://jsfiddle.net/yurik417/8NdQN/399/
Но мне также хотелось бы, чтобы при переходе по ссылке триггера блок также был раскрыт, как здесь:
http://jsfiddle.net/yurik417/8NdQN/435/
Помогите, пожалуйста!
Спасибо!
Пожалуйста:
http://jsfiddle.net/yurik417/8NdQN/436/
Здравствуйте! не работает такой вариант, там или скобочек много или еще что. И среди скриптов там два раза написано инициализация скрипта, непонятно откуда она начинается. Предыдущий вариант работает отлично
но ссылки на активные пункты меню не раскрываются. Как же все таки сделать так чтоб они были раскрыты?
Дайте ссылку на вашу страницу
Я понимаю что не все хорошо разбираются в JS, и это нормально, но говорить что что-то не работает тогда, когда вы просто не понимаете, что происходит - это не красиво.
<?php
function current_page($page)
{
return (условие, что текущая страница активная) ? ' class="active"' : '';
}
?>
.....
>....
gtrad.ucoz.net
RSS лента комментариев этой записи