jquery collapsible sidebar menu


/ Published in: Other
Save to your folder(s)



Copy this code and paste it in your HTML
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
  5. <title>DL Demo</title>
  6. <script src="http://jquery.com/src/jquery.js"></script>
  7. $(document).ready(function(){
  8. $("dd:not(:first)").hide();
  9. $("dt a").click(function(){
  10. $("dd:visible").slideUp("slow");
  11. $(this).parent().next().slideDown("slow");
  12. return false;
  13. });
  14. });
  15. </script>
  16. body { font-family: Arial; font-size: 16px; }
  17. dl { width: 300px; }
  18. dl,dd { margin: 0; }
  19. dt { background: #F39; font-size: 18px; padding: 5px; margin: 2px; }
  20. dt a { color: #FFF; }
  21. dd a { color: #000; }
  22. ul { list-style: none; padding: 5px; }
  23. </style>
  24. </head>
  25.  
  26. <dl>
  27. <dt><a href="/">jQuery</a></dt>
  28. <dd>
  29. <ul>
  30. <li><a href="/src/">Download</a></li>
  31. <li><a href="/docs/">Documentation</a></li>
  32. <li><a href="/blog/">Blog</a></li>
  33.  
  34. </ul>
  35. </dd>
  36. <dt><a href="/discuss/">Community</a></dt>
  37. <dd>
  38. <ul>
  39. <li><a href="/discuss/">Mailing List</a></li>
  40. <li><a href="/tutorials/">Tutorials</a></li>
  41.  
  42. <li><a href="/demos/">Demos</a></li>
  43. <li><a href="/plugins/">Plugins</a></li>
  44. </ul>
  45. </dd>
  46. <dt><a href="/dev/">Development</a></dt>
  47. <dd>
  48. <ul>
  49.  
  50. <li><a href="/src/">Source Code</a></li>
  51. <li><a href="/dev/bugs/">Bug Tracking</a></li>
  52. <li><a href="/dev/recent/">Recent Changes</a></li>
  53. </ul>
  54. </dd>
  55. </dl>
  56. </body>
  57. </html>
  58.  

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.