Simple html drop down menus

Discussion in 'Graphics & Webdesign' started by richm8026, Jul 8, 2009.

  1. richm8026

    richm8026 New Member

    Messages:
    138
    Likes Received:
    0
    Trophy Points:
    0
    I'm having some difficulties here, I want to create a simple drop down menu to save room on my, I know to use <option value="Free Sign Up"> But I want it to do go to this site: www. myleague. com/badattitudes/FreeSignUp, how would i make that Option Value load that link? Thanks in advance! ;)
     
    Last edited by a moderator: Jul 10, 2009
  2. richm8026

    richm8026 New Member

    Messages:
    138
    Likes Received:
    0
    Trophy Points:
    0
    Sorry, I do not use Microsoft, so that stuff isn't handy for me..
     
  3. Chris S

    Chris S Retired

    Messages:
    2,055
    Likes Received:
    1
    Trophy Points:
    38
    do you want it so that when they chose the drop down it redirects them to a new page, or do you want them to have to submit the form and it will redirect them to a new page.

    The first can be done in javascript and the second can be done in php or most any other programming language
     
  4. richm8026

    richm8026 New Member

    Messages:
    138
    Likes Received:
    0
    Trophy Points:
    0
    Thanks, and yes, just redirect, it doesn't have to be anything fancy... So, I figured maybe JS would be the best way to go.
     
  5. Chris S

    Chris S Retired

    Messages:
    2,055
    Likes Received:
    1
    Trophy Points:
    38
    Here is something that I found online...not sure how well it will work, but it is worth a shot

    Code:
    <script type="text/javascript">
    var selectmenu=document.getElementById("mymenu")
    selectmenu.onchange=function(){
     var chosenoption=this.options[this.selectedIndex]
     if (chosenoption.value!="nothing"){
      window.location = chosenoption.value
     }
    }
    </script>
    
    <form id="aform">
    <select id="mymenu" size="1">
    <option value="nothing" selected="selected">Select a site</option>
    <option value="http://www.dynamicdrive.com">Dynamic Drive</option>
    <option value="http://www.codingforums.com">Coding Forums</option>
    <option value="http://www.cssdrive.com">CSS Drive</option>
    </select>
    </form>
    
    that is worth a shot...i haven't tried it
     
  6. sourfacedcyclop

    sourfacedcyclop New Member

    Messages:
    221
    Likes Received:
    0
    Trophy Points:
    0
    This works okay,

    Code:
    <form>
    <select>
    <option OnClick="window.location='yourlink'"> Blah Blah Blah</option>
    </select>
    </form>
    
     
    Last edited: Jul 11, 2009
  7. richm8026

    richm8026 New Member

    Messages:
    138
    Likes Received:
    0
    Trophy Points:
    0
    Thanks, it makes sense, =-)
    Edit:
    It makes sense, but it doesn't work, it acts like it's missing some kind of operand.
     
    Last edited: Jul 11, 2009
  8. Chris S

    Chris S Retired

    Messages:
    2,055
    Likes Received:
    1
    Trophy Points:
    38
    I would try the second one posted, if you want, I can look into fixing the version, but like I suggested, I would try the other one.
     
  9. richm8026

    richm8026 New Member

    Messages:
    138
    Likes Received:
    0
    Trophy Points:
    0
    Thanks, I tried them both, they both didn't work, I wonder what's going on with them..
     
  10. sourfacedcyclop

    sourfacedcyclop New Member

    Messages:
    221
    Likes Received:
    0
    Trophy Points:
    0
    Did you use a valid link format for the links? Also, for my code, you need to make sure the ' ' are still in place at the beginining and end of the link.
     
    Last edited: Jul 12, 2009
  11. Chris S

    Chris S Retired

    Messages:
    2,055
    Likes Received:
    1
    Trophy Points:
    38
    here is one that is more slimmed down.

    Code:
    <script type="text/javascript">
    function redirectPage(dropdownID){
    	var menuOption = document.getElementById(dropdownID).value;
    	if(menuOption != 'nothing'){
    		window.location = menuOption;
    	}
    }
    </script>
    
    <select id="dropdown" size="1" onchange="redirectPage('dropdown');">
    <option value="nothing" selected="selected">Select a site</option>
    <option value="http://www.dynamicdrive.com">Dynamic Drive</option>
    <option value="http://www.codingforums.com">Coding Forums</option>
    <option value="http://www.cssdrive.com">CSS Drive</option>
    </select>
    </form>
    
    I do have one question, how isn't it working. Is it that you are getting page not found, or is it not going anywhere. If the second is the issue, is there a live page that I could see?
     
  12. richm8026

    richm8026 New Member

    Messages:
    138
    Likes Received:
    0
    Trophy Points:
    0
    Thanks Chris, that new updated version you sent is working, the one you just sent.
     
  13. Chris S

    Chris S Retired

    Messages:
    2,055
    Likes Received:
    1
    Trophy Points:
    38
    no problem...glad i could help

    good luck with your site
     
  14. richm8026

    richm8026 New Member

    Messages:
    138
    Likes Received:
    0
    Trophy Points:
    0
  15. ayobamigolden55

    ayobamigolden55 New Member

    Messages:
    2
    Likes Received:
    0
    Trophy Points:
    0

Share This Page