Snap Builder Public Codes Library
Snap | Generators | Login | Browse | Search | Enter Code | Export Snap Builder Public Codes Library


Category: Javascript Codes Library >> Navigation / Menus >> Drop Down Menu Description Box

Code Snippet </> Info

Snippet Name: Drop Down Menu Description Box

Description: A drop down menu with a description box of the URL.

Compatible Browsers:
Chrome BrowserFirefox BrowserInternet Explorer BrowserOpera BrowserSafari Browser

Example: View Code Demo


Author: Sandeep Gangadharan

Last Modified: 2014-05-17 07:04:47

Language: javascript

Highlight Mode: javascript

Copy Codes: Use Free Notepad ++
Bookmark and Share

Snap HTML Code Editor:
Paste the source code, make changes and instantly see it in live preview.
Snap HTML Code Editor

  About Copying
Copied To Clipboard!

<!DOCTYPE html> <head> <title>Drop Down Menu Description Box Javascript Code Snippet</title> <style> BODY {font-family:verdana,arial,ms sans serif; font-size:90%; color:#000000;} select {background: rgba(0,0,0,0.3);color:#000;text-shadow:0 1px 0 rgba(0,0,0,0.4);} option:not(:checked) {background-color:#dddddd; color:#000;} input {background-color: rgba(0,0,0,0.3);border-color:efefef; color:#000; font-family:verdana, arial, ms sans serif; font-weight:bold; font-size:10pt; text-align:center;text-shadow:0 1px 0 rgba(0,0,0,0.4)} </style> <script> <!-- /* Begin Drop Down Menu Description Box == This Script Free To Use Providing This Notice Remains == == This Script Has Been Found In The Free Public Codes Library == == NOTICE: Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == == Created by: Sandeep Gangadharan : : Creative Commons License == */ var message=new Array(); message[0] = "When you select any links from the above menu their corresponding explanatory content will automatically be shown in this textarea. By clicking the 'Go' button you will be taken straight to the chosen link!" message[1] = "For some free and useful scripts that have been created keeping in mind their usability, practicability, and compatibility. Be sure to check them all!" message[2] = "The free complete web development resource center. The one place to go for all your web designing needs and for some very useful freeware programs and links to some of the best available web resources!" message[3] = "The best place to go for some very useful webmaster tips and tricks to enhance your web pages." function chooseText() { if (document.dpdw.choice.selectedIndex==0) { document.dpdw.text.value=message[0]; } if (document.dpdw.choice.selectedIndex==1) { document.dpdw.text.value=message[1]; } if (document.dpdw.choice.selectedIndex==2) { document.dpdw.text.value=message[2]; } if (document.dpdw.choice.selectedIndex==3) { document.dpdw.text.value=message[3]; } } function gotoURL() { if (document.dpdw.choice.selectedIndex==0) { return; } if (document.dpdw.choice.selectedIndex==1) { location.href=""; } if (document.dpdw.choice.selectedIndex==2) { location.href=""; } if (document.dpdw.choice.selectedIndex==3) { location.href=""; } } // --> </script> </head> <body> <table> <tr> <td> <form name="dpdw"> <select name="choice" onChange="chooseText()"> <option selected value="0">Select from the following .... &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option> <option value="1">Sandeep's JavaScript Page</option> <option value="2">SnapBuilder HTML5 / CSS3</option> <option value="3">Site Pro News</option> </select> <input type="button" value="Go!" onClick="gotoURL();" /><br /> <textarea name="text" rows="6" cols="40" wrap="virtual"></textarea> </form> </td> </tr> </table> <p>Adjust the STYLES to suit your needs, or remove them all together.</p> </body> </html>

[ Snippet Options ]


© 2002 -  Snap Builder Public Codes Library