Guest ZurfaceJ Posted February 8, 2007 Share Posted February 8, 2007 I want to have a drop down menue that the links path to other sites, I can't seem to find the code anywhere. Any ideas? or do I have to integrate CSS to do that? Either way, doesn't matter as long as someone could assist me Link to comment Share on other sites More sharing options...
pulpfiction Posted February 8, 2007 Share Posted February 8, 2007 Try this.......HTML <select name="url" onChange="return Jump(this);" size="1" ID="Select1"> <option>Redirect links......</option> <option value="http://www.google.com">Google</option> <option value="http://w3schools.com/">W3schools</option> <option value="http://yahoo.com">Yahoo</option> <option value="somesite1.com">Some site 1</option> <option value="somesite2.com">Some site 2</option></select> Javascript function Jump(fe){ var opt_key = fe.selectedIndex; var uri_val = fe.options[opt_key].value; window.open(uri_val,'_top'); return true; } Link to comment Share on other sites More sharing options...
jlhaslip Posted February 8, 2007 Share Posted February 8, 2007 A css-only drop-down menu from cssplay.co.uk <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title> Stu Nicholls | CSSplay | Validating drop down cross-browser menu</title><meta name="Author" content="Stu Nicholls" /><style type="text/css">/* ================================================================ This copyright notice must be untouched at all times.The original version of this stylesheet and the associated (x)htmlis available at [url="http://www.cssplay.co.uk/menus/basic_dd.html"]http://www.cssplay.co.uk/menus/basic_dd.html[/url]Copyright © 2005-2007 Stu Nicholls. All rights reserved.This stylesheet and the assocaited (x)html may be modified in any way to fit your requirements.=================================================================== *//* remove the bullets, padding and margins from the lists */.menu ul{list-style-type:none;padding:0;margin:0;}/* make the top level links horizontal and position relative so that we can position the sub level */.menu li{float:left;position:relative;z-index:100;}/* use the table to position the dropdown list */.menu table{position:absolute;border-collapse:collapse;z-index:80;left:-1px;top:25px;}/* style all the links */.menu a, .menu :visited {display:block;font-size:10px;width:149px;padding:7px 0;color:#000;background:#949e7c;text-decoration:none;margin-right:1px;text-align:center;}/* style the links hover */.menu :hover{color:#444;background:#d4d8bd;}/* hide the sub level links */.menu ul ul {visibility:hidden;position:absolute;width:149px;height:0;}/* make the sub level visible on hover list or link */.menu ul li:hover ul,.menu ul a:hover ul{visibility:visible;}</style></head><body > <h2>The basic cross-browser drop-down validating menu</h2><h3>as per cssplay.co.uk</h3><h3>Updated 30th July 2006</h3><div class="menu"><ul><li><a href="../menu/index.html">DEMOS<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li> <li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li> <li><a href="../menu/form.html" title="Styling forms">styled form</a></li> <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li> <li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li> <li><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></li> <li><a href="../menu/bodies.html" title="fun with background images">fun backgrounds</a></li> <li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li> <li><a href="../menu/em_images.html" title="em size images compared">em sized images</a></li> </ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li><li><a href="index.html">MENUS<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="spies.html" title="a coded list of spies">spies menu</a></li> <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li> <li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li> <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li> <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li> <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li> <li><a href="circles.html" title="circular links">circular links</a></li> </ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li><li><a href="../layouts/index.html">LAYOUTS<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li> <li><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li> <li><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li> <li><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li> <li><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li> </ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li><li><a href="../boxes/index.html">BOXES<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="spies.html" title="a coded list of spies">spies menu</a></li> <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li> <li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li> <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li> <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li> <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li> <li><a href="circles.html" title="circular links">circular links</a></li> </ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li><li><a href="../mozilla/index.html">MOZILLA<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li> <li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li> <li><a href="../mozilla/content.html" title="Using content:">content:</a></li> <li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li> <li><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li> <li><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue</a></li> <li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li> <li><a href="../mozilla/splittext.html" title="Two tone headings">two tone headings</a></li> <li><a href="../mozilla/shadow_text.html" title="Shadow text">shadow text</a></li> </ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul></div></body></html> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now