Требуется: горизонтальное меню второго уровня. Скрытое по умолчанию. Появляющееся при наведении на родительский пункт меню первого уровня. И видимое во время просмотра текущего подраздела.
Доб.(29.фев.2012) Кому не интересно следить за ходом мысли, то переходите сразу к итоговому решению в конце сообщения. Опишу траекторию решения. Имею WP 3.1.2. Шаблон — по умолчанию, «twentyten». Само меню завел стандартными средствами: внешний вид -> меню. В шаблоне уже реализована обработка меню второго уровня. Только оно вертикальное. И выводится лишь при наведении мыши. У меня подменю небольшие, по 2-3 пункта. Поэтому вертикальность поменял на горизонтальность с помощью CSS. Просто увеличил ширину контейнера ul для подменю, чтобы вмещались все подпункты.
Предполагал, что с видимостью будет трудно. Оказалось не особенно. Понятно, что поменять параметры видимости можно с помощью javascript. Знаком с ним поверхностно. Начал, как обычно, с поиска готовых решений. Нашел статью про выпадающее меню в WordPress. В самом конце есть интересующий код для отображения выпадающего меню постоянно, если дочерняя страница активна.
< script type="text/javascript">
jQuery(document).ready(function(){
if(jQuery("#menu li").hasClass('current_page_parent')){
jQuery("#menu li ul").show();
}
jQuery("#menu li").hover(function(){
jQuery(this).find('ul').show('slow');
},
function(){
if (!jQuery(this).hasClass('current_page_parent')){
jQuery(this).find('ul').hide();
}
}
);
});
< /script>Внес поправки под WP 3.1.2/twentyten. Класс — current-menu-parent. Заголовок моего меню в админке — menuhead, получается айдишник — menu-menuhead. Заработало. Но с ошибкой. В некоторых случаях видны два подменю одновременно. Убрал функции для hover (выделено серым). Использовал только первую функцию (выделено желтым). Естественно, видны все подменю одновременно.
Мой браузер — FireFox. Для него есть полезное расширение DOM Inspector. С ним удобнее разбираться в объектах и их свойствах, чем обычным просмотром кода страницы.
Снова поиск «обращение к объектам javascript». Набрел на интересный сайт по jQuery. В левом меню глянул подходящий пункт «Селекторы jQuery, иерархия». И, наконец-то, осенило. В методе show просто добавил класс к контейнеру подменю (выделено оранжевым). Все заработало как надо.
< script type="text/javascript">
$(document).ready(
function(){
if($("#menu-menuhead li").hasClass('current-menu-parent')){
$("#menu-menuhead li.current-menu-parent ul").show();
}
}
);
< /script>Если пунктов подменю больше, чем у меня, то они будут накладываться друг на друга. Нужны поправки и в CSS, и в javascript.
——————-
Ссылки в тему.
codex.wordpress.org, Function Reference / wp_nav_menu()
Спасибо, очень помогло!
Скажите, а если пунктов больше то какие нужно поправки в JS ?
Ух, не помню что тогда думал. Сейчас с ходу не вижу необходимости что-то в JS менять. По идее должно быть достаточно CSS.
А, вспомнил! Там меню может убегать из под мышки. Стандартный метод слишком быстро закрывает показ. В JS было бы удобнее настроить анимацию по времени, чтобы успевать из верхнего меню довести мышку до самых крайних пунктов второго уровня.