How to make custom menu using option select in wordpress

1 Views

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?

Post Views: 1

Related posts

Leave a Reply

1 comment

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