ساخت منوی تب دار با HTML5 و CSS3
دارالترجمه رسمی
دارالترجمه رسمی پارسیس شامل خدمات ترجمه رسمی و تخصصی در بیش از 60 زبان زنده دنیا
دارالترجمه رسمی پارسیس شامل خدمات ترجمه رسمی و تخصصی در بیش از 60 زبان زنده دنیا
افزونه های سئو وردپرس
بهترین افزونه های سئو وردپرس به صورت کاملا فارسی
بهترین افزونه های سئو وردپرس به صورت کاملا فارسی
افزونه فرم ساز آسان
فرم ساز آسان اولین فرم ساز کاملا فارسی وردپرس
فرم ساز آسان اولین فرم ساز کاملا فارسی وردپرس
خرید ورق گالوانیزه رنگی
خرید انواع ورق گالوانیزه رنگی با بهترین قیمت
خرید انواع ورق گالوانیزه رنگی با بهترین قیمت
کارگاه رویه کوبی در تهران
بهترین کارگاه رویه کوبی و تعمیر مبل راحتی و استیل در تهران با قیمت و کیفیت عالی
بهترین کارگاه رویه کوبی و تعمیر مبل راحتی و استیل در تهران با قیمت و کیفیت عالی
بلیط هواپیما مشهد تهران
خرید بلیط هواپیما مشهد تهران
خرید بلیط هواپیما مشهد تهران
بلیط هواپیما تهران شیراز
خرید بلیط هواپیما تهران شیراز
خودتان را اینجا معرفی کنید
خرید بلیط هواپیما تهران شیراز
مرحله 1 : ساخت قالب بندی
در این بخش قالب بندی خودمان را بر اساس HTML5 میسازیم، همچنین قسمتی برای پشتیبانی از مرورگر IE در کد قرار دادیم که با If It IE 9 مشخص شده است :
<!DOCTYPE HTML>
<head>
<meta charset=utf-8 />
<title>CSS3 Tabs</title>
<!-- Styles !-->
<link rel="stylesheet" href="styles/themes/jean/darkwash.css" media="screen" />
<!--[if lt IE 9]>
<link rel="stylesheet" href="styles/ie.css" media="screen" />
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
</head>
<body>
</body>
</html>
بعد از ساخت بخش Header اکنون باید قسمت های درونی بدنه ی فایل HTML را بسازیم، id المنت اول را container میگذاریم و در برگیرنده ی منوی تب دار ما میباشد، بخش دوم کلاس tab-container میباشد که یک دربرگیرنده برای تب ها میباشد و لزوما نیازی دارید که در آینده آن را ادیت کنید، بخش های زیر را به فایل HTML اضافه میکنیم :
<!-- Start Tab Area. Use the container for positioning and to increase the tab content width !-->
<div id="container">
<!-- Start Tabs !-->
<div class="tab-container">
Tabs will go here
</div><!-- Tab Container !-->
</div><!-- Container !-->
<!-- End Tab Area !-->
ابتدا یک div میسازیم با آیدی c1 به این دلیل هنگامی که روی آن کلیک شد متوجه شویم :
<div id="c1">
//Next markup will go here
</div>
سپس تب مورد نظر را برای محتوای مورد نظرمان میسازیم و به آن میگوییم که با کلیک روی لینک تب div مورد نظر با آیدی c1 را نمایش دهد :
<div id="c1">
<a href="#c1" title="First">First</a> <!-- This is your actual tab and the content is below it !-->
//Next Markup will go here
</div>
حالا قسمتی را میسازیم که محتوای مورد نظرمان را در آن قرار دهیم، یک div میسازیم با آیدی tab-content و در آن متن وارد میکنیم، بنابراین مارک آپ ما به صورت زیر میشود :
<div id="c1">
<a href="#c1" title="First">First</a> <!-- This is your actual tab and the content is below it !-->
<div class="tab-content"> <!-- tab-container > div > div in the CSS !-->
<h3>This is the first tab</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. porttitor est et rhoncus.Nam ipsum leo, ornare ac volutpat suscipit, convallis eu metus ipsum nunc.</p>
<p>Suspendisse at aliquet turpis. Phasellus eu libero euismod leo imperdiet sagittis elementum ut erat. Nam euismod risus at sem consequat vestibulum. </p>
</div>
</div>
در این بخش قسمت نهایی مارک آپ را اضافه میکنیم، بقیه تب ها را به همراه محتوای آنها وارد میکنیم، توجه کنید که اولین چیزی که نشان داده میشود محتوای Content اول است بنابراین میتوانید آن را به صورت خوش آمدگویی به کاربرانتان بنویسید، بقیه ی فایل HTML ما به صورت زیر میشود :
<div id="c2">
<a href="#c2" title="Second">Second</a> <!-- This is your actual tab and the content is below it !-->
<div class="tab-content"> <!-- tab-container > div > div in the CSS !-->
<h3>Add as many tabs as you like</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. porttitor est et rhoncus. Nam ipsum leo, ornare ac volutpat suscipit, convallis eu metus. ipsum nunc.</p>
<p>Suspendisse at aliquet turpis. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. porttitor est et rhoncus. Nam ipsum leo, ornare ac volutpat suscipit, convallis eu metus. ipsum nunc.</p>
</div>
</div>
<div id="c3">
<a href="#c3" title="Third">Third</a> <!-- This is your actual tab and the content is below it !-->
<div class="tab-content"> <!-- tab-container > div > div in the CSS !-->
<h3>5 Preset Styles & Color Themes</h3>
<p>Consectetur adipiscing elit. porttitor est et rhoncus. Nam ipsum leo, ornare ac volutpat suscipit, convallis eu metus. ipsum nunc.</p>
<p>Suspendisse at aliquet turpis. Phasellus eu libero euismod leo imperdiet sagittis elementum ut erat. Nam euismod risus at sem consequat vestibulum. </p>
</div>
</div>
<div id="c4">
<a href="#c4" title="Fourth">Fourth</a> <!-- This is your actual tab and the content is below it !-->
<div class="tab-content"> <!-- tab-container > div > div in the CSS !-->
<h3>NO Javascript! NO Images!</h3>
<p>Consectetur adipiscing elit. porttitor est et rhoncus. Nam ipsum leo, ornare ac volutpat suscipit, convallis eu metus. ipsum nunc.</p>
<p>Suspendisse at aliquet turpis. Phasellus eu libero euismod leo imperdiet sagittis elementum ut erat.</p>
</div>
</div>
<div id="c5">
<div class="tab-content"> <!-- Having a hidden or opening tab is ideal when you don't want last tab to always show first when loading the page !-->
<h3>2 Tab Types - Regular and Newsreel</h3>
<p>If you have an opening tab like this, it should always be last in the list of tabs otherwise it won't show first when the page loads.</p>
<p>Text sometimes overlaps with hidden tabs in IE7 & 8</p>
</div>
</div>
فایل ما بدون استایل دهی مناسب به صورت زیر است، بنابراین کمی استایل به آن اضافه میکنیم
مرحله 2 : اضافه کردن استایل
یک مرحله جلوتر میرویم و با CSS به فایلمان کمی استایل میدهیم، ابتدا به تگ های Global مانند تگ های p ، heading ، body و ... استایل میدهیم، این استایل ها به صورت پیشفرض ممکن است توسط شما به وبسایتتان اضافه شده باشد بنابراین میتوانید از تغییر بعضی از آنها صرف نظر کنید :
body {
font-size:13px;
font-family:Arial, Helvetica, sans-serif;
color:#E7E7E7;
}
p, .tab-content li, h1, h2, h3{ /* This insures that there's enough space between your paragraphs, headings, etc */
margin-bottom: 10px;
}
a{
text-decoration:none;
color:#EFD24A;
}
a:hover{
color:#AF9B41;
}
.tab-container h3{ /* Effects only the h3 headings inside the tabs */
font-size:147%;
color:#EFDFB3;
}
اکنون به Container ها استایل میدهیم، با استفاده از margin:0 auto ، Container اول را در وسط صفحه قرار میدهیم، به آن عرض 480 پیکسل میدهیم و همچنین از 4% به سمت پایین آن را هل میدهیم :
#container{ /* Use this to position the entire tab module */
margin:0 auto;
width:480px;
margin-top:4%;
}
برای tab-container به هرکدام از تب ها پوزیشن relative میدهیم، همچنین width آن را 100% قرار میدهیم تا به پهنای پدر خود بچسبد در نهایت به صورت زیر میشود :
.tab-container {
position: relative;
width: 100%;
z-index:0;
}
در حال حاضر باید پروژه ی شما به صورت زیر شده باشد :
برای اینکه تب ها به صورت افقی کنار هم قرار بگیرند باید به آنها display:inline بدهیم :
.tab-container > div {
display: inline;
}
اکنون باید یه سری استایل های دیفالت را به تب ها بدهیم و ظاهر آنها را مرتب کنیم، این ظاهر میتواند بنابه نظر شما تغییر کند یا باتوجه به طرح شما کاملا تغییر باید، بنابراین استایل دهی ما در این مثال به صورت زیر است
.tab-container > div > a {
position: relative !important; /* Keeps the tabs in line with each other */
text-decoration: none;
color: #D7D7D7;
display: inline-block;
padding: 4px 14px;
font-size:15px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight:bold;
text-transform:uppercase;
margin:2px;
background: #4C4648; /* old browsers */
background: -moz-linear-gradient(top, #4C4648 0%, #474344 52%, #2F2D2E 100%); /* firefox */
background: linear-gradient(top, #4C4648 0%, #474344 52%, #2F2D2E 100%); /* future browsers */
-pie-background: linear-gradient(top, #4C4648 0%, #474344 52%, #2F2D2E 100%); /* pie for ie */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4C4648), color-stop(52%,#474344), color-stop(100%,#2F2D2E)); /* webkit */
border:dashed 2px #CFA840;
padding: 4px 14px;
-moz-border-radius: 3px;
-webkit-border-radius: 0px;
border-radius: 3px;
text-shadow: 0 -1px 0 #000000;
-moz-box-shadow: 0 4px 10px -5px #000000;
box-shadow: 0 4px 10px -5px #000000;
-webkit-box-shadow: 0 4px 10px -5px #000000;
}
حالا باید کاری کنیم که کاربر بداند درون کدام تب قرار دارد، بنابراین tab-container > div:target میگوید که زمانی که اولین div سلکت شد حالت آن را تغییر میدهیم :
.tab-container > div:target > a {
background: none repeat scroll 0 0 #948a81;
text-shadow: 0 1px 0 #4C4648;
}
همچنین به div درون tab-container استایل های زیر را اختصاص میدهیم :
.tab-container > div > div { /* This is the container which holds the tab content */
background: #4C4648; /* old browsers */
background: -moz-linear-gradient(top, #4C4648 0%, #474344 84%, #2F2D2E 100%); /* firefox */
background: linear-gradient(top, #4C4648 0%, #474344 84%, #2F2D2E 100%); /* future browsers */
-pie-background: linear-gradient(top, #4C4648 0%, #474344 84%, #2F2D2E 100%); /* pie for ie */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4C4648), color-stop(84%,#474344), color-stop(100%,#2F2D2E)); /* webkit */
-moz-box-shadow: 0 0 12px 1px #000000 inset;
-webkit-box-shadow: 0 0 12px 1px #000000 inset;
box-shadow: 0 0 12px 1px #000000 inset;
z-index: -2;
top: 50px;
padding: 20px;
border:solid 6px #4C4648;
outline: 2px dashed #CFA840;
outline-offset: -8px; /*Delete if you don't want an offset*/
min-height:250px; /* Change this value if you need more or less content space */
position:absolute; /* Fixes IE 7 & 8 */
}
حالا باید target را به ابتدا بیاوریم، برای اینکار از سلکتور target استفاده میکنیم و به آن z-index سه میدهیم
.tab-container > div:target > div {
position: absolute;
z-index: 3 !important; /* Brings the content to the front depending on the tab that was clicked */
}
آخرین کاری که باید انجام دهیم این است که کمی padding بدهیم و همچنین کمی استایل دهی را تغییر دهیم برای مثال اگر نیاز به گذاشتن عکس درون تب ها دارید این کار را انجام دهید، همچنین یادتان نرود که فایل reset.css را بارگزاری کنید.
div.tab-content{ /* Styles the inner content of the tabs */
padding-bottom: 70px;
padding-left: 20px;
padding-right: 20px;
}
.tab-content img{
margin:0 auto;
display:block;
padding-bottom: 20px;
padding-top: 10px;
}
/****** This imports other stylesheets so you don't have to call them in an html file *****/
@import url('../../reset.css');
سپس باید نتیجه نهایی کارتان شبیه به عکس زیر باشد، اگر چیزی متفاوت با عکس زیر بود دوباره به آموزش فوق نگاه کنید و بخشی را که فراموش کرده اید انجام دهید را به پایان برسانید.
محمد بابازاده
محمد یه دانشجوی فناوری اطلاعات هست که از سال 92 فعالیتش رو شروع کرد، در حال حاضر در زمینه ی برنامه نویسی تحت وب و اندروید و شبکه های ارتباطی سیسکو فعالیت میکنه .
نظرات و سوالات کاربران
مرسی
تشکر بابت زحمات شما