Implementing Navigation with a Selection List


var url = list.options[list.selectedIndex].value; 

A so-called "quick link" navigation presents a selection list with a couple of navigation elements. After an item in the list has been selected, the browser loads the associated page.

Implementation-wise, this nice and widely used effect is rather trivial. The target URLs of all navigation elements are stored in the value attributes; a JavaScript function first checks whether a "real" element has been selected and then loads the URL:

A Quick Link Navigation (quicklink.html)

<script language="JavaScript"   type="text/javascript"> function loadURL(list) {   var url = list.options[list.selectedIndex].value;   if (url != "") {     location.href = url;   } } </script> <form>   <select name="urls" onchange="loadURL(this);">     <option value="">Please select...</option>     <option value="http://www.samspublishing.com/"> SAMS</option>     <option value="http://www.hauser-wenz.de/blog/"> H&amp;W blog</option>     <option value="http://www.damonjordan.com/"> Damon</option>   </select> </form> 




JavaScript Phrasebook(c) Essential Code and Commands
JavaScript Phrasebook
ISBN: 0672328801
EAN: 2147483647
Year: 2006
Pages: 178

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net