Click for iPhone Video:
In this tutorial we introduce you to how easy it is to access the power of JQuery User Interface tools on your LabSecrets Solution site.
It is important for Entrepreneurs to stay focused on marketing and monetization, without getting diverted into becoming a software developer or designer. By providing you with “copy and paste” tools such as this tabbed submenu example, we wish to ensure that you spend your valuable time and energy on building your business, instead of being frustrated when trying to achieve the “high-end” features of heavily funded sites you’ve seen on the Internet.
Here is a working example:
Content inside first tab pane
Content inside second tab pane
Content inside third tab pane
The entire “copy and paste” Tabbed Submenu code is available below:
[labprotect (Registered,Subscriber,LabSecrets)]
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);
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).
—————-Start CSS – Do Not Copy This Line ————————–
/* Style for css-tabs Submenu */
/* root element for tabs */
ul.css-tabs {
margin:0 !important;
padding:0;
height:30px;
border-bottom:1px solid #666;
}
/* single tab */
ul.css-tabs li {
float:left;
padding:0;
margin:0;
list-style-type:none;
}
/* link inside the tab. uses a background image */
ul.css-tabs a {
float:left;
font-size:13px;
display:block;
padding:5px 30px;
text-decoration:none;
border:1px solid #666;
border-bottom:0px;
height:18px;
background-color:#efefef;
color:#777;
margin-right:2px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright:4px;
position:relative;
top:1px;
}
ul.css-tabs a:hover {
background-color:#F7F7F7;
color:#333;
}
/* selected tab */
ul.css-tabs a.current {
background-color:#ddd;
border-bottom:2px solid #ddd;
color:#000;
cursor:default;
}
/* tab pane */
.css-panes div {
display:none;
border:1px solid #666;
border-width:0 1px 1px 1px;
min-height:150px;
padding:15px 20px;
background-color:#ddd;
}
/* end css-tabs*/
—————-End CSS – Do Not Copy This Line ————————–
—————-Start HTML – Do Not Copy This —————————-
<!– include the Tools Library –>
<script src="http://cdn.jquerytools.org/1.2.3/jquery.tools.min.js?select=full&debug=true"></script>
<!– tabs –>
<ul class="css-tabs">
<li><a href="#">First Tab Title</a></li>
<li><a href="#">Second Tab Title</a></li>
<li><a href="#">Third Tab Title</a></li>
</ul>
<!– panes –>
<div class="css-panes">
<div>
<p>
Content inside first tab pane
</p>
</div>
<div>
<p>
Content inside second tab pane
</p>
</div>
<div>
<p>
Content inside third tab pane
</p>
</div>
</div>
<!– activate tabs with JavaScript –>
<script>
$(function() {
// :first selector is optional if you have only one tabs on the page
$(".css-tabs:first").tabs(".css-panes:first > div");
});
</script>
—————-End HTML – Do Not Copy This —————————-
[/labprotect]
