အခု HTML5, CSS3 နဲ့ပဲ Tab Control လေးတစ်ခုလုပ်ကြည့်ရအောင် … demo ကြည့်ချင်ရင်တော့ ဒီမှာ သွားပြီး ကြည့် နိုင်ပါတယ်။

HTML
အောက်က HTML code ကို အရင်ရေးလိုက်ပါ။ ပုံမှန်အရ Tab Control တွေလုပ်မယ်ဆိုရင် ul list နဲ့ နောက်ထပ် content section တွေပါလေ့ရှိပါတယ်။ ဒီနေရာမှာ CSS3 :target selector ကိုသုံးမှာဖြစ်တဲ့ အတွက် tab menu ကို pseduo element တစ်ခု h2 အနေနဲ့ပဲ ထားပါတယ်။ ပုံမှန်လို ul structure နဲ့ကောမရဘူးလားဆို တော့ ရပါတယ်။ ဒါပေမယ့် style ပေးတဲ့ အခါကျ ရင် နည်းနည်းအခက်တွေ့မှာ ကြောင့် ပါ။

<article class="tabs">
	<section id="tab1">
		<h2><a href="#tab1">Tab 1</a></h2>
		<p><h4>Tab 1</h4>This is Tab 1. You are making tab with CSS3 and HTML5 only. How nice ? I can't write my own tutorial at this moment. I translated the tutorial of Criag Buckler from sitepoint. I hope it is useful for you guys. Thanks for reading this tutorial.</p>
	</section>
	<section id="tab2">
		<h2><a href="#tab2">Tab 2</a></h2>
		<p><h4>Tab 2</h4>This is Tab 2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa.</p>
	</section>
	<section id="tab3">
		<h2><a href="#tab3">Tab 3</a></h2>
		<p><h4>Tab 3</h4>This is Tab 3.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa.</p>
	</section>
</article>

CSS
ပထမဆုံး article container တစ်ခုလုံးကို style အရင်ပေးပါမယ်။ သူ့ကိုတော့ width, height အတိအကျနဲ့ position ကို relative ပေးပါမယ်။ ဒါမှ section ကို ကိုယ်လိုသလိုချိန်လို့ရမှာပါ။

article.tabs {
	position: relative;
	display: block;
	width: 40em;
	height: 15em;
	margin: 2em auto;
}

ဒီတစ်ခါတော့ Section ကိုပေးပါမယ်။ အပေါ်မှာ tab menu နေရာအတွက် section အားလုံးကို အပေါ်ကနေ 1.8em ကို position:absolute; နဲ့ ရွေ့ထားပါမယ်။

article.tabs section {
	position: absolute;
	display: block;
	top :1.8em;
	left: 0;
	height: 12em;
	padding: 10px 20px;
	color: #333;
	background-color: #fff;
	border-radius: 5px;
	border:1px solid #e2e2e2;
	z-index: 0;
	width:40em;
}

ပထမဆုံး tab က အရင်ပေါ်နေရမှာဖြစ်တဲ့ အတွက် သူ့ကို z-index:1; ပေးပါမယ်။

article.tabs section:first-child {
	z-index: 1;
}

ဒီတစ်ခါ tab menu အတွက် h2 တွေကို style ပေးပါမယ်။ ဒုတိယ တစ်ခုနဲ့ တတိယ တစ်ခုကိုတော့ ကိုယ်လိုသလို left ကို နည်းနည်းရွေ့ပေးရပါမယ်။

article.tabs section h2 {
	position: absolute;
	font-size: 1em;
	font-weight: normal;
	width: 120px;
	height: 1.8em;
	top: -1.8em;
	left: 10px;
	padding:0;
	margin: 0;
	color: #333;
	background-color: #fff;
	border-radius: 5px 5px 0 0;
	border:1px solid #e2e2e2;
	border-bottom:none;
}

article.tabs section:nth-child(2) h2 {
	left:142px;
}

article.tabs section:nth-child(3) h2 {
	left: 274px;
}

article.tabs section h2 a {
	display: block;
	width:100%;
	line-height:1.8em;
	text-align: center;
	text-decoration: none;
	color: inherit;
	outline: 0 none;
}

အခုဆို ရင် tab1 က default ပြနေပါမယ်။ အလုပ်တော့မလုပ်သေးပါဘူး။ tab အလုပ်လုပ်ဖို့ အတွက် အောက် က code လေးကို ထပ်ထည့်လိုက်ပါ။ target လုပ်လိုက်တဲ့ section ကို z-index:2; တင်ပေးလိုက်တာပါ။ တကယ်လို့ select လုပ်ထားတဲ့ tab ကို highlight လုပ်ချင်ရင် ဒီ မှာလုပ်လို့ ရပါတယ်။ ဥပမာ background-color ပေးတာမျိုးပေါ့ .. ဒီမှာတော့မပေးတော့ပါဘူး။

article.tabs section:target, article.tabs section:target h2 {
	z-index: 2;
}

ဒါကတော့ အပိုအနေနဲ့ transition effect ထည့်တာပါ။ အနှေးအမြန်ကိုတော့ ကိုယ်လိုသလို ချိန်လို့ရပါတယ်။

article.tabs section, article.tabs section h2 {
	-webkit-transition: all 1000ms ease;
	-moz-transition: all 1000ms ease;
	-ms-transition: all 1000ms ease;
	-o-transition: all 1000ms ease;
	transition: all 1000ms ease;
}

ဒီမှာ က javascript tab တွေလိုမဟုတ်ပါဘူး။ tab တွေရဲ့ history ကို browser က back, next နဲ့ ပြန်ခေါ်နိုင်ပါတယ်။ ဒါပေမယ့် ဒီမှာ အားနည်းချက်တစ်ခု ရှိတာ က အကယ်လို့ target ဖြစ်တဲ့ tab ကို style ပေးခဲ့ မယ်ဆိုရင် ပထမအစ မှာ tab1 က active ဖြစ်နေပေမယ့် inactive မှာရှိတဲ့ style ကိုပဲပြမှာပါ။ ဒါကြောင့် active နဲ့ inactive stage ကို style သိပ်မကွာတာ သို့မဟုတ် တူတူထားရင်တော့ အဆင်ပြေပါတယ်။

တကယ်လို့ ဒီထက်ကောင်းတဲ့ နည်းလမ်းတွေရှိရင်လည်းပြောပြနိုင်ပါတယ်။ သင်ယူဖို့ အဆင်သင့်ပါပဲ။

အချိန်ပေးပြီး ဖတ်တဲ့ အတွက် အားလုံးကို ကျေးဇူးတင်ပါတယ်။

Credited to Craig Buckler from Sitepoint.com

Translated from How to Create a CSS3-Only Tab Control Using the :target Selector

Leave a comment

Name (required) Email (required) Website Comment (required)

CAPTCHA Code *