Codango: ASP Code Snippet

JSP

Share The Love

You are 1 of 23 Active ASP Visitors

ASP Home | Resources | Write a Review | My Favor-Its | Login

Dynamic menuCode Snippet

Read Reviews | Report Errors

[+][+]

0
Reviews

1
Favor-It

This example shows how easy it is to create a dynamic drop down menu using miopages. - Requires no clientside code. Live example at:http://www.naltabyte.se/mio/menu.asp Code: ASP 3.0 & JScript


		Code Snippet

Code Written By: Mikael Bergkvist from www.naltabyte.se

<html>

<head>
<title>XML/ASP</title>
<include> 
  <![CDATA[ 
 <!-- #INCLUDE FILE="src/miopages.asp" --> 
<% Mio_Start() %> 
  ]]>
</include>

<serverscript allow="setHidden:setVisible:setText">

<![CDATA[
function setHidden(str) {
  s=str.split(":");
  for(var j=0; j < s.length; j++){eval("setStyle('visibility', 'hidden', '"+s[j]+"')");}
 }
function setVisible(str) {
  s=str.split(":");
  for(var j=0; j < s.length; j++){eval("setStyle('visibility', 'visible', '"+s[j]+"')");}
 }
function setText(obj,arg) {
 getElementByID(obj).text=arg;
 }
]]>

</serverscript>

<style>
table
{
position:absolute;
top:0;
left:0;
z-index:3;
border:0;
margin:0;
padding:0;
background-color:white;
}
td{margin:0;padding:0;}
tr{margin:0;padding:0;}
a
{
margin:0;
padding:2px;
color:black;
font-family:verdana;
font-size:11px;
text-decoration:none;
background-color:white;
height:23px;
width:150px;
border:black 1px solid;
display:block;
}
a:hover
{
margin:0;
padding:2px;
background-color:black;
color:white;
font-family:verdana;
font-size:11px;
text-decoration:none;
height:23px;
width:150px;
border:black 1px solid;
display:block;
}
div
{
padding:0;
border:0;
margin:0;
background-color:white;
}
span{display:block;}
body {background-color:white;}
.clicker{width:100%;height:100%;position:absolute;top:0;left:0;z-index:1}
</style>

</head>
<body>

<div class="clicker" onclick="self.location.exec='setHidden(&quot;a1:a2:a3:a31:a32:a33&quot;)'"></div>

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<a exec="setVisible('a1');setHidden('a2:a3:a31:a32:a33')">
Options nr_1
</a>
<div id="a1" style="position:absolute;z-index:5;visibility:hidden">
<a exec="setHidden('a1:a2:a3');setText('target','Test_1.1')">Option_1</a>
<a exec="setHidden('a1:a2:a3');setText('target','Test_1.2')">Option_2</a>
<a exec="setHidden('a1:a2:a3');setText('target','Test_1.3')">Option_3</a>
</div>
</td>
<td>
<a exec="setVisible('a2');setHidden('a1:a3:a31:a32:a33')">
Options nr_2
</a>
<div id="a2" style="position:absolute;z-index:5;visibility:hidden">
<a exec="setHidden('a1:a2:a3');setText('target','Test_2.1')">Option_1</a>
<a exec="setHidden('a1:a2:a3');setText('target','Test_2.2')">Option_2</a>
<a exec="setHidden('a1:a2:a3');setText('target','Test_2.3')">Option_3</a>
</div>
</td>
<td>
<a exec="setVisible('a3');setHidden('a1:a2')">
Options nr_3
</a>
<div id="a3" style="position:absolute;z-index:5;visibility:hidden">



 <a exec="setVisible('a31');setHidden('a32:a33')">
 Options_1 <b style="color:white">#</b>
 </a> 
 
 <span style="margin-left:20px">
 <div id="a31" style="position:absolute;z-index:5;visibility:hidden">
 <a exec="setHidden('a31');setText('target','Test_3.1.1')">Option_1</a>
 <a exec="setHidden('a31');setText('target','Test_3.1.2')">Option_2</a>
 <a exec="setHidden('a31');setText('target','Test_3.1.3')">Option_3</a>
 </div>
 </span>
 
 

 <a exec="setVisible('a32');setHidden('a31:a33')">
 Options_2 <b style="color:white">#</b>
 </a> 
 
 <span style="margin-left:20px">
 <div id="a32" style="position:absolute;z-index:5;visibility:hidden">
 <a exec="setHidden('a32');setText('target','Test_3.2.1')">Option_1</a>
 <a exec="setHidden('a32');setText('target','Test_3.2.2')">Option_2</a>
 <a exec="setHidden('a32');setText('target','Test_3.2.3')">Option_3</a>
 </div>
 </span>
 
 

 <a exec="setVisible('a33');setHidden('a31:a32')">
 Options_3 <b style="color:white">#</b>
 </a> 
 
 <span style="margin-left:20px">
 <div id="a33" style="position:absolute;z-index:5;visibility:hidden">
 <a exec="setHidden('a33');setText('target','Test_3.3.1')">Option_1</a>
 <a exec="setHidden('a33');setText('target','Test_3.3.2')">Option_2</a>
 <a exec="setHidden('a33');setText('target','Test_3.3.3')">Option_3</a>
 </div>
 </span>
 

</div>
</td>
</tr>
<tr>
<td align="middle" colspan="3">
<br/>
<br/>
<br/>
Currently active selection: <b id="target">..</b>
</td>
</tr>
</table>

</body>
</html>

To use the code above, click and drag your mouse over the code to highlight it. Then right click on the highlighted code and click "Copy." Now you may paste it into your code editor.

Submit Your Own Code to Codango


Link to Us \| About Us		Advertise \| Contact Us \| Website Help
Write a User Review Today! Its Fun, Fast, and Easy!	Codango Home \| PHP \| ASP.NET \| ASP \| JSP Advertise With Us \| About Us \| Terms of Use \| Privacy Policy


� 2013 ezd.com, All rights reserved