WordPress响应式选择菜单 [英] Wordpress Responsive Select Menu
问题描述
我已经在WordPress中创建了一个响应式网站。这个站点有许多不同的导航区域,当通过移动设备查看站点时,我希望将其合并为一个选择菜单。
I have created a responsive site in WordPress. This site has number of different navigation areas which I am wanting to consolidate into to one select menu when site is viewed via mobile device.
我的WordPress header.php中的代码文件当前如下所示:
The code in my WordPress header.php file currently looks like this:
<?php dropdown_menu( array('dropdown_title' => '-- Main Menu --', 'container' => 'div', 'theme_location'=>'main_menu') ); ?>
但是,我想在一个选择下拉列表中合并多个菜单,并尝试了以下操作:
However, I am wanting to consolidate multiple menus within this one select dropdown and have tried this:
<?php dropdown_menu( array('dropdown_title' => '-- Main Menu --', 'container' => 'div', 'theme_location'=>'main_menu', 'theme_location'=>'top_menu', 'theme_location'=>'footer_menu') ); ?>
不幸的是,它仍然仅显示最后一个菜单 footer_menu,而不是将所有三个菜单组合在一起。关于如何正确编辑上面的代码,以便所有菜单都将显示在选择框中的任何想法?
Unfortunately, this still only shows the last menu 'footer_menu' instead of combining all three menus. Any ideas on how I can edit the above code correctly so that all menus will show in the select box as one?
任何帮助将不胜感激。
推荐答案
您可以使用我在某些项目中经常使用的代码,一些简单的操作使pueds自定义jQuery
You can use a code that I use regularly in some projects, something simple that pueds customize jQuery
您可以更改值以设置特定的div
You can change the value to set a specific div
var $mainNav = $('#menu').children('ul'),
代码完整的jQuery
Code complete jQuery
(function($) {
var $mainNav = $('#menu').children('ul'),
optionsList = '<option value="" selected>Navigate...</option>';
// Regular nav
$mainNav.on('mouseenter', 'li', function() {
var $this = $(this),
$subMenu = $this.children('ul');
if( $subMenu.length ) $this.addClass('hover');
$subMenu.hide().stop(true, true).fadeIn(200);
}).on('mouseleave', 'li', function() {
$(this).removeClass('hover').children('ul').stop(true, true).fadeOut(50);
});
// Responsive nav
$mainNav.find('li').each(function() {
var $this = $(this),
$anchor = $this.children('a'),
depth = $this.parents('ul').length - 1,
indent = '';
if( depth ) {
while( depth > 0 ) {
indent += '--';
depth--;
}
}
optionsList += '<option value="' + $anchor.attr('href') + '">' + indent + ' ' + $anchor.text() + '</option>';
}).end().after('<select class="responsive-nav">' + optionsList + '</select>');
$('.responsive-nav').on('change', function() {
window.location = $(this).val();
});
})(jQuery);
这篇关于WordPress响应式选择菜单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!