By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
434,824 Members | 2,337 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 434,824 IT Pros & Developers. It's quick & easy.

How to make a menu that shows/hides content with jQuery?

P: 97
Instead of having a menu that redirects to separate pages, I just want my menu to show the content that corresponds to the menu item the user clicked on.

I'm using css to not display any of the contents of the sections where the content is (eg. class=services,class=contact). And I'm trying to get jQuery to show the content the user wants, then hide that content when the user clicks on another menu item and show that content.

This the basic html structure:

Expand|Select|Wrap|Line Numbers
  1. <nav>
  2. <ul>
  3. <li class="navServe">Services</li>
  4. <li class="navContact">Contact</li>
  5. </ul>
  6. </nav>
  7.  
  8. <section class="content">
  9.  
  10. <section class="services">
  11. <p>Content for services section</p>
  12. </section>
  13.  
  14. <section class="contact">
  15. <p>Content for contact section</p>
  16. </section>
  17.  
  18. </section>
  19.  
And this is the jQuery I'm trying:

Expand|Select|Wrap|Line Numbers
  1. $("nav").click(function() {
  2. $(".services").hide("fast");
  3. $(".contact").hide("fast");
  4. $(".content").toggle("fast");
  5. return false;
  6. });
  7.  
So that when the nav is clicked everything is hidden but the content for the list item that was clicked. Could I use 'active' somehow?
Jun 23 '15 #1
Share this Question
Share on Google+
1 Reply


computerfox
100+
P: 278
I use to do this with javascript:

Expand|Select|Wrap|Line Numbers
  1. <script>
  2. var timer= 50;
  3. var item= 0;
  4.  
  5. function showList(num)
  6. {
  7.     if(item) item.style.visibility = 'hidden';
  8.  
  9.         item = document.getElementById(num);
  10.         item.style.visibility = 'visible';
  11. }
  12.  
  13. function closesub()
  14. {
  15.     if(item) item.style.visibility = 'hidden';
  16.     timer = window.setTimeout(500);
  17. }
  18.  
  19. function keepsub()
  20. {
  21.         window.clearTimeout(timer);
  22. }
  23. document.onclick = closesub; 
  24.  
  25. </script>
  26.  
HTML Objects:
Expand|Select|Wrap|Line Numbers
  1. <ul id="modules">
  2.  
  3.  <li onmouseover="showList('profile')" onmouseout="closesub()"><a href="<?php echo $fullPath;?>signout.php">Welcome,  <?php echo $myName;?></a>
  4.   <ul id="profile" onmouseover="keepsub()">
  5.    <li><a href="<?php echo $fullPath;?>wallpaper.php">Wallpaper</a></li><br/>
  6.    <li><a href="<?php echo $fullPath;?>password.php">Password</a></li>
  7.   </ul>
  8.  </li>
  9.  
  10.  <li><a href="<?php echo $fullPath;?>">Home</a></li>
  11. ......
  12.  
CSS:
Expand|Select|Wrap|Line Numbers
  1. /*      MODULES           */
  2. #modules{   
  3.         list-style:none;
  4.         width:100%;
  5.         min-height:80px;
  6. }
  7. #modules li{
  8.         position:relative;
  9.         padding-right:30px;
  10.         background-color:;
  11.         min-width:100px;
  12.     display:inline;
  13. }
  14. #modules li ul{
  15.         position:absolute;
  16.         visibility:hidden;   /* Hide submenu  */
  17.         padding-top:5px;
  18.         background-color:;
  19.     min-width:100px;
  20. }
  21. #modules li a{
  22.         text-decoration:none;
  23.         color:white;
  24. }
  25.  
  26. #modules ul a:hover{    
  27.         background: #aaffaa;
  28. }
  29. /**************************/
  30.  
Hope that helps!

(No citation. System no longer in production.)
Jun 24 '15 #2

Post your reply

Sign in to post your reply or Sign up for a free account.