Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Dec 2002
    Location
    UK
    Posts
    180
    Thanks
    0
    Thanked 0 Times in 0 Posts

    a menu with a show and hide function

    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>

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    United Kingdom Confused: Often
    Posts
    859
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hi, thought your code looked abit big, and using what you had written and i cut the size down for you:


    Code:
    <!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.
    redhead


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •