www.webdeveloper.com
Results 1 to 2 of 2

Thread: creating "tab like" menus

  1. #1
    Join Date
    Dec 2002
    Posts
    2

    creating "tab like" menus

    i would like to create tab like menus, like the ones that are used in hotmail(for home, inbox, outbox etc) or preferably, a button that when the mouse pointer is on it, shows a drop down list of different headings.

  2. #2
    Join Date
    Dec 2002
    Location
    Seattle, WA
    Posts
    1,676
    this is a simple example:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script language="JavaScript" type="text/JavaScript">
    <!--
    function tabs(view,hideA,hideB) {
      if (view.style.visibility == "hidden") {
      view.style.visibility = "visible";
      view.style.display = "block";
      hideA.style.visibility = "hidden";
      hideB.style.visibility = "hidden";
      hideA.style.display = "none";
      hideB.style.display = "none";
        }else{view.style.visibility = "hidden";
            view.style.display = "none";
          }
    }
    //-->
    </script>
    </head>
    <body>
    <div><a href="javascript:void(0);" onClick="tabs(indexA,indexB,indexC)">tab a</a> 
      | <a href="javascript:void(0);" onClick="tabs(indexB,indexA,indexC)">tab b</a> 
      | <a href="javascript:void(0);" onClick="tabs(indexC,indexA,indexB)">tab c</a></div>
    <div id="indexA" style="visibility: hidden;">clicking on tab a displays index 
      a</div>
    <div id="indexB" style="visibility: hidden;">clicking on tab b displays index 
      b</div>
    <div id="indexC" style="visibility: hidden;">clicking on tab c displays index 
      c</div>
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles