Home Tutorial Building Tabbed Navigation using SpryTabbedPanels

Building Tabbed Navigation using SpryTabbedPanels

The Tabbed Navigation is the latest trend while designing a Website. If it is blog then you can notice the content titled ‘Featured Content’ or ‘Latest’ arranged in tabs. If it is a Website then there are tabs on top replacing menu items. If coded correctly the tabs give a fresh outlook to your Website, save resources, and present maximum information in less area. In addition, almost every user is familiar with the tabs and their working. Tab, ALT+Tab, and Ctrl+Tab are the most pressed keys on any keyboard on this earth. Thinking to use the tabbed navigation in your Web design then we are here to help you out. Adobe Labs provide access to its SpryTabbedPanels without any cost. Here we’ll guide you how to use the SpryTabbedPanel code to create Tabbed Navigation.

Building Tabbed Navigation using SpryTabbedPanels 1

An outer div contains – list of tabs, all panels, div container to have content panels, and div tag for each panel. The SpryTabbedPanels use JavaScript to toggle between the tabs. Therefore, we’ll include the JavaScript code within the HTML tag. To modularize the code, we’ll create a separate JS file and link it through script tag inside head tag. This js file will define the functions related to the Tabbed Panel. Before closing the body tag, we’ll define a script tag to use JavaScript to make Tabbed Panel interactive. We’ll also link a style sheet in the head tag.

Best Cloud Hosting for Wordpress
Best Cloud Hosting for Wordpress

Adobe Labs provide the SpryTabbedPanels.js to use with the HTML code. You can scroll down to bottom to download the source files used in this article. Before that, we’ll illustrate the code of HTML and CSS files in this article. We recommend you not to change the file name of js and css files. However, you can modify the code as per your convenience.

In our case, we’ve located JS, CSS and HTML files in the same folder. Please modify the path in code if you’re placing the CSS and JS files in other location.

 

CSS Code

.TabbedPanels {
	margin: 0px;
	padding: 0px;
	clear: both;
	width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
}
.TabbedPanelsTabGroup {
	margin: 0px;
	padding: 0px;
}
.TabbedPanelsTab {
	position: relative;
	top: 1px;
	float: left;
	padding: 4px 10px;
	margin: 0px 1px 0px 0px;
	font: bold 0.7em sans-serif;
	background-color: #DDD;
	list-style: none;
	border-left: solid 1px #CCC;
	border-bottom: solid 1px #999;
	border-top: solid 1px #999;
	border-right: solid 1px #999;
	-moz-user-select: none;
	-khtml-user-select: none;
	cursor: pointer;
}
.TabbedPanelsTabHover {
	background-color: #CCC;
}
.TabbedPanelsTabSelected {
	background-color: #EEE;
	border-bottom: 1px solid #EEE;
}
.TabbedPanelsTab a {
	color: black;
	text-decoration: none;
}
.TabbedPanelsContentGroup {
	clear: both;
	border-left: solid 1px #CCC;
	border-bottom: solid 1px #CCC;
	border-top: solid 1px #999;
	border-right: solid 1px #999;
	background-color: #EEE;
}
.TabbedPanelsContent {
	padding: 4px;
}
.TabbedPanelsContentVisible {
}
/* Vertical Tabbed Panels */
.VTabbedPanels .TabbedPanelsTabGroup {
	float: left;
	width: 10em;
	height: 20em;
	background-color: #EEE;
	position: relative;
	border-top: solid 1px #999;
	border-right: solid 1px #999;
	border-left: solid 1px #CCC;
	border-bottom: solid 1px #CCC;
}
.VTabbedPanels .TabbedPanelsTab {
	float: none;
	margin: 0px;
	border-top: none;
	border-left: none;
	border-right: none;
}
.VTabbedPanels .TabbedPanelsTabSelected {
	background-color: #EEE;
	border-bottom: solid 1px #999;
}
.VTabbedPanels .TabbedPanelsContentGroup {
	clear: none;
	float: left;
	padding: 0px;
	width: 30em;
	height: 20em;
}

HTML Code

<head>
...
	<!--Link the Spry TabbedPanels CSS-->
	<link href="SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
	<!--Link the Spry TabbedPanels JavaScript library-->
	<script src="SpryTabbedPanels.js" type="text/javascript"></script>
</head>
<body>
	<!--Create the Tabbed Panel widget and assign classes to each element-->
	<div class="TabbedPanels" id="TabbedPanels1">
		<ul class="TabbedPanelsTabGroup">
			<li class="TabbedPanelsTab">Tab 1</li>
			<li class="TabbedPanelsTab">Tab 2</li>
			<li class="TabbedPanelsTab">Tab 3</li>
			<li class="TabbedPanelsTab">Tab 4</li>
		</ul>
		<div class="TabbedPanelsContentGroup">
			<div class="TabbedPanelsContent">Tab 1 Content</div>
			<div class="TabbedPanelsContent">Tab 2 Content</div>
			<div class="TabbedPanelsContent">Tab 3 Content</div>
			<div class="TabbedPanelsContent">Tab 4 Content</div>
		</div>
	</div>
<!--Initialize the Tabbed Panel widget object-->
<script type="text/javascript">
	var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>

