SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2010
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Dropdown menu with logo (image), link, and to open a new tag

    Hi everybody,

    Would really appreciate some help with the following:

    I want to make a drop down menu with:

    - links
    - logo (image) of each company I link to.
    - that opens the link in a new tab

    I copied something like the code bellow but it doesn't seem to work.

    Thanks for your assistance!


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <body>

    <form action="">
    <form name="jump">
    <p><select name="menu">

    <option selected>KCS GROUP Websites</option>

    <option value="<a href="http://www.abc111.com"><img src="images/navigation/abc.jpg" alt="abc" height="10" width="10" style= "border: none;"/>ABC</a></option>
    <option value="<a href="http://www.abc111.com"><img src="images/navigation/abc.jpg" alt="abc" height="10" width="10" style= "border: none;"/>ABC</a></option>
    <option value="<a href="http://www.abc111.com"><img src="images/navigation/abc.jpg" alt="abc" height="10" width="10" style= "border: none;"/>ABC</a></option>

    </select>

    <input type="button" value="GO!" onClick="tab.open(this.form.jumpmenu.options[this.form.jumpmenu.selectedIndex].value;">
    </p>
    </form>

    </body>
    </html>

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,333
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    You may need a bit of JavaScript for that. A better option would be to use a standard drop down list, made with an unordered list (like normal site menus).

    anyhow, I have seen it done with a select, as found here:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
    	<title>Test</title>
    	<script type="text/javascript">
    		function navigate(o)
    		{
    			if(document.getElementById && document.createTextNode)
    			{
    				if(o.getElementsByTagName('select')[0])
    				{
    					var sel=o.getElementsByTagName('select')[0];
    					self.location=sel.options[sel.selectedIndex].value;
    				
    				}
    			}
    		}
        </script>
    </head>
    <body>
    <form action="" method="post" onsubmit="navigate(this);return false;">
    	<label for="s1">Navigate to:</label>
    
    	<select name="s1" id="s1">
    		<option value="http://www.alistapart.com">A list apart</option>		
    		<option value="http://www.icant.co.uk">Christian Heilmann</option>		
    		<option value="http://www.evolt.org">Evolt</option>		
    	</select>
    	<input type="submit" value="send" />
    </form>
    
    </body>
    </html>


Tags for this Thread

Bookmarks

Posting Permissions

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