CODEWITHSUNDEEP
phphtmlwordpress
Kesar Sisodiya
Kesar Sisodiya

Reputation: 1624

How to make custom menu using option select in wordpress

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?

Upvotes: 2

Views: 1288

Answers (1)

M&#214;RK
M&#214;RK

Reputation: 991

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

Upvotes: 1

Related Questions