create drop down menu on page w/my own hyperlinks

hey all. how do I create a drop down menu on a page (could be a recommended plugin) with my own hyperlinks? I have a membership/donation site and would love the donations to be shown in a drop down, nice and clean rather than how they are right now

example --> http://intothemythica.com/join-the-quest/

  • Rupok

    Hi Griffin,

    I've searched for WordPress plugins for this feature but I'm afraid, I could not find any.

    However, you can paste the following code inside your post/page content area in HTML mode:

    <select name="customlinks" id="customlinks">
    <option value="http://www.espn.com">ESPN</option>
    <option value="http://www.cnn.com">CNN</option>
    <option value="http://www.abcnews.com">ABC</option>
    <option value="http://www.cbsnews.com">CBS</option>
    <option value="http://www.foxnews.com">FOX</option>
    </select>
    <script type="text/javascript">
     var urlmenu = document.getElementById( 'customlinks' );
     urlmenu.onchange = function() {
          window.location.replace(this.options[ this.selectedIndex ].value );
     };
    </script>

    Please replace the demo links and option name with your desired links and option name.

    I've tested this on my test site and it's working. So it should work for you too.

    Please let us know if you have any confusion or any further query. We will be glad to help.

    Have a nice day. Cheers!
    Rupok

  • Nithin

    Hi Griffin,

    Hope you are doing good today. :slight_smile:

    But doing something weird. When I click through the link, and I hit the 'back' button on the browser, it goes into the edit screen that I made the dropdown with * if * I'm logged in. If I'm not, it goes to the main page.

    Where have you implemented the above code? I checked the following page, and I wasn't able to notice what you have mentioned when clicking the back link in the browser. I guess it appears when logged in?
    http://intothemythica.com/join-the-quest/

    Possibly a screenshot should help us understand this better, and please enable support access, so that we could give a closer look.

    You can grant access from WPMU DEV > Support > Support Access > Grant Access, or check this manual: http://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

    Please let us know once you enable access, so that we could get this sorted. Have a nice day. :slight_smile:

    Kind Regards,
    Nithin

  • Nithin

    Hi Griffin,

    Hope you are doing good today. :slight_smile:

    I could see the issue, I have changed the given code by Rupok to the following one, and now it seems to work fine:

    <script type="text/javascript">
    var urlmenu = document.getElementById( 'customlinks' );
    urlmenu.onchange = function() {
    window.location.href = this.options[ this.selectedIndex ].value;
    };
    </script>

    Also, how to CENTER the bit of code and make the text bigger?

    Which Text are you talking about? Is it the one pointed in the following screenshot? It's already centered. However, the donate button wasn't center, I have added the following style attribute to it to the form code, and now it looks centered:
    <form action="https://www.paypal.com/xxx" method="post" target="_top" style="text-align: center;">

    Please advise what's the exact change that you are looking, so that I could provide the exact CSS. Please let us know how the above script goes, have a nice day. :slight_smile:

    Best Regards,
    Nithin

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.