Create Horizontal Tabbed Content Menu Using jQuery And CSS

Share:

Create Horizontal Tabbed Content Menu Using jQuery And CSS. To get around that some content is not too long to be more concise and pleasing to the eye, some people will make that content split into multiple pages, create a content slider or SlideShare. Another way is to put it on a tab content menu. By using the tab content menu, the content will be more accessible than using the previous method because it is not heavy to be accessed.
Create Horizontal Tabbed Content Menu Using jQuery And CSS Create Horizontal Tabbed Content Menu Using jQuery And CSS

Create Horizontal Tabbed Content Menu Using jQuery And CSS

On the previous page we’ve discussed how to create a vertical tabbed menu content, it is time to try to create a horizontal tabbed content menu using jquery and css. Who knows this will benefit you …
Let’s start the tutorial. Follow the steps below :

Download now Create Horizontal Tabbed Content Menu Using jQuery And CSS

Create HTML Code
If you already read and tried to practice how to create a vertical tabbed menu that is in post content. You will find that the html code is the same as the html code to create a horizontal tab menu content. Following the framework of the html code :

        <div class="container">
			<section class="tabs">
	            <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
		        <label for="tab-1" class="tab-label-1">WebDesign</label>
	            <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
		        <label for="tab-2" class="tab-label-2">WebProgram</label>
			    <div class="clear-shadow"></div>
		        <div class="content">
			    <div class="content-1">
				<h2><a href=""> Website Design </a></h2>
                <img  alt="..." style="text-align:center;" src="..." height="180px" width="550px">
			    <h3><a href="..."></a></h3>
				<p>....</p>
				</div>
			    <div class="content-2">
				<h2><a href="">Website Programming</a> </h2>
                <img  alt="..." style="text-align:center;" src=".." height="180px" width="550px">
				<h3><a href="...">...</a></h3>
				<p>...</p>
				</div>
		        </div>
			</section>
        </div>

Create CSS Code
The HTML code can be the same but for the css code, 100% different because this tab menu will be made horizontal and not vertical. Complete the following css code to create a horizontal tab content menu :
horizontal-tabbed-content-menu.css

/*  Style for Create Horizontal Tabbed Content Menu Using jQuery And CSS  */
body{
	font-family: 'Open Sans Condensed','Arial Narrow', serif;
	background: #ddd url('http://1.bp.blogspot.com/-jaZSIgdhj6M/UkPKEAgZBnI/AAAAAAAABAw/aIQvBkQaSMM/s1600/tutorial-world-edu-background-black.png') repeat top left;
	font-weight: 400;
	font-size: 15px;
	color: #333;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	font-smoothing: antialiased;
}
a{
	color: #555;
	text-decoration: none;
}
.container{
	width: 100%;
	position: relative;
}
.clr{
	clear: both;
	padding: 0;
	height: 0;
	margin: 0;
}
.tabs {
    position: relative;
	margin: 40px auto;
	width: 750px;
}

.tabs input {
	position: absolute;
	z-index: 1000;
	width: 120px;
	height: 40px;
	left: 0px;
	top: 0px;
	opacity: 0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
	cursor: pointer;
}
.tabs input#tab-2{
	left: 120px;
}
.tabs input#tab-3{
	left: 240px;
}
.tabs input#tab-4{
	left: 360px;
}

.tabs label {
	background: #b30000;
	font-size: 15px;
	line-height: 40px;
	height: 40px;
	position: relative;
	padding: 0 20px;
	margin-right:10px;	
    float: left;
	display: block;
	width: 80px;
	color: #fff;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-weight: bold;
	text-align: center;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
    border-radius: 3px 3px 0 0;
    box-shadow: 2px 0 2px rgba(0,0,0,0.1), -2px 0 2px rgba(0,0,0,0.1);
}

.tabs label:after {
    content: '';
	background: #fff;
	color: #fff;	
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 100%;
	height: 2px;
	display: block;
}

.tabs input:hover + label {
	background: #b30000;
}

.tabs label:first-of-type {
    z-index: 4;
    box-shadow: 2px 0 2px rgba(0,0,0,0.1);
}

.tab-label-2 {
    z-index: 3;
}

.tab-label-3 {
    z-index: 2;
}

.tab-label-4 {
    z-index: 1;
}

.tabs input:checked + label {
    background: #fff;
	color: #b30000;	
	z-index: 6;
}

