Advanced Search

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

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

Expand | Embed | Plain Text

Copy this code and paste it in your 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. <script>
  115. $(function() {
  116. 	// :first selector is optional if you have only one tabs on the page
  117. 	$(".css-tabs:first").tabs(".css-panes:first > div");
  118. });
  119. </script>
  120.  
  121.  
  122. ----------------End HTML - Do Not Copy This ----------------------------

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.