选择框菜单不加载页面
我是我的Wordpress(与Buddypress)应用程序我使用一个响应主题。不过,如果屏幕宽度为< = 768px,我已将菜单更改为选择框下拉菜单。选择框菜单不加载页面
你可以在下面看到我的想法,这是通过使用两个wp_nav_menu完成的,其中一个(在walker的帮助下)创建菜单作为选择下拉菜单(当然借助responsive.css )。
但是,我在这里一个问题,我需要帮助:
的选择框menulooks正确的,但如果我在菜单没有什么改变选项实际情况(即页面没有改变)。怎么来的?
的header.php:
<div id="navigation" role="navigation">
<?php
<?php
wp_nav_menu(array(
'container' => false,
'menu_id' => 'nav',
'theme_location' => 'primary',
'fallback_cb' => 'bp_dtheme_main_nav')
);
wp_nav_menu(array(
'container' => false,
'menu_id' => 'nav',
'theme_location' => 'primary', // your theme location here
'walker' => new Walker_Nav_Menu_Dropdown(),
'items_wrap' => '<select>%3$s</select>',
'fallback_cb' => 'bp_dtheme_main_nav'
));
class Walker_Nav_Menu_Dropdown extends Walker_Nav_Menu{
function start_lvl(&$output, $depth){
$indent = str_repeat("\t", $depth);
}
function end_lvl(&$output, $depth){
$indent = str_repeat("\t", $depth);
}
function start_el(&$output, $item, $depth, $args){
$item->title = str_repeat(" ", $depth * 4).$item->title;
parent::start_el(&$output, $item, $depth, $args);
$output = str_replace('<li', '<option', $output);
}
function end_el(&$output, $item, $depth){
$output .= "</option>\n";
}
} ?>
</div>
编辑:我意识到,这呈现的选择选项不包含任何值,所以我不能抢重定向的期权价值。代码显然有些问题,但是什么?
如果我正确地阅读你的问题,那么缺少的部分是当选择菜单中的一个选项时,更改window.location
的Javascript。
将以下内容添加到您的onload JS中;
$("#responsive-nav select").change(function() {
window.location = $(this).find("option:selected").val();
});
编辑
好了,我其实只是落实到我做我自己的主题这一点。我看你使用一招小马的回答这个问题 -
我不知道他们是如何得到这工作,因为没有导航使用(就像url值已经指出),所以我修改了如下的start_el
方法;
function start_el(&$output, $item, $depth, $args){
// add spacing to the title based on the depth
$item->title = str_repeat(" ", $depth * 4).$item->title;
parent::start_el(&$output, $item, $depth, $args);
$href = ! empty($item->url) ? ' value="' . esc_attr($item->url) .'"' : '';
// no point redefining this method too, we just replace the li tag...
$output = str_replace('<li', '<option '.$href, $output);
}
我不停的JavaScript一样的上方,我裹在我的header.php我wp_nav_menus呼叫与ID responsive-nav
形式;
<!-- RESPONSIVE NAVIGATION FLIP -->
<form id="responsive-nav" action="" method="post">
<select>
<option value="">Navigation</option>
<?php
$menu = wp_nav_menu(array(
'theme_location' => 'primary',
'walker' => new Walker_Nav_Menu_Dropdown()
));
?>
</select>
</form>
<!-- /END RESPONSIVE NAV -->
谢谢。现在尝试,但它不起作用,因为显然选择选项没有任何值(!?)。在构建这个菜单的代码中显然是错误的。你能看到它是什么吗? – holyredbeard 2013-03-03 13:37:09
太棒了,像魅力一样工作!非常感谢。只要有可能就会给你赏金:) – holyredbeard 2013-03-03 18:19:14
非常棒!这太好了,但也许有人可能会用一个神奇的答案和舀这个奖金来蒸蒸日上;) – McNab 2013-03-03 19:44:26
我已经为自己工作了,这比我之前使用的解决方案要更加诚实:)看到我的修改后的答案。 – McNab 2013-03-03 15:10:16