.clear-shadow {
	clear: both;
}
.content {
	position: relative;
    width: 100%;
	height: 370px;
	z-index: 5;
    box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.1);
    border-radius: 0 3px 3px 3px;
    background:#fff url('http://2.bp.blogspot.com/-dLyi4OFRb-w/UaYSnKHaXyI/AAAAAAAAAcM/EYh3Jw859gE/s1600/How+To+Create+jQuery+Featured+Content+Slider+Slideshow+For+Website+1.gif') no-repeat;
}
.content div {
    position: absolute;
	top: 0;
	left: 0;
	padding: 10px 40px;
	z-index: 1;
    opacity: 0;

    -webkit-transition: opacity linear 0.1s;
    -moz-transition: opacity linear 0.1s;
    -o-transition: opacity linear 0.1s;
    -ms-transition: opacity linear 0.1s;
    transition: opacity linear 0.1s;
}
.tabs input.tab-selector-1:checked ~ .content .content-1,
.tabs input.tab-selector-2:checked ~ .content .content-2,
.tabs input.tab-selector-3:checked ~ .content .content-3,
.tabs input.tab-selector-4:checked ~ .content .content-4 {
	z-index: 100;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;

    -webkit-transition: opacity ease-out 0.2s 0.1s;
    -moz-transition: opacity ease-out 0.2s 0.1s;
    -o-transition: opacity ease-out 0.2s 0.1s;
    -ms-transition: opacity ease-out 0.2s 0.1s;
    transition: opacity ease-out 0.2s 0.1s;
}
.content div h2 a,
.content div h3 a{
	color: #b30000;
}
.content div p {
	font-size: 14px;
	line-height: 22px;
	font-style: italic;
	text-align: left;
	margin: 0;
	color: #777;
	padding-left: 15px;
	font-family: Cambria, Georgia, serif;
	border-left: 8px solid;
}

Upload css code above in a different file with .css format that tab content menu is not burdensome the website page.

Create jQuery
For jQuery script, we will continue to use the same script as on the jquery script to create a vertical tabbed content menu. Here’s the full script:
jquery.js

/* Modernizr 2.5.3 (Custom Build) | MIT & BSD
 * Build: http://www.modernizr.com/download/#-shiv-cssclasses-load
 */
;window.Modernizr=function(a,b,c){function u(a){j.cssText=a}function v(a,b){return u(prefixes.join(a+";")+(b||""))}function w(a,b){return typeof a===b}function x(a,b){return!!~(""+a).indexOf(b)}function y(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:w(f,"function")?f.bind(d||b):f}return!1}var d="2.5.3",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m={},n={},o={},p=[],q=p.slice,r,s={}.hasOwnProperty,t;!w(s,"undefined")&&!w(s.call,"undefined")?t=function(a,b){return s.call(a,b)}:t=function(a,b){return b in a&&w(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=q.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(q.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(q.call(arguments)))};return e});for(var z in m)t(m,z)&&(r=z.toLowerCase(),e[r]=m[z](),p.push((e[r]?"":"no-")+r));return u(""),i=k=null,function(a,b){function g(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x<style>"+b+"</style>",d.insertBefore(c.lastChild,d.firstChild)}function h(){var a=k.elements;return typeof a=="string"?a.split(" "):a}function i(a){var b={},c=a.createElement,e=a.createDocumentFragment,f=e();a.createElement=function(a){var e=(b[a]||(b[a]=c(a))).cloneNode();return k.shivMethods&&e.canHaveChildren&&!d.test(a)?f.appendChild(e):e},a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+h().join().replace(/\w+/g,function(a){return b[a]=c(a),f.createElement(a),'c("'+a+'")'})+");return n}")(k,f)}function j(a){var b;return a.documentShived?a:(k.shivCSS&&!e&&(b=!!g(a,"article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}audio{display:none}canvas,video{display:inline-block;*display:inline;*zoom:1}[hidden]{display:none}audio[controls]{display:inline-block;*display:inline;*zoom:1}mark{background:#FF0;color:#000}")),f||(b=!i(a)),b&&(a.documentShived=b),a)}var c=a.html5||{},d=/^<|^(?:button|form|map|select|textarea)$/i,e,f;(function(){var a=b.createElement("a");a.innerHTML="<xyz></xyz>",e="hidden"in a,f=a.childNodes.length==1||function(){try{b.createElement("a")}catch(a){return!0}var c=b.createDocumentFragment();return typeof c.cloneNode=="undefined"||typeof c.createDocumentFragment=="undefined"||typeof c.createElement=="undefined"}()})();var k={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:j};a.html5=k,j(b)}(this,b),e._version=d,g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+p.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return o.call(a)=="[object Function]"}function e(a){return typeof a=="string"}function f(){}function g(a){return!a||a=="loaded"||a=="complete"||a=="uninitialized"}function h(){var a=p.shift();q=1,a?a.t?m(function(){(a.t=="c"?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){a!="img"&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l={},o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};y[c]===1&&(r=1,y[c]=[],l=b.createElement(a)),a=="object"?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),a!="img"&&(r||y[c]===2?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i(b=="c"?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),p.length==1&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&o.call(a.opera)=="[object Opera]",l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return o.call(a)=="[object Array]"},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f<d;f++)g=a[f].split("="),(e=z[g.shift()])&&(c=e(c,g));for(f=0;f<b;f++)c=x[f](c);return c}function g(a,e,f,g,i){var j=b(a),l=j.autoCallback;j.url.split(".").pop().split("?").shift(),j.bypass||(e&&(e=d(e)?e:e[a]||e[g]||e[a.split("/").pop().split("?")[0]]||h),j.instead?j.instead(a,e,f,g,i):(y[j.url]?j.noexec=!0:y[j.url]=1,f.load(j.url,j.forceCSS||!j.forceJS&&"css"==j.url.split(".").pop().split("?").shift()?"c":c,j.noexec,j.attrs,j.timeout),(d(e)||d(l))&&f.load(function(){k(),e&&e(j.origUrl,i,g),l&&l(j.origUrl,i,g),y[j.url]=2})))}function i(a,b){function c(a,c){if(a){if(e(a))c||(j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}),g(a,j,b,0,h);else if(Object(a)===a)for(n in m=function(){var b=0,c;for(c in a)a.hasOwnProperty(c)&&b++;return b}(),a)a.hasOwnProperty(n)&&(!c&&!--m&&(d(j)?j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}:j[n]=function(a){return function(){var b=[].slice.call(arguments);a&&a.apply(this,b),l()}}(k[n])),g(a[n],j,b,n,h))}else!c&&l()}var h=!!a.test,i=a.load||a.both,j=a.callback||f,k=j,l=a.complete||f,m,n;c(h?a.yep:a.nope,!!i),i&&c(i)}var j,l,m=this.yepnope.loader;if(e(a))g(a,0,m,0);else if(w(a))for(j=0;j<a.length;j++)l=a[j],e(l)?g(l,0,m,0):w(l)?B(l):Object(l)===l&&i(l,m);else Object(a)===a&&i(a,m)},B.addPrefix=function(a,b){z[a]=b},B.addFilter=function(a){x.push(a)},B.errorTimeout=1e4,b.readyState==null&&b.addEventListener&&(b.readyState="loading",b.addEventListener("DOMContentLoaded",A=function(){b.removeEventListener("DOMContentLoaded",A,0),b.readyState="complete"},0)),a.yepnope=k(),a.yepnope.executeStack=h,a.yepnope.injectJs=function(a,c,d,e,i,j){var k=b.createElement("script"),l,o,e=e||B.errorTimeout;k.src=a;for(o in d)k.setAttribute(o,d[o]);c=j?h:c||f,k.onreadystatechange=k.onload=function(){!l&&g(k.readyState)&&(l=1,c(),k.onload=k.onreadystatechange=null)},m(function(){l||(l=1,c(1))},e),i?k.onload():n.parentNode.insertBefore(k,n)},a.yepnope.injectCss=function(a,c,d,e,g,i){var e=b.createElement("link"),j,c=i?h:c||f;e.href=a,e.rel="stylesheet",e.type="text/css";for(j in d)e.setAttribute(j,d[j]);g||(n.parentNode.insertBefore(e,n),m(c,0))}}(this,document),Modernizr.load=function(){yepnope.apply(window,[].slice.call(arguments,0))};

Save jquery script above with the name jquery.js

Below is the page to access the horizontal tabbed content menu. Save the file name with horizontal-tabbed-content-menu.html in notepad or adobe dreamweaver.
horizontal-tabbed-content-menu.html

<!DOCTYPE html>
<html lang="en">
    <head>
		<meta charset="UTF-8" />
        <title>Create Horizontal Tabbed Content Menu Using jQuery And CSS</title>
		<script type="text/javascript" src="jquery.js"></script>
		<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300,300italic' rel='stylesheet' type='text/css'>
		<link rel="stylesheet" href="horizontal-tabbed-content-menu.css" type="text/css" media="screen"/>
		<!--[if lt IE 9]>
			<style>
				.content{
					height: auto;
					margin: 0;
				}
				.content div {
					position: relative;
				}
			</style>
		<![endif]-->
    </head>
    <body>
        <div class="container">
			<section class="tabs">
	            <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
		        <label for="tab-1" class="tab-label-1">WebDesign</label>
		
	            <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
		        <label for="tab-2" class="tab-label-2">WebProgram</label>
		
	            <input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />
		        <label for="tab-3" class="tab-label-3">WebDev</label>
			
	            <input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" />
		        <label for="tab-4" class="tab-label-4">Project</label>
            
			    <div class="clear-shadow"></div>
				
		        <div class="content">
			        <div class="content-1">
						<h2><a href="http://tutorial.world.edu/website-design/">WebDesign</a>  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="font-size:12px;color:#777;">by Tutorial.World.Edu</span></h2>
                        <img  alt=" Create Horizontal Tabbed Content Menu Using jQuery And CSS " style="text-align:center;" src="http://4.bp.blogspot.com/-LAWHrwCLFRg/UkeyBRuUyrI/AAAAAAAABBw/7b6fHPa2t4Q/s1600/Create+horizontal+tabbed+content+menu+Using+jQuery+And+CSS.jpg" height="180px" width="670px">												
						<h3><a href="http://tutorial.world.edu/website-design/create-horizontal-tabbed-content-menu-jquery-css/">Create Horizontal Tabbed Content Menu Using jQuery And CSS</a></h3>
						<p>On the previous page we've discussed how to create a vertical tabbed menu content, it is time to try to create a horizontal tabbed content menu using jquery and css. Who knows this will benefit you ...</p>				    
						</div>
			        <div class="content-2">
						<h2><a href="http://tutorial.world.edu/website-programming/">WebProgram</a></h2>
                        <img  alt=" Create Horizontal Tabbed Content Menu Using jQuery And CSS " style="text-align:center;" src="http://world.edu/wp-content/uploads/sites/1487/2013/07/Basic-HTML-Tutorial-Create-Rowspan-Colspan-Table-Attributes.png" height="180px" width="670px">												
						<h3><a href="http://tutorial.world.edu/website-programming/basic-html-tutorial-create-rowspan-colspan-table-attributes/">Basic HTML Tutorial : Create Rowspan & Colspan Table Attributes</a></h3>
						<p>On this post, we will specifically discuss about how to make a table using rowspan and colspan attributes. This is not something that is difficult, but we just need to careful placement of each attribute in the table. </p>				    
						</div>
			        <div class="content-3">
						<h2><a href="http://tutorial.world.edu/web-development/">WebDev</a></h2>
                        <img  alt=" Create Horizontal Tabbed Content Menu Using jQuery And CSS " style="text-align:center;" src="http://world.edu/wp-content/uploads/sites/1487/2013/05/How-To-Send-Out-Mass-Emails-With-PHP-Script-1024x724.jpg" height="180px" width="670px">												
						<h3><a href="http://tutorial.world.edu/web-development/php-script/how-to-send-out-mass-emails-php-script/">How To Send Out Mass Emails With PHP Script</a></h3>
						<p>Do you know how to send out a mass email to some people ? Whether to send email one by one ? This of course is not possible, it would be a waste of time because that’s a lot of internet marketers who use ...</p>
				    </div>
				    <div class="content-4">
						<h2><a href="http://tutorial.world.edu/project/">Project</a></h2>
                        <img  alt=" Create Horizontal Tabbed Content Menu Using jQuery And CSS " style="text-align:center;" src="http://world.edu/wp-content/uploads/sites/1487/2013/05/Project-Make-Google-Pagerank-Prediction-Tool.jpg" height="180px" width="670px">						
						<h3><a href="http://tutorial.world.edu/project/project-make-google-pagerank-prediction-tool/">Project : Make A Google Pagerank Prediction Tool</a></h3>
						<p>In the opinion of some bloggers, Google PageRank to be one factor that is very important for a blog. The higher the value of google pagerank, so the blog will get better and have a higher authority.</p>
				    </div>
		        </div>
			</section>
        </div>
    </body>
</html>

Then open it in a website browser and the results will be as shown below :
Create Horizontal Tabbed Content Menu Using jQuery And CSSOnly a few master css and html code, you will be able to create tab content menu with a variety of forms. Please try and good luck 🙂
Thanks for reading Create Horizontal Tabbed Content Menu Using jQuery And CSS

[Tutorial.World.Edu]

4 thoughts on “Create Horizontal Tabbed Content Menu Using jQuery And CSS

Leave a Reply

Your email address will not be published. Required fields are marked *