将WP菜单转换为移动浏览器的下拉式菜单

时间：2012-12-02 作者：Krunal

我正在从事一个具有响应性主题的wp项目。

我在网站顶部有一个单层导航菜单，我想将其更改为移动浏览器（小屏幕）的选择选项标签，其中包含导航项目的选项，在移动网站中更容易选择。因此，UL LI菜单将替换为移动设备的选择选项标签。

然而，我不知道如何将wp菜单更改为选择选项下拉列表。

3 个回复

最合适的回答,由SO网友:Jeremy Jared 整理而成

以下是我从不同的文章/主题中总结出来的内容：

files to modify:

功能。php

标题。php

风格css

js（在主题根目录中创建文件夹“js”）

The Javascript:

jQuery(function() {
      jQuery("<select />").appendTo("nav");
      jQuery("<option />", {
         "selected": "selected",
         "value"   : "",
         "text"    : "Go to..."
      }).appendTo("nav select");
      jQuery("nav a").each(function() {
       var el = jQuery(this);
       jQuery("<option />", {
           "value"   : el.attr("href"),
           "text"    : el.text()
       }).appendTo("nav select");
      });
      jQuery("nav select").change(function() {
        window.location = jQuery(this).find("option:selected").val();
      });    
     });

另存为自定义。js并将其放置在主题目录的js文件夹中。

The functions.php file:

打开主题功能。php文件，找到将任何现有样式或脚本排队的代码，并将其添加到init：

wp_enqueue_script( \'my_customnav_script\', get_template_directory_uri() . \'/js/custom.js\', array( \'jquery\' ) )

。如果主题未排队，请将此行添加到中。将此添加到函数中。php文件：

function add_themescript(){
  if(!is_admin()){
    wp_enqueue_script( \'my_customnav_script\', get_template_directory_uri() . \'/js/custom.js\', array( \'jquery\' ) );
    }
  }
  add_action(\'init\',\'add_themescript\');

The header.php file:

替换/添加当前wp nav css id或类，如下所示：

<nav>一

function add_themescript(){
  if(!is_admin()){
    wp_enqueue_script( \'my_customnav_script\', get_template_directory_uri() . \'/js/custom.js\', array( \'jquery\' ) );
    }
  }
  add_action(\'init\',\'add_themescript\');
The CSS:
@media only screen and (min-width: 480px) {
/* == INTERMEDIATE: Menu == */
#navigation-wrapper, nav ul a, nav ul {
width:75%;
font-size:82%;
}
nav ul {
width:90%;
}
nav a, .next-post a{
float:left;
margin:0 1%;
padding:5px 1%;
margin-bottom:0;
}
nav li:first-child a{
margin-left:0;
}
nav li:last-child  a{
margin-right:0;
}
/* == INTERMEDIATE: IE Fixes == */
nav ul li{
display:inline;
}
}
nav{
width:100%;
float:left;
background:#e44d26;
margin-bottom:9px;
padding:5px 0px 5px 0px;
}
nav select {
display: none;
}
@media (max-width: 960px) {
nav ul     {
display: none;
}
nav select {
display: inline-block;
}
}
 根据您的喜好调整css样式。

SO网友:Nathanial Hesse

如果菜单中包含子菜单，则以下代码运行良好（代替上述javascript）

jQuery(document).ready(function(){
   jQuery(\'ul:first\').attr("id", "MENUID");
   jQuery("ul#MENUID > li:has(ul)").addClass("hasChildren");
   jQuery("ul#MENUID > li:has(ul) > ul > li > a").addClass("isChild"); 
});

jQuery(function() {
    jQuery("<select />").appendTo("nav");
    jQuery("<option />", {
       "selected": "selected",
       "value"   : "",
       "text"    : "Go to...",
    }).appendTo("nav select");

    jQuery("nav a").each(function() {
       var el = jQuery(this);
       jQuery("<option />", {
           "value"   : el.attr("href"),
           "text"    : el.text(),
           "class"   : el.attr("class")
       }).appendTo("nav select");
    });

    jQuery("nav select").change(function() {
      window.location = jQuery(this).find("option:selected").val();
    });    
 });

 jQuery(document).ready(function() {
   jQuery("nav select option").each(function() {
     var el = jQuery(this);
     if(el.hasClass("isChild")){
       jQuery(el.prepend("- "))
     }
 });
});

SO网友:Nirmal Ram

只需使用此插件即可。它比下拉菜单更好

https://wordpress.org/plugins/wp-responsive-menu/

结束

小码农CODE

将WP菜单转换为移动浏览器的下拉式菜单

相关推荐

Custom menus not showing