Jump to content

Optgroup tags with links

Guest ZurfaceJ

By Guest ZurfaceJ
in HTML/XHTML

 Share

Recommended Posts

Guest ZurfaceJ

Guest ZurfaceJ

Posted
Posted

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
pulpfiction Dedicated Member

pulpfiction

Posted
Posted

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
jlhaslip Devoted Member

jlhaslip

Posted
Posted

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...