How to make custom menu using option select in 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?

You're going to need to create a custom menu walker. The answers on this question have some resources on how to do this. — vvanasten
– vvanasten, Commented May 3, 2014 at 15:59

MÖRK · Accepted Answer · 2014-05-04 09:30:33Z

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

answered May 4, 2014 at 9:30

MÖRK

99112 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MÖRK Over a year ago

Yes I use it all the time.

Collectives™ on Stack Overflow

How to make custom menu using option select in wordpress

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related