PDA

View Full Version : a menu with a show and hide function

bfsog
01-08-2003, 09:07 AM
The below is a menu, which is hidden until clicked, and can be hidden by clicking it again.




<!-- This goes in the HEAD of the html file -->

<script language="javascript">
<!--
function showIt() {
if (document.layers) {document.layers["layer1"].visibility='hide';}
else {document.all["layer1"].style.visibility='hidden';}
}
function hideIt() {
if (document.layers) {document.layers["layer1"].visibility='show';}
else {document.all["layer1"].style.visibility='visible';}
}
// -->
</script>

<style>
input {border-style: ridge;}
a:hover {text-decoration: underline}
</style>

</head>


<body>

<span id="layer" style="position:absolute; top:17; left:20; width:250; height:90; visibility:show">
<script>
<!-- author: bfsog@hotmail.com use it as you wish //-->
<!--
function buttonText(type) {
if (type=="Hide Menu ") {document.menu.button.value="Menu";}
else {document.menu.button.value="Hide Menu ";}
showIt();
if (document.menu.button.value=="Hide Menu ") {hideIt();}
}
// -->

<!-- change the value of 'top' and 'left' in the layers properties below to place the menu
in the desired position matching the placement of the button -->
</script>


<form name="menu">
<input type="button" name="button" onClick="buttonText(value);" value="Show Menu" />
</form>
</span>
<div id="layer1" style="position:absolute; top:40; left:20; width:250; height:90; visibility:hidden">
<table bgcolor="yellow" border="1" cellpadding="2" cellspacing="0">

<tr><td><a href="http://www.google.com" style="text-decoration: none"><font face="arial" size="1"><b>google</b></font></a></td></tr>
<tr><td><a href="http://www.hotmail.com" style="text-decoration: none"><font face="arial" size="1"><b>hotmail</b></font></a></td></tr>
</table>
</div>


</body>
redhead
01-10-2003, 07:25 PM
hi, thought your code looked abit big, and using what you had written and i cut the size down for you:



<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title> Menu </title>
<style>
a {
text-decoration: none;
font: bold verdana 10pt;
}
</style>
<script language="javascript">
<!--
function showMenu(f){
if(f){visi="visible";}
else{visi="hidden";}
if(document.layers){document.menu.visibility=visi;}
if(document.all){document.all.menu.style.visibility=visi;}
if(document.getElementById){document.getElementById("menu").style.visibility=visi;}
}
// -->
</script>
</head>

<body>

<input type="button" onclick="showMenu(1)" value="Show Menu" style="position: absolute; top:40px; left: 20px; z-index: 0; width: 150px;">
<div id="menu" style="position: absolute; top: 40px; left: 20px; width: 250px; height: 90px; visibility: hidden; z-index: 40;">
<input type="button" onclick="showMenu(0)" value="Hide Menu" style="width: 150px">
<div style="background-color: #FFFF00; border: 1px solid #000000; width: 150px">
<a href="http://www.google.com">google</a><br>
<a href="http://www.hotmail.com">hotmail</a>
</div>
</div>

</body>
</html>hope it helps.:thumbsup: