Create Vertical Tabbed Content Menu Using jQuery And CSS

Share:

Create Vertical Tabbed Content Menu Using jQuery And CSS. In the previous tutorial we have discussed about how to create a tabbed menu vertical accordion. Still in the same topic is about how to create a website menu design, we will discuss about how to make a vertical tabbed content menu. The tabbed menu in which you can fill with a variety of content such as images, video and text.
Create Vertical Tabbed Content Menu Using jQuery And CSS

Create Vertical Tabbed Content Menu Using jQuery And CSS

You want to know step by step in creating a vertical tabbed content menu ? Come and learn the tutorial below.

Download now Create Vertical Tabbed Content Menu Using jQuery And CSS

Create HTML Code
First, of course is to create the html code. To create the menu tab, use radio buttons html whereas the results for each box, we can use the div tag. Overall sample of html code is as follows:
vertical-tabbed-content-menu.html

        <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
Use the following CSS code to beautify the appearance of your tabbed content menu. Do not forget you should save it in a different file so as not to further add speed load to the webpage.
vertical-tabbed-content-menu.css

/*  Style for Create Vertical 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{
	top: 40px;
}
.tabs input#tab-3{
	top: 80px;
}
.tabs input#tab-4{
	top: 120px;
}
.tabs label {
	background: #e65b00;
	font-size: 15px;
	line-height: 40px;
	height: 40px;
	position: relative;
	padding: 0 20px;
	display: block;
	width: 80px;
	color: #fff;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-weight: bold;
	text-align: right;
	float: left;
	clear: both;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
    box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
}
.tabs label:after {
    content: '';
	background: #fff;
	position: absolute;
	right: -2px;
	top: 0;
	width: 2px;
	height: 100%;
}

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

.tabs label:first-of-type {
    z-index: 4;
}

.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:#e65b00;
	z-index: 6;
}

.clear-shadow {
	clear: both;
}

.content {
    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;
	position: relative;
    width: auto;
	margin: -175px 0 0 120px;
	height: 400px;
	z-index: 5;
	overflow: hidden;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    border-radius: 3px;
}

.content div {
    position: absolute;
	top: 0;
	padding: 10px 40px;
	z-index: 1;
    opacity: 0;
    -webkit-transition: all linear 0.5s;
    -moz-transition: all linear 0.5s;
    -o-transition: all linear 0.5s;
    -ms-transition: all linear 0.5s;
    transition: all linear 0.5s;
}

.content div{
	-webkit-transform: translateY(-450px);
	-moz-transform: translateY(-450px);
	-o-transform: translateY(-450px);
	-ms-transform: translateY(-450px);
	transform: translateY(-450px);
}

.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 {
    -webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-o-transform: translateY(0px);
	-ms-transform: translateY(0px);
	transform: translateY(0px);
    z-index: 100;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transition: all ease-out 0.3s 0.3s;
    -moz-transition: all ease-out 0.3s 0.3s;
    -o-transition: all ease-out 0.3s 0.3s;
    -ms-transition: all ease-out 0.3s 0.3s;
    transition: all ease-out 0.3s 0.3s;
}
.content div h2 a,
.content div h3 a{
	color: #e65b00;
}
.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;
}	

Create jQuery
The last step is to install the jQuery script, so that the tab menu can function properly. Learn more here’s the jQuery script, don’t forget to save in a different file with the file name …
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))};

The following is an example of a vertical tabbed menu content, please save it in notepad or adobe dreamweaver.

<!DOCTYPE html>
<html lang="en">
    <head>
		<meta charset="UTF-8" />
        <title> Create Vertical 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'>
		<!--[if lt IE 9]>
			<style>
				.content{
					height: auto;
					margin: 0;
				}
				.content div {
					position: relative;
				}
			</style>
		<![endif]-->
    <link rel="stylesheet" href="vertical-tabbed-content-menu.css" type="text/css" media="screen"/>		
    </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;<span style="font-size:12px;color:#777;">by Tutorial.World.Edu</span></h2>
                        <img  alt=" Create Vertical Tabbed Content Menu Using jQuery And CSS " style="text-align:center;" src="http://1.bp.blogspot.com/-Lezpu7tc0Rs/UkQrO7xy0AI/AAAAAAAABBY/LH_KFzhRwEY/s1600/Create+Vertical+Tabbed+Content+Menu+Using+jQuery+And+CSS.jpg" height="180px" width="550px">												
						<h3><a href="http://tutorial.world.edu/website-design/create-vertical-tabbed-content-menu-jquery-css/">Create Vertical Tabbed Content Menu Using jQuery And CSS</a></h3>
						<p>Still in the same topic is about how to create a website menu design, we will discuss about how to make a vertical tabbed content menu.</p>				    
						</div>
			        <div class="content-2">
						<h2><a href="http://tutorial.world.edu/website-programming/">WebProgram</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;<span style="font-size:12px;color:#777;">by Tutorial.World.Edu</span></h2>
                        <img  alt=" Create Vertical 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="550px">												
						<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 Vertical 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="550px">												
						<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 Vertical 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="550px">						
						<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>

If you look at the website browser, the result will be as below :
Create Vertical Tabbed Content Menu Using jQuery And CSSWhat do you think, what you like the results? please try it yourself and you can modify the appearance of vertical tabbed menu content is to your liking. Good luck 🙂
Thanks for reading Create Vertical Tabbed Content Menu Using jQuery And CSS

[Tutorial.World.Edu]

2 thoughts on “Create Vertical Tabbed Content Menu Using jQuery And CSS

Leave a Reply

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