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

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



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

ایجاد انواع منوها و باکس های تب دار در چند گام ساده !

58139 ۲۵ اردیبهشت ۹۱

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


:: خوب ، امروز می خوایم بهتون آموزش بدیم که چطور در 3 گام ساده اینجور منو ها و باکس های tab دار رو بسازید .
:: برای ساخت این جور tabber menu یا tabber box به ترتیب این سه مرحله زیر رو طی کنید که بسیار ساده اند و واضح توضیح داده شده چیکار کنید :

.: فقط اعضاي سايت مجاز به ديدن اين قسمت هستند :.
در صورتي که عضو سايت هستيد می توانید لاگین شويد.
در غير اين صورت در کمتر از 1 دقيقه مي توانيد در سايت عضو شويد.

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

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

  • ‏‏

    لقمان جان سلام.
    من دوباره از این فرمت استفاده کردم.
    داداش اگه بخوام که تب انتخاب شده از راست باشه باید چی کار کنم؟
    دارم از زبان عربی استفاده می کنم.
    از توی استایل راست چینش کردم اما تب انتخاب شده سمت چپیه هست کهمی خوام بیاد راست.

    • ‏‏
      لقمان آوند(۹ بهمن ۱۳۹۱)

      سلام
      توی استایلش ببین . اگه تب ها فلوتشون چپه ، راستش کن . ممکنه لازم باشه rtl هم بکنی direction رو .

  • ‏‏

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

    • ‏‏
      لقمان آوند(۹ بهمن ۱۳۹۱)

      بالا سمت راست هر کد یه سری آیکون نمایش داده میشه وقتی موس رو ببری روی کد . می تونی کپی کنی و کد خالص رو ببینی .

  • ‏‏

    ممنون واقعا ممنون از سایت شما و مطالب آموزشیتون خیلی چیزا یاد .ممنون مثل شما خیلی کم هستن که بدون هیچ چشم داشتی اموزه های خودشونو به بقیه انتقال بدن تشکر فراوان 😳 😳 😳 😳 😳 😳 😳

    • ‏‏
      لقمان آوند(۱۳ اسفند ۱۳۹۱)

      خواهش می کنم . شما لطف دارید .
      موفق باشید

  • ‏‏

    سپاسگزارم- می خواسام بدونم چطوری می تونم برای تبها زیرتب بسازم.باسپاس

  • ‏‏

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

  • ‏‏

    منظورم اینه که باکس طوری باشه که فقط وقتی جاوا اسکریپت مرور گر اینیبل هست نمایش داده بشه
    و در مواقع دیسیبل کردن جاوا نمایش داده نشه مثل بقیه کد های جاوا(جلوگیری از راست کلیک) که وقتی جاوا اسکریپت مرور گر رو دیسیبل میکنیم دیگه کار نمیکنه.
    مثل این:
    http://moisrex.rozblog.com/post/3223/%DA%A9%D8%AF-%D9%85%D9%86%D9%88%DB%8C-%D8%AF%D8%A7%D8%B1%D8%A7%DB%8C-%D8%AA%D8%A8-%DA%A9%D9%87-%D8%A8%D8%A7-%D8%A8%D8%B1%D8%AF%D9%86-%D9%85%D8%A7%D9%88%D8%B3-%D8%B1%D9%88%DB%8C-%D8%AA%D8%A8-%D9%87%D8%A7%DB%8C-%D8%A2%D9%86-%D9%86%D8%B4%D8%A7%D9%86-%D8%AF%D8%A7%D8%AF%D9%87-.html

    • ‏‏
      لقمان آوند(۲۱ اردیبهشت ۱۳۹۲)

      می تونید به صورت پیشفرض با css ویژگی display برای کل باکس none بزارید و بعد از اون با جاوااسکریپت display باکس رو block کنید . اینطوری اگه js فعال نباشه باکس هم مخفی می مونه !

  • ‏‏

    سلام ، : خیلی مفید بود ، سپاسگزارم .

  • ‏‏

    سلام ممکنه بگید اگر بخوام داخل نوشته هام تب بندی بشه باید کجا کدها رو قرار بدم من نوشته های داخل پستم رو میخوام دسته بندی کنم نه داخل صفحه اصلی

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram