如何使用wordpress中的选项选择来制作自定义菜单

Question

I have to make menu for small screen sizes in wordpress template . i want to add some code like below in menu.

<select>
  <option>Home</option>
  <option>About</option>
</select>

wordpress default creating menu through ul li I don't know how to add code in menu. plz anybody can do this?

Answer 1

I am assuming you are creating a responsive site?

If you don't mind some jQuery you can create a select navigation like this:

jQuery( document ).ready(function( $ ) {

  // Create the dropdown base
  $("<select />").appendTo("nav");

  // Create default option "Go to..."
  $("<option />", {
   "selected": "selected",
   "value"   : "",
   "text"    : "Menu"
  }).appendTo("nav select");

  // Populate dropdown with menu items
  $("nav ul li a").each(function() {
   var el = $(this);
   $("<option />", {
     "value"   : el.attr("href"),
     "text"    : el.text()
   }).appendTo("nav select");
  });

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

});

Hide the <select> by default:

nav select {display:none;}

Hide main nav and show <select> on smaller screens:

@media screen and (max-width: 568px) {

  nav select {display:block;}
  nav ul {display:none;}
}