Celebrating 7 Years! Get up to $30 off GeneratePress Premium!

[Resolved] Adding a Custom Selection Menu?

Home Forums Support [Resolved] Adding a Custom Selection Menu?

Home Forums Support Adding a Custom Selection Menu?

  • This topic has 5 replies, 2 voices, and was last updated 3 years ago by Tom.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #556618
    Muhammad Qasim

    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.

    #556893
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    What exactly would happen when the user made a selection? It’s just a plain select input πŸ™‚

    #556974
    Muhammad Qasim

    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.

    #557304
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #560120
    Muhammad Qasim

    Thanks a lot sir. It worked and the result is what I was wishing for. Thank you very much again πŸ™‚

    #560163
    Tom
    Lead Developer
    Lead Developer

    Awesome, glad I could help! πŸ™‚

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.