Welcome to Virtual Tutorial World Guest!



Show Hide Menu

 
Post new topic   Reply to topic    VTW Forum Index -> Javascript
View previous topic :: View next topic  
Author Message
Please Register and Login to this forum to stop seeing this advertsing.





Tokens:


Posted:     Post subject:
Back to top
computergeek67
Administrator
Administrator


Joined: 31 Jul 2007
Posts: 144


Tokens: 147
Location: US

PostPosted: Mon Oct 22, 2007 6:41 am    Post subject: Show Hide Menu Reply with quote
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.
Code:
<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.
Code:
<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.
Code:
<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.

-toxiclab.org


_________________



Come to me if you have any questions
Back to top
View user's profile Send private message Visit poster's website
Display posts from previous:   
Post new topic   Reply to topic    VTW Forum Index -> Javascript All times are GMT - 5 Hours
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum

Card File  Gallery  Forum Archive
Powered by phpBB © 2001, 2005 phpBB Group
Virtual Tutorial World ©2007-2008 computergeek67

Affiliates