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


Category: Javascript Codes Library >> Navigation / Menus >> Multiple Text Links Open Hidden DIV Layers Menu

Code Snippet </> Info

Snippet Name: Multiple Text Links Open Hidden DIV Layers Menu

Description: Multiple text links that open hidden DIV layers.

Compatible Browsers:
Chrome BrowserFirefox BrowserInternet Explorer BrowserOpera BrowserSafari Browser

Example: View Code Demo

Note: Add as many links and hidden DIV's as you need.

Author: Sandeep Gangadharan

Last Modified: 2015-08-26 23:33:58

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>Multiple Text Links Open Hidden DIV Layers Menu Javascript Code Snippet</title> <style> BODY {font-family:verdana,arial,ms sans serif; font-size:90%; color:#000000;} a:link {color:#0000ff; text-decoration:none;} /* unvisited link */ a:visited {color:#0000ff; text-decoration:none;} /* visited link */ a:hover {color:#007730; text-decoration:underline;} /* mouse over link */ a:active {color:#00ff00; text-decoration:underline;} /* selected link */ .boxit { position:absolute; top:60px; left:10px; width:auto; height:16px; padding:8px 8px 8px 8px; border:solid 1px beveled; background-color:#e6e6e6; box-shadow: 0 0 6px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.5); text-shadow:0 1px 0 rgba(0,0,0,0.4);} </style> <script> <!-- /* Begin Multiple Text Links Open Hidden DIV Layers Menu == 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 == == Modified by: == */ (document.getElementById) ? dom = true : dom = false; function hideIt(add) { if (dom) {document.getElementById('DivLayer'+add).style.visibility='hidden';} if (document.layers) {document.layers["DivLayer"+add].visibility='hide';} } function showIt(add) { if (dom) { if (document.getElementById('DivLayer'+add).style.visibility=='visible') { hideIt(add); } else {document.getElementById('DivLayer'+add).style.visibility='visible'} } if (document.layers) { if (document.layers["DivLayer"+add].visibility=='show') { hideIt(add); } else {document.layers["DivLayer"+add].visibility='show'} } window.setTimeout(function() { hideIt(add); }, 5000); // time for the DIV box to automatically close - each 1000 = 1 second } // --> </script> </head> <body> <div id="DivLayer1" class="boxit" style="visibility:hidden;"> <a href="">SnapBuilder</a> |  <a href="">Sivan Design</a> |  <a href="">SiteProNews</a> |  <a href="">ExactSeek</a> </div> <div id="DivLayer2" class="boxit" style="visibility:hidden;"> <a href="">Microsoft Corp.</a> | <a href="">Netscape Corp.</a> | <a href="">Macromedia Inc.</a> | <a href="">Symantec Corp.</a> </div> <div id="DivLayer3" class="boxit" style="visibility:hidden;"> This could be useful not only for links but also for the purpose of popup information! </div> <a href="javascript:showIt(1);"><b>Link 1</b></a>| <a href="javascript:showIt(2);"><b>Link 2</b></a>| <a href="javascript:showIt(3);"><b>Link 3</b></a> <br /><br /> <div id="snippet"> [ This code example from <a href="">Multiple Text Links Open Hidden DIV Layers Menu</a> page. ] </div> </body> </html>

[ Snippet Options ]


© 2002 -  Snap Builder Public Codes Library