Categorizing the HTML code

  1. Link the SpryTabbedPanels.js and SpryTabbedPanels.css file within the HTML code.
    <!--Link the CSS style  sheet that styles the tabbed panel-->
    <link href="SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
    <!--Link the Spry TabbedPanels JavaScript library-->
    <script src="SpryTabbedPanels.js" type="text/javascript"></script>
  2. Add following code to create the SpryTabbedPanel.
    <div class="TabbedPanels" id="TabbedPanels1">
    </div>
  3. Mention an ul class TabbedPanelsTab Group to create the tab inside above div.
    <div class="TabbedPanels" id="TabbedPanels1">
    	<ul class="TabbedPanelsTabGroup">
    		<li class="TabbedPanelsTab">Tab 1</li>
    		<li class="TabbedPanelsTab">Tab 2</li>
    		<li class="TabbedPanelsTab">Tab 3</li>
    		<li class="TabbedPanelsTab">Tab 4</li>
    	</ul>
    </div>
  4. Add a div ‘TabbedPanelsContentGroup, after the ul class to create a container for including the contents of each tab.
    <div class="TabbedPanels" id="TabbedPanels1">
    	<ul class="TabbedPanelsTabGroup">
    		<li class="TabbedPanelsTab">Tab 1</li>
    		<li class="TabbedPanelsTab">Tab 2</li>
    		<li class="TabbedPanelsTab">Tab 3</li>
    		<li class="TabbedPanelsTab">Tab 4</li>
    	</ul>
    	<div class="TabbedPanelsContentGroup">
    	</div>
    </div>
  5. In TabbedPanelsContentGroup, include one div tag with class (TabbedPanelsContent) for each tab to have its content.
    <div class="TabbedPanels" id="TabbedPanels1">
    	<ul class="TabbedPanelsTabGroup">
    		<li class="TabbedPanelsTab">Tab 1</li>
    		<li class="TabbedPanelsTab">Tab 2</li>
    		<li class="TabbedPanelsTab">Tab 3</li>
    		<li class="TabbedPanelsTab">Tab 4</li>
    	</ul>
    	<div class="TabbedPanelsContentGroup">
    		<div class="TabbedPanelsContent">Tab 1 Content</div>
    		<div class="TabbedPanelsContent">Tab 2 Content</div>
    		<div class="TabbedPanelsContent">Tab 3 Content</div>
    		<div class="TabbedPanelsContent">Tab 4 Content</div>
    	</div>
    </div>
  6. Include following code to initialize the SpryTabbedPanels object. Here, new operator will initialize the Tabbed Panels and transforms the div content with TabbedPanels1 ID into an interactive tabbed object.
    <script type="text/javascript">
    	var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
    </script>

What you can do more?

  1. If you want to add more tab then add a li class in TabbedPanelsTabGroup and a div class in TabbedPanelsContentGroup. To remove a tab, you’ve to delete the li class and its relevant div class from both groups.
  2. You can change the div class ‘TabbedPanels’ to ‘VTabbedPanels’ if you want to include the vertical tabs in your Web design.
    <div class="VTabbedPanels" id="TabbedPanels1">
    	<ul class="TabbedPanelsTabGroup">
    		<li class="TabbedPanelsTab">Tab 1</li>
    		<li class="TabbedPanelsTab">Tab 2</li>
    		<li class="TabbedPanelsTab">Tab 3</li>
    		<li class="TabbedPanelsTab">Tab 4</li>
    	</ul>
    	<div class="TabbedPanelsContentGroup">
    		<div class="TabbedPanelsContent">Tab 1 Content</div>
    		<div class="TabbedPanelsContent">Tab 2 Content</div>
    		<div class="TabbedPanelsContent">Tab 3 Content</div>
    		<div class="TabbedPanelsContent">Tab 4 Content</div>
    	</div>
    </div>
  3. Make use of tabIndex in li class ‘TabbedPanelsTab’ to enable keyboard navigation.
    <li class="TabbedPanelsTab" tabIndex="0">Tab 1</li>
    <li class="TabbedPanelsTab" tabIndex="1">Tab 2</li>
    <li class="TabbedPanelsTab" tabIndex="2">Tab 3</li>
  4. You can set the default tab to open on loading the page by defining defaultTab with new constructor.
    var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1", { defaultTab: 2 });

Sample Output

We’ve run the code and got following output:-

Building Tabbed Navigation using SpryTabbedPanels 2

We’ve changed the code to get Vertical Tab Panel and received following output

Building Tabbed Navigation using SpryTabbedPanels 3

Files

Click here to download zip archive having following source files used in this article:

Best Cloud Hosting for Wordpress
Best Cloud Hosting for Wordpress
  1. SpryTabbedPanels.css – has the source code of styles used to design tabs.
  2. SpryTabbedPanels.js – has the source code of scripts used to create tabs.
  3. SampleHorizontalTabs.html – has the code to show Horizontal Tabbed Panels.
  4. SampleVerticalTabs.html – has the code to show Vertical Tabbed Panels.

Conclusion

Tabbed Navigation is the easiest way to demonstrate the large and similar content in less space. SpryTabbedPanels make is very easy for you to include the Tabbed Navigation in your code. Is this article helpful? Inform us through your valuable comments. We’ll keep you posted with more such interactive articles in the future, stay tuned.

Must Read

How Much Does It Cost to Build an App in 2019

Software application building is one of the fastest growing fields for over one decade now. The major mobile app stores like Google Play and...

Reasons Why We Give Importance to Visual Content

Take a look online and you’ll find it difficult to locate a web page that doesn’t have an image attached to it unless you’re...

How to Organize Your WordPress Website Better

The best feeling is having a clean website, especially when you started on a clean slate when installing WordPress. Many times, content creators may...

Magento 2 vs WordPress WooCommerce – Which Is the Best Ecommerce Platform for Your Business?

Nowadays, building e-commerce is more comfortable than never before thanks to e-commerce platforms. The only hard part of starting is choosing the best platform...

Why You Should Choose Managed WordPress Hosting

If you're competing on the internet and chosen WordPress as your content management system, you have an important decision to make. Are you going...
Load WordPress Sites in as fast as 37ms!Building Tabbed Navigation using SpryTabbedPanels 4