illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

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

8018 ۲۵ آذر ۹۲

همونطور که میدونید در یکی از مطالب سون لرن، آقای علی محمدی، طراحی باکس وب تب دار با 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 (که نمیدونم چرا انقدر هم طرفدار داره!!!) اجرا نمیشه.

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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 13 دیدگاه برای این مطلب ارسال شده است. نظردهی برای این مطلب بسته شده است .

  • ‏‏
    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لرن بهترینها هستش
    😉 😉 😉 😉

  • ‏‏
    رضا ساطع بیدگلی(۲۵ آذر ۱۳۹۲)

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

    • ‏‏
      مهشاد کلانتری(۲۵ آذر ۱۳۹۲)

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

  • ‏‏

    a”lllllllllllllllllllllllllllllllllll bood

  • ‏‏

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

    • ‏‏
      مهشاد کلانتری(۲۶ آذر ۱۳۹۲)

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

      • ‏‏

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

  • ‏‏
    رضا(۴ دی ۱۳۹۲)

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

  • ‏‏
    مهری(۵ دی ۱۳۹۲)

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

  • ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram