Convert WP Menu to a Drop Down for Mobile browser

admin管理员组

文章数量:1130349

I'm working on a wp project with responsive theme.

I have single level nav menu at the top of the site, that I want to change to a Select Option tag for mobile browsers (small screens) with options for the nav items which is much easier to select in mobile site. So the UL LI menu will be replaced with a Selection- Option tag for mobile.

However, I'm unable to figure out how to change wp menu to a select option dropdown.

I'm working on a wp project with responsive theme.

I have single level nav menu at the top of the site, that I want to change to a Select Option tag for mobile browsers (small screens) with options for the nav items which is much easier to select in mobile site. So the UL LI menu will be replaced with a Selection- Option tag for mobile.

However, I'm unable to figure out how to change wp menu to a select option dropdown.

• menus
• mobile
• responsive

Share Improve this question asked Dec 2, 2012 at 6:41 KrunalKrunal 22133 gold badges88 silver badges1717 bronze badges

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 1

Here's what I've put together from different articles/themes:

files to modify:

functions.php

header.php

style.css

js (create folder "js" in theme root directory)

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();
      });    
     });

save as custom.js and place in the js folder of the theme directory.

The functions.php file:

Open your themes functions.php file and locate the code that enqueues any existing styles or scripts and add this to the init:

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

. add this line to the If your theme doesn't enqueue add this to your functions.php file:

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:

Replace/add current wp-nav css id or class as follows:

<nav>...Your themes navigation code here</nav>

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;
}
}

Adjust the css style to your liking.

If your menu includes children the following code works well (in place of the above 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("- "))
     }
 });
});

simply use this plugin. Its better than just a dropdown menu

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

I'm working on a wp project with responsive theme.

I have single level nav menu at the top of the site, that I want to change to a Select Option tag for mobile browsers (small screens) with options for the nav items which is much easier to select in mobile site. So the UL LI menu will be replaced with a Selection- Option tag for mobile.

However, I'm unable to figure out how to change wp menu to a select option dropdown.

I'm working on a wp project with responsive theme.

I have single level nav menu at the top of the site, that I want to change to a Select Option tag for mobile browsers (small screens) with options for the nav items which is much easier to select in mobile site. So the UL LI menu will be replaced with a Selection- Option tag for mobile.

However, I'm unable to figure out how to change wp menu to a select option dropdown.

• menus
• mobile
• responsive

Share Improve this question asked Dec 2, 2012 at 6:41 KrunalKrunal 22133 gold badges88 silver badges1717 bronze badges

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 1

Here's what I've put together from different articles/themes:

files to modify:

functions.php

header.php

style.css

js (create folder "js" in theme root directory)

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();
      });    
     });

save as custom.js and place in the js folder of the theme directory.

The functions.php file:

Open your themes functions.php file and locate the code that enqueues any existing styles or scripts and add this to the init:

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

. add this line to the If your theme doesn't enqueue add this to your functions.php file:

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:

Replace/add current wp-nav css id or class as follows:

<nav>...Your themes navigation code here</nav>

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;
}
}

Adjust the css style to your liking.

If your menu includes children the following code works well (in place of the above 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("- "))
     }
 });
});

simply use this plugin. Its better than just a dropdown menu

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

本文标签： Convert WP Menu to a Drop Down for Mobile browser