طراحی باکس وب تب دار با css3

- visibility ١٣ mode_comment

همونطور که میدونید در یکی از مطالب سون لرن، آقای علی محمدی، طراحی باکس وب تب دار با jQuery رو آموزش دادند. بنا به درخواست یکی از دوستان، بنده امروز طراحی باکس وب تب دار رو با استفاده از css3 آموزش میدم. در واقع روشی که قراره استفاده کنیم، استفاده از دکمه های رادیویی و انتخابگر :checked هست. فکر میکنم بهترین روشی هم که برای ساخت باکس تب دار با css3 هستش همین روشه. حداقل برای الان و چند سال دیگه که اینطوره. پس با سون لرن همراه باشید...

مشاهده دمو

ساختار HTML

درواقع هر تب شامل یک دکمه رادیویی، یک label، و یک div برای محتواست.

کدهای CSS:

دکمه های رادیویی رو مخفی کردیم، چرا؟ چون لازم نیست ببینیمشون، فقط میخوایم که انتخاب بشن، که وقتی روی label کلیک کنیم دکمه رادیویی مربوطه رو انتخاب میکنه. به کلاس .tab خاصیت float دادیم تا labelها در یک سطر کنار هم قرار بگیرند. خاصیت position کلاس .content رو هم absolute قرار دادیم تا قسمت محتواهامون (یعنی همون divها با کلاس .content) دقیقا روی همدیگه قرار بگیرند. حالا وقتی یک دکمه رادیویی رویداد :checked داره، خاصیت z-index کلاس .content مجاورش رو یک دادیم تا روی بقیه عناصرمون قرار بگیره و درواقع اینطوری دیگر قسمت های محتوامون رو پنهان کردیم و فقط قسمت محتوایی که بعد از دکمه رادیویی انتخاب شده قرار داره رو نشون دادیم.

اینم از آموزش ساخت باکس وب تب دار با css3! ولی بهتره از jquery برای ساخت باکس وب استفاده کنید چون به هرحال خاصیت های css3 توی بعضی مرورگر ها مثل IE (که نمیدونم چرا انقدر هم طرفدار داره!!!) اجرا نمیشه.

دریافت سورس کد

comment دیدگاه کاربران
sib_Sabz00

سلام خسته نباشید
خیلی خیلی ازتوم ممنون
واقعا دستتون درد نکنه، لطف کردید

محمد قاسم

سلام. خیلی ممنون. هر چند یکی از دوستان قبلا زحمت آموزشش رو انجمن کشیده بود!

درسته دوست عزیز بنده هم قبلا آموزش خوب ایشون رو دیدم
منوی accordion هستش، این آموزش tab هست
البته تکنیک ها یکی هستند و با یاد گرفتن همون هم میشه این تب رو ساخت
به هرحال من به خاطر درخواست یکی از دوستان این آموزش رو قرار دادم 😉

محمد قاسم

اینم لینکش:
http://www.7learn.com/forums/topic/%d8%a2%d9%85%d9%88%d8%b2%d8%b4-%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d9%85%d9%86%d9%88-%d8%a7%d9%81%d8%aa%d8%a7%d8%af%d9%86%db%8c-accordion-%d8%aa%d9%86%d9%87%d8%a7-%d8%a8%d8%a7-css

عباس کاظمی

عالی بود 😉
مرسی
واقعا 7لرن بهترینها هستش
😉 😉 😉 😉

آموزش خیلی خوبی بود
اما یه انتقاد دارم :
از فونت نوشته ها خوشم نیومد 😐

منم از فونتش خوشم نمیاد
از تنبلی استایل آموزش مکعب رو برداشتم تغییر دادم 😀

h

a”lllllllllllllllllllllllllllllllllll bood

md5

با سلام قصد بی احترامی ندارم اما بیشتر مطالبی قرار می دهید بیشتر ابزاری هستند امیدوارم از این حالت در بیاد. 💡

سلام
منظورتون رو از ابزاری بودن متوجه نشدم؟!

md5

ببخشید اینو می خواستم برای اموزش دریم ویور بفرستم….
http://www.wedesign.ir/podcast/design-principles-twitter-google-pagerank

رضا

سلام.واقعا خسته نباشید.من سایتی بهتر از شما توی زمینه طراحی وب پیدا نکردم واقعا.خدا خیرتون بده.

مهری

سلام.ببخشید ای کد css ها رو کجای جوملا وارد کنیم که تغییراتش اعمال بشه؟مممنون میشم راهنمایی بکنید

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.