www.webdeveloper.com
Results 1 to 8 of 8

Thread: Help with drop-down menu

  1. #1
    Join Date
    Aug 2014
    Posts
    2

    Help with drop-down menu

    Hi everybody, I got this script from another post on this site but I want the links to open in the same tab instead of another one. Any help would be really appreciated

    HTML Code:
    <html>
    <head>
    </head>
    <body>
    <select name="menu1" id="menu1">
    <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( 'menu1' );
     urlmenu.onchange = function() {
          window.open( this.options[ this.selectedIndex ].value );
     };
    </script>
    </body>
    </html>

  2. #2
    Join Date
    Feb 2008
    Location
    Amsterdam, The Netherlands
    Posts
    270
    Quote Originally Posted by duhfear View Post
    Hi everybody, I got this script from another post on this site but I want the links to open in the same tab instead of another one. Any help would be really appreciated
    This should work for you:

    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Demo</title>
    <body>
    
        <select name="menu1" id="menu1">
            <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('menu1');
            urlmenu.onchange = function() {
              window.location.href = this.options[this.selectedIndex].value;
              //or simply: window.location.href = this.value;
            }
        </script>
    
    </body>
    </html>
    Do keep in mind that the term for this is: select menu. If you would ever search with the term "drop-down menu", you will primarily get links to pages on regular hover-driven multi-level drop-down navigation menus.
    Last edited by Frank62; 08-27-2014 at 05:04 PM.
    .
    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

  3. #3
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,348
    maybe location.replace(url); would be better than location.href = url;

    Difference being that replace replaces the page without updating the browser history and href is like clicking on a link so the history is updated.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  4. #4
    Join Date
    Feb 2008
    Location
    Amsterdam, The Netherlands
    Posts
    270
    Quote Originally Posted by \\.\ View Post
    maybe location.replace(url); would be better than location.href = url;
    Difference being that replace replaces the page without updating the browser history and href is like clicking on a link so the history is updated.
    That would surprise me, but may nonetheless be possible.

  5. #5
    Join Date
    Aug 2014
    Posts
    2
    Thank you so much, it works perfect!

  6. #6
    Join Date
    Dec 2013
    Posts
    10

    Cool Pull-down Menu

    Pull-down Menu
    Code:
    Pull-down Menu
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
    <html>
    <head>
    <title>Pull Down Menu</title>
    </head>
    <body>
    
    <h1 align="center">pc order form</h1>
    
    <hr>
    
    <form action="mailto:happycodings.com@gmail.com" method="post">
    
    <b>pc type:</b>
    <select name="pc">
      <option value="asus">asus
      <option value="gigabyte">gigabyte
      <option value="alien">alien
      <option selected>pc
    </select>
    
    </form>
    <hr>
    </body>
    </html>

  7. #7
    Join Date
    Oct 2013
    Posts
    484
    Quote Originally Posted by happycodings View Post
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
    Wow! Really? HTML 3.2? Dude, that's like 1996! And no "Submit" button? How is your form supposed to do anything?

    It's really time to update your site's example code -- at least the HTML portion.

    Let's drag your code at least partly into the 21st century:
    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Pull Down Menu</title>
    <style>
       h1 {text-align:center;}
       label {font-weight:bold;}
    </style>
    </head>
    <body>
    
    <h1>pc order form</h1>
    
    <form action="mailto:happycodings.com@gmail.com" method="post">
    
    <label for="pc">pc type:</label> 
    
    <select id="pc" name="pc" required> 
      <option value="">-Choose-</option>
      <option value="asus">asus</option>
      <option value="gigabyte">gigabyte</option>
      <option value="alien">alien</option>
    </select>
    
    <input type="submit" value="Submit">
    
    </form>
    
    </body>
    </html>
    Last edited by Kevin2; 09-03-2014 at 07:15 PM.

  8. #8
    Join Date
    Sep 2014
    Posts
    55
    Drop down menus are not possible with just HTML. They can be achieved with javascript (as others have suggested), or with CSS.

    There are several ways of doing it with CSS. One is to create your menu as set of links in unordered lists, such as:

    <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="page1.html">Page One</a><ul>
    <li><a href="page1a.html">Sub Page 1A</a></li>
    <li><a href="page1b.html">Sub Page 1B</a></li>
    </ul></li>
    <li><a href="page2.html">Page Two</a><ul>
    <li><a href="page2a.html">Sub Page 2A</a></li>
    <li><a href="page2b.html">Sub Page 2B</a></li>
    </ul></li>
    </ul>

    Be careful to get the nesting of the <ul>s inside of <li>s correct.

    Place the menu in a named div such as:

    <div id="menu">

    </div>

    Then all you need to do is add some CSS styling - either in an external stylesheet or in the page header.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles