Posted By

vbert on 02/13/08


Tagged

css javascript menu xhtml jquery


Versions (?)

Who likes this?

5 people have marked this snippet as a favorite

adix
vbert
machinehuman
martingoldszein
joomla


Slide menu


 / Published in: JavaScript
 

URL: http://jquery.com/

/**\r\n * Slide menu with jQuery\r\n *\r\n * @package bitemibajtem.pl\r\n * @copyright 2007-2008 (C) BITEM I BAJTEM\r\n * @author Wojciech Sobczak (vbert) \r\n * @access public\r\n */

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="pl" xml:lang="pl">
  3. <head>
  4. <title>Slide menu with jQuery</title>
  5. <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  6. <meta http-equiv="Content-Language" content="pl" />
  7. <meta http-equiv="Pragma" content="no-cache" />
  8. <meta name="Author" content="Wojciech Sobczak (vbert)" />
  9. <style rel="stylesheet" type="text/css" media="screen">
  10. html, body { margin: 0; padding: 0; border: 0 none; height: 100%; }
  11. div, span, ul, ol, dl, dt, dd { margin: 0; padding: 0; border: 0; }
  12. ul, ol, dl, dt, dd { list-style: none; }
  13. a, a:visited, a:hover { text-decoration: none; }
  14. a { color: #dcdc05; outline: none !important; }
  15. a:hover { color: #00c900; }
  16. legend { display: none; }
  17. body { background: #2e3436; color: #d3d6cf; font-size: 13px; }
  18. #container { margin: 100px auto; padding: 2px; width: 300px; border: 1px solid #666; text-align: center; }
  19. #menu { width: 300px; margin: 0 auto; text-align: left; }
  20. dt { margin-top: 2px; height: 34px; }
  21. dt a {
  22. display: block;
  23. height: 34px;
  24. padding-left: .35em;
  25. line-height: 34px;
  26. background: #222;
  27. font-family: Georgia, "Bookman Old Style", "Bookman Antiqua",serif;
  28. font-size: 1.5em;
  29. font-weight: bold;
  30. }
  31. dt.first { margin-top: 0; }
  32. #item-1 a, #sitem-1 a { color: #f9dc3f; }
  33. #item-2 a, #sitem-2 a { color: #8ff501; }
  34. #item-3 a, #sitem-3 a { color: #00c089; }
  35. #item-4 a, #sitem-4 a { color: #028eda; }
  36. #item-1 a:hover, #item-1 a.selected:hover,
  37. #sitem-1 a:hover, #sitem-1 a.selected:hover,
  38. #item-2 a:hover, #item-2 a.selected:hover,
  39. #sitem-1 a:hover, #sitem-1 a.selected:hover,
  40. #item-3 a:hover, #item-3 a.selected:hover,
  41. #sitem-3 a:hover, #sitem-3 a.selected:hover,
  42. #item-4 a:hover, #item-4 a.selected:hover,
  43. #sitem-4 a:hover, #sitem-4 a.selected:hover {
  44. color: #fff;
  45. }
  46. dt a:hover, dt a.selected:hover,
  47. dd a:hover, dd a.selected:hover {
  48. cursor: pointer;
  49. background: #3b98e2;
  50. }
  51. dd { margin-bottom: 2px; border-bottom: 1px solid #666; }
  52. dd.last { border-bottom: 0 none; }
  53. dd ul li { height: 24px; }
  54. dd ul li a {
  55. display: block;
  56. padding-left: 20px;
  57. height: 24px;
  58. line-height: 24px;
  59. background: transparent;
  60. font-family: "Lucida Grande", LucidaGrande, Geneva, Verdana, sans-serif;
  61. font-size: 1.1em;
  62. font-weight: bold;
  63. }
  64. </style>
  65.  
  66. <script type="text/javascript"
  67. src="http://www.google.com/jsapi"></script>
  68.  
  69. <script type="text/javascript">
  70. google.load("jquery", "1.4.2");
  71. </script>
  72.  
  73. <script type="text/javascript">
  74. $(document).ready(function(){
  75. if($("#menu")) {
  76. $("#menu dd").hide(); //:not(:first)
  77. $("#menu dt a").click(function() {
  78. if($(this).hasClass("selected")) {
  79. $(this).parent().next().slideUp(200);
  80. $(this).removeClass();
  81. }
  82. else {
  83. $("#menu dt a").removeClass();
  84. $(this).addClass("selected");
  85. $("#menu dd:visible").slideUp(200);
  86. $(this).parent().next().slideDown(220);
  87. }
  88. return false;
  89. });
  90. }
  91.  
  92. });
  93. </script>
  94. </head>
  95. <body>
  96. <!-- #container -->
  97. <div id="container">
  98. <!-- #menu -->
  99. <div id="menu">
  100. <dl>
  101. <dt id="item-1" class="first">
  102. <a href="#">ITEM 1</a>
  103. </dt>
  104. <dd id="sitem-1">
  105. <ul>
  106. <li><a href="#">item 1-1</a></li>
  107. <li><a href="#">item 1-2</a></li>
  108. <li><a href="#">item 1-3</a></li>
  109. <li><a href="#">item 1-4</a></li>
  110. </ul>
  111. </dd>
  112. <dt id="item-2">
  113. <a href="#">ITEM 2</a>
  114. </dt>
  115. <dd id="sitem-2">
  116. <ul>
  117. <li><a href="#">item 2-1</a></li>
  118. <li><a href="#">item 2-2</a></li>
  119. <li><a href="#">item 2-3</a></li>
  120. <li><a href="#">item 2-4</a></li>
  121. </ul>
  122. </dd>
  123. <dt id="item-3">
  124. <a href="#">ITEM 3</a>
  125. </dt>
  126. <dd id="sitem-3">
  127. <ul>
  128. <li><a href="#">item 3-1</a></li>
  129. <li><a href="#">item 3-2</a></li>
  130. <li><a href="#">item 3-3</a></li>
  131. <li><a href="#">item 3-4</a></li>
  132. </ul>
  133. </dd>
  134. <dt id="item-4">
  135. <a href="#">ITEM 4</a>
  136. </dt>
  137. <dd id="sitem-4" class="last">
  138. <ul>
  139. <li><a href="#">item 4-1</a></li>
  140. <li><a href="#">item 4-2</a></li>
  141. <li><a href="#">item 4-3</a></li>
  142. <li><a href="#">item 4-4</a></li>
  143. </ul>
  144. </dd>
  145. </dl>
  146. </div><!-- END #menu -->
  147. </div><!-- END #container -->
  148. </body>
  149. </html>

Report this snippet  

You need to login to post a comment.