Toxiclab.org

Show hide menu

3.1.2006, 17:54
Submited in: JavaScript | Total Views: 126147

In the first javascript tutorial you have the opportunity to learn how to make a simple menu with submenu that is opened and closed by click (onclick).

Menu works like this: some parts of the table (submenues) are left invisible (diplay: none). When we click on the link, javascript navigation function, with ID that should be shown, is called and the hidden part of the table is opened as submenu.

Let us get started with JavaScript function that we will place inside of head tags, together with css.

JavaScript

<script type="text/javascript">
function change(id){
     ID = document.getElementById(id);
    
     if(ID.style.display == "")
          ID.style.display = "none";
     else
          ID.style.display = "";
      }
</script>

Function has an incoming value Id and by it this element is shown or hidden.
Layout of the menu will be controled with css.

Css
<style type="text/css">
BODY { text-align: center}
.tbl { FONT: NORMAL 11px/14px verdana, arial, sans-serif; border: 1px solid black; padding: 3px; Background: #F3F3F3; height: auto }
A {COLOR: #333333; TEXT-DECORATION: none; FONT-SIZE: 11px; font-weight: bold }
A:hover { COLOR: black; TEXT-DECORATION: none; FONT-SIZE: 11px; font-weight: bold}
</style>

Next is the HTML code of the table that will be placed inside of body tags.

<table width="220">
  <tr>
    <td title="Show/Hide" onclick="change(1)" style="cursor: hand" onMouseOver="style.backgroundColor='#cecece';" onMouseOut="style.backgroundColor='#F3F3F3'" class="tbl" width="208" height="25"> <a onclick="change(1)" href="#">Link 1</a></td>
  </tr>

  <!-- Sub menu 1 -->
  <tr style="display: none" id="1">
    <td class="tbl" width="208" height="25" style="background-color: #FFFFFF">
    Sub 1</td>
  </tr>
 
   <tr>
    <td title="Show/Hide" onclick="change(2)" style="cursor: hand" onMouseOver="style.backgroundColor='#cecece';" onMouseOut="style.backgroundColor='#F3F3F3'" class="tbl" width="208" height="25"> <a onclick="change(2)" href="#">
    Link 2</a></td>
  </tr>

 <!-- Sub menu 2 -->
  <tr style="display: none" id="2">
    <td class="tbl" width="208" height="25" style="background-color: #FFFFFF">
    Sub 2</td>
  </tr>
  <tr>
   <td title="Show/Hide" onclick="change(3)" style="cursor: hand" onMouseOver="style.backgroundColor='#cecece';" onMouseOut="style.backgroundColor='#F3F3F3'" class="tbl" width="208" height="25">
   <a href="#">Link</a><a onclick="change(3)" href="#">
  
   </a><a href="#">3</a></td>
  </tr>
<!-- Sub menu 3 -->
  <tr style="display: none" id="3">
    <td class="tbl" width="208" height="25" style="background-color: #FFFFFF">
    Sub 3</td>
  </tr>
</table>


As you see, next to the every menu title and ID tag we placed:
onclick="change(ID)"
which calls javascript function.

Are you a website owner?
Click here to register and submit your tutorials!

Browse by category




Most popular tutorials


Resources Worth visiting


Friends