آموزش: طراحی منو افتادنی (Accordion) تنها با CSS

این تاپیک 15 پاسخ و 4 مشارکت کننده دارد . آخرین آپدیت توسط :  محمد سلطان زاده ،‏ 3 سال پیش .

این تاپیک تاکنون 2222 بازدید داشته است .

نویسنده پست
جمعه ، 22 نوامبر 2013     10:08 ب.ظ #


محمد سلطان زاده

Subscriber
243 پست30 تاپیک

سلام دوستان.

احتمالا تو اکثر سایت ها منو های افتادنی که معروف به آکوردئون هستن و اکثرا هم با کمک جی کوئری طراحی میشن رو دیدین.

شما می تونید با این آموزش تنها با استفاده از CSS (از نوع 3 !) ازینجور منو ها برا سایت یا وبلاگ خودتون بسازین.

برم سر اصل مطلب!

کد اچ تی ام ال:

کد سی اس اس:

اینم دمو

امیدوارم مفید واقع شده باشه

4  تشکر
شنبه ، 23 نوامبر 2013     9:42 ق.ظ #


mina_s84

Subscriber
21 پست6 تاپیک

درود

این منو طوری ساخته شده که حتما باید یکی از منو ها باز باشد و همزمان نمیشه چند تا منو رو باز گذاشت یا هیچ کدوم رو باز نگذاشت. به نظرم اگه اینم قرار بدید کاملتر میشه. به هر حال سپاس اط مطلب خوب و مفیدتون.

1  تشکر
شنبه ، 23 نوامبر 2013     11:31 ق.ظ #


محمد سلطان زاده

Subscriber
243 پست30 تاپیک

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

[quote=18422]باید حتما باید یکی از منو ها باز باشه[/quote]

شما می تونین توی کد اچ تی ام ال، تو قسمت اینپوت باکس دوم، خاصیت checked رو حذف کنین، تا به صورت خودکار تمام منو ها بسته باشه.

[quote=18422]همزمان نمیشه چند تا منو رو باز گذاشت یا هیچ کدوم رو باز نگذاشت.[/quote]

بله، چون اینپوت های ما از نوع radio هستن، شما می تونین نوع checkbox رو جایگزینش کنین تا بشه همزمان تمام منو ها باز و یا بسته باشه.

اینم دمو ۲

0  تشکر
شنبه ، 23 نوامبر 2013     11:34 ق.ظ #


محمد سلطان زاده

Subscriber
243 پست30 تاپیک

حیف که دستمون باز نیس، وگرنه مطالب جالب تری میزاشتیم! دی:

0  تشکر
شنبه ، 23 نوامبر 2013     1:41 ب.ظ #


mina_s84

Subscriber
21 پست6 تاپیک

سپاس از شما. نام این منو که شما قرار دادید کمک بسیار بزرگی به من کرد. بازم ممنون.

0  تشکر
شنبه ، 23 نوامبر 2013     1:48 ب.ظ #


حسین محمدی

Subscriber
482 پست60 تاپیک

سلام میتونید با جی کوئری این کد رو بسیار جالبتر کنید...میتونید این کدرو با پلاگین easing  و سایر خصلتهای جی کوئری بازنویسی کنید...

 

0  تشکر
شنبه ، 23 نوامبر 2013     1:50 ب.ظ #


محمد سلطان زاده

Subscriber
243 پست30 تاپیک

[quote=18429]سپاس از شما. نام این منو که شما قرار دادید کمک بسیار بزرگی به من کرد. بازم ممنون.[/quote]

خواهش میکنم. وظیفس.

1  تشکر
شنبه ، 23 نوامبر 2013     1:53 ب.ظ #


محمد سلطان زاده

Subscriber
243 پست30 تاپیک

[quote=18430]سلام میتونید با جی کوئری این کد رو بسیار جالبتر کنید...میتونید این کدرو با پلاگین easing و سایر خصلتهای جی کوئری بازنویسی کنید... [/quote]

سلام. بله، درسته با جی کوئری میشه افکت های جالب تری بهش داد. ولی هدف ازین آموزش این بود که منو تنها با استفاده از CSS ساخته بشه و جی کوئری داخلش دخالتی نداشته باشه. (واسه کاهش حجم سایت و سرعت بخشیدن به لود صفحه)

البته داخل همین آموزش هم برا افکت دادن به منو از خاصیت transition و transform استفاده شده و کار رو زیباش کرده.

0  تشکر
سه شنبه ، 26 نوامبر 2013     12:00 ق.ظ #


happygoldman

Subscriber
6 پست1 تاپیک

سلام

استاد من کد سی اس اس رو توی استایل گذاشتم و اچ تی ام ال رو توی پستی که مد نظرم بود ولی باکسی ساخته نشد فقط سه تا دایره تو خالی با نام های باکس 1 و... که زیرش توضیحات مربوطه بود اومد(عکس رو پیوست کردم مشاهد کنید). من کجا رو اشتباه رفتم؟!!

لطفا کمکم کنید مرسی

پیوست ها:
You must be logged in to view attached files.
1  تشکر
سه شنبه ، 26 نوامبر 2013     12:03 ق.ظ #


محمد سلطان زاده

Subscriber
243 پست30 تاپیک

آدرس وبتون لطفا.

1  تشکر
پست 1 تا 10 (از مجموع 16 پست)

برای پاسخ دادن به این تاپیک باید وارد سایت شوید .