Posted By

labsecrets on 07/02/10


Tagged


Versions (?)

Using JQuery Tools to Add a Tabbed Submenu to Pages and Posts


 / Published in: HTML
 

  1. TO USE THIS SNIPPET:
  2. 1) Copy the following CSS and then open your existing theme stylesheet and paste it at the very bottom of the sheet (The style sheet is typically located inside of directory "wp-content/themes/yourthemename/" and called "custom.css" if you are using one of our modified WooThemes or "style.css" for most other themes);
  3.  
  4. 2) Copy the following HTML snippet and paste it into your new blog post or page, be SURE to use the HTML editor tab and NOT the visual editor tab (which will not accept code).
  5.  
  6.  
  7. ----------------Start CSS - Do Not Copy This Line --------------------------
  8.  
  9. /* Style for css-tabs Submenu */
  10. /* root element for tabs */
  11. ul.css-tabs {
  12. margin:0 !important;
  13. padding:0;
  14. height:30px;
  15. border-bottom:1px solid #666;
  16. }
  17.  
  18. /* single tab */
  19. ul.css-tabs li {
  20. float:left;
  21. padding:0;
  22. margin:0;
  23. list-style-type:none;
  24. }
  25.  
  26. /* link inside the tab. uses a background image */
  27. ul.css-tabs a {
  28. float:left;
  29. font-size:13px;
  30. display:block;
  31. padding:5px 30px;
  32. text-decoration:none;
  33. border:1px solid #666;
  34. border-bottom:0px;
  35. height:18px;
  36. background-color:#efefef;
  37. color:#777;
  38. margin-right:2px;
  39. -moz-border-radius-topleft: 4px;
  40. -moz-border-radius-topright:4px;
  41. position:relative;
  42. top:1px;
  43. }
  44.  
  45. ul.css-tabs a:hover {
  46. background-color:#F7F7F7;
  47. color:#333;
  48. }
  49.  
  50. /* selected tab */
  51. ul.css-tabs a.current {
  52. background-color:#ddd;
  53. border-bottom:2px solid #ddd;
  54. color:#000;
  55. cursor:default;
  56. }
  57.  
  58.  
  59. /* tab pane */
  60. .css-panes div {
  61. display:none;
  62. border:1px solid #666;
  63. border-width:0 1px 1px 1px;
  64. min-height:150px;
  65. padding:15px 20px;
  66. background-color:#ddd;
  67. }
  68.  
  69. /* end css-tabs*/
  70.  
  71.  
  72.  
  73. ----------------End CSS - Do Not Copy This Line --------------------------
  74.  
  75.  
  76.  
  77. ----------------Start HTML - Do Not Copy This ----------------------------
  78.  
  79. <!-- include the Tools Library -->
  80. <script src="http://cdn.jquerytools.org/1.2.3/jquery.tools.min.js?select=full&debug=true"></script>
  81.  
  82. <!-- tabs -->
  83. <ul class="css-tabs">
  84. <li><a href="#">First Tab Title</a></li>
  85. <li><a href="#">Second Tab Title</a></li>
  86. <li><a href="#">Third Tab Title</a></li>
  87. </ul>
  88.  
  89. <!-- panes -->
  90. <div class="css-panes">
  91.  
  92. <div>
  93. <p>
  94. Content inside first tab pane
  95. </p>
  96. </div>
  97.  
  98. <div>
  99. <p>
  100. Content inside second tab pane
  101. </p>
  102. </div>
  103.  
  104.  
  105. <div>
  106. <p>
  107. Content inside third tab pane
  108. </p>
  109. </div>
  110. </div>
  111.  
  112. <!-- activate tabs with JavaScript -->
  113.  
  114. $(function() {
  115. // :first selector is optional if you have only one tabs on the page
  116. $(".css-tabs:first").tabs(".css-panes:first > div");
  117. });
  118.  
  119.  
  120. ----------------End HTML - Do Not Copy This ----------------------------

Report this snippet  

You need to login to post a comment.