Site logo

Archived topic

Adding a Custom Selection Menu?

5 replies · Started by Muhammad Qasim on April 21, 2018

Viewing posts 1–6 of 6

Hello

I am really enjoying GeneratePress pro theme so far. I want to add a specific selection menu like this:

http://jmp.sh/PS8Jxrf
http://jmp.sh/l5CXLM7

I mean I want users to be able to select a device and as they click on that device. I am not sure what this menu is called so was unable to find a tutorial or plugin for that.

Help will be highly appreciated.

Hi there,

What exactly would happen when the user made a selection? It's just a plain select input :)

Hello Tom,

Thanks for reply. When user select the input, he will be redirected to the link I have added for that selection. I actually want to create this for "Select Android Device". When user select his device from the menu, he will be redirected to that device page, I will add custom link for that.

The website I am referring to is AndroidMTK.com. Please check his menu in the sidebar.

So let's say you have a select input, like this:

<select id="dynamic_select">
  <option value="" selected>Pick a Website</option>
  <option value="http://www.google.com">Google</option>
  <option value="http://www.youtube.com">YouTube</option>
  <option value="https://www.gurustop.net">GuruStop.NET</option>
</select>

Then you would need some javascript, which you can add into the wp_footer hook in GP Hooks:

<script>
    jQuery(function(){
      // bind change event to select
      jQuery('#dynamic_select').on('change', function () {
          var url = jQuery(this).val(); // get selected value
          if (url) { // require a URL
              window.location = url; // redirect
          }
          return false;
      });
    });
</script>

That should do it :)

Thanks a lot sir. It worked and the result is what I was wishing for. Thank you very much again :)

Awesome, glad I could help! :)

This archived topic is closed to new replies.