فیلم آموزش ساخت منوی آکاردئونی (کشویی) با CSS

در ادامه ی مطالب آموزش طراحی سایت، به شما خواهیم آموخت که چگونه با همین اطلاعاتی که تا به امروز با فیلم های آموزشی css و html آنلاینر یاد گرفته اید، می توانید یک منوی آکاردئونی (جمع شونده) ساده، بدون حتی یک خط کد jquery ایجاد کنید.

می توانید لیست منوهای دیگری که در آنلاینر آموزش داده شده است را در زیر مشاهده کنید :

[hdplay id=54]

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

[free_vip]
[video_download cat=’html’ url=’https://onliner.ir/css-videos/creating-accordion-menu-pure-css.mp4′]دانلود فیلم آموزش ایجاد منوی آکاردئونی (کشویی) با CSS[/video_download]

[onliner_button type=”edu-demo” url=’http://dl.onliner.ir/css-snippets/accordion-menu.zip’]دانلود دمو[/onliner_button]
[/free_vip]

دسترسی سریع :

دیدگاه خود را برای ما ارسال کنید

14 Comments
  1. Pingback: آموزش CSS | آموزش ساخت گالری عکس با CSS و HTML

    • hosseinTTT
    • ۱۳۹۳-۰۴-۲۴
    پاسخ

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

    • sepide
    • ۱۳۹۳-۰۵-۰۹
    پاسخ

    سلام
    ممنون از سایت خوبی که دارین.
    ببخشید این کد تو IE عمل نمی کنه؟
    یا من اشتباه کد زدم؟
    وقتی با IE باز میکنم و میرم رو span ها متن رو زیرش نمیاره.چرا؟

      • گروه آموزش طراحی سایت
      • ۱۳۹۳-۰۵-۰۹
      پاسخ

      سلام
      نسخه ی IE شما اگر بروز باشد نباید مشکلی داشته باشید.

    • Amirhosein
    • ۱۳۹۳-۰۵-۱۴
    پاسخ

    سلام میخواستم یک سوال بپرسم سوالم اینه که اگه بخوام یه کد بنویسم که یک دکمه داشته باشم و روی دکمه یک عدد رو نشون بده و با هر کلیک روی دکمه یک عدد به به آن عدد اضافه بشه باید چی کار کنم
    فرقی نمی کند با html با javascript یا….
    پاسخ را لطفا به من ایمیل کنید.

  2. ممنونم عالی بود

    • رضا واحدی
    • ۱۳۹۳-۰۹-۰۷
    پاسخ

    از تلاش های صادقانه تیم زحمت کش سایتتان تشکر می شود فوق العاده مفید وارزشمند بود

    • داوود
    • ۱۳۹۴-۰۴-۰۲
    پاسخ

    سلام آقای مهندس، درس بسیار بسیار جالبی بود و البته برای من هم چند تا سوال پیش اومد که به ترتیب و بعد از پاسخ دادن به هر کدومشون، ازتون می پرسم.
    ببینید چرا ما اومدیم و اینجوری مسیردهی کردیم:
    ul.accardion div{
    color:yellow;
    display:none;
    }
    خوب الان اگه به جای div تگ p رو هم میذاشتیم جواب میداد، درست میگم؟؟ پس چرا نیومدیم و تگ p رو نذاشتیم؟؟ چرا به تگ div دادیم این خاصیت رو؟؟ اینجا برای من ابهام هستش که چرا مثلا ما ریز تر نرفتیم داخل و یا اینکه چرا فقط P رو ننوشتیم؟؟

      • گروه آموزش طراحی سایت
      • ۱۳۹۴-۰۴-۰۳
      پاسخ

      با عرض سلام و احترام خدمت شما
      به این خاطر از div استفاده کرده ایم، چون ممکن است درون هر کدام از div ها (که به صورت آکاردئونی کار می کنند) نیاز داشته باشیم تعدادی پاراگراف با تگ p بسازیم؛ پس بنا بر این به این صورتی که اقدام شده است، انعطاف پذیری بیشتری وجود دارد.

        • داوود
        • ۱۳۹۴-۰۴-۰۴
        پاسخ

        با سلام مجدد؛
        آها ؛ که اینطور. پس کار من خیلی هم اشتباه نبوده. مرسی و متشکرم.

    • امگا
    • ۱۳۹۴-۱۰-۱۸
    پاسخ

    خیلی ممنون از ویدیوهای عالیتون. موفق باشید

    • ادب دوست ایرانی
    • ۱۳۹۵-۰۳-۲۱
    پاسخ

    سلام دوست عزیز

    گرافیک فایلی که تو فیلم یاد میگیریم بسازیم با گرافیک دمو یکیه ؟

      • سمیه شمس
      • ۱۳۹۶-۰۶-۲۶
      پاسخ

      سلام. بله

    • black_cloner
    • ۱۳۹۸-۰۷-۰۱
    پاسخ

    سلام خسته نباشید
    واقعا خیلی خوب توضیح داده شده مطالب در ویدیو ها ولی متاسفانه لینک دانلود از ویدیو شماره ۲۱ به بعد خراب هستن .
    ممنون میشم که تصحیحشون کنید