منوهای خاص

[mahdi.iqu]

سلام تو خیلی از سایت ها دیدم منوهای خاصی دارند
منظورم این هست تا وقتی روشون کلیک نکنی باز نمیشند
نمونه این منو ها رو تو این سایت دیدم:
آدرس سایت
ممنون میشم اگر کسی در این رابطه تجربه ای داره به ما هم یاد بده

[Jarvis]

CSS ــه استفاده شده در این منو ها از کتابخانه ی Bootstrap گرفته شده...
برای ساختشون هم از JQuery استفاده شده ...
شما با JQuery می تونید منوهای بهتر از این رو هم بسازید...

ایام به کام - موفق باشید

[mahdi.iqu]

تشکر
میتونید کمکم کنید تا منم بتونم عین این رو بسازم؟
خواهش میکنم
نمونه خارجی نداره؟
کمک کنید

[2undercover]

اینو براتون نوشتم!هر کجاشو که نفهمیدین بگین براتون توضیح میدم(ببخشید یک مشکلی داشت الان درستش کردم!):

[dr.undead]

این سایتم میتونه خیلی کمکت کنه
http://www.codepen.io/

[mahdi.iqu]

میشه یکم رو کد هاتون توضیح بدید؟
دوست من undead این سایت چی هست؟

[2undercover]

اینم توضیحات:

$('#Menu > li').click(function(){});

توی این قسمت که واضحه می خوایم هر وقت روی اون تگ li که توی #Menu هست کلیک شد دستورات بعدی اجرا بشه!

if($(this).attr('class')=='Active')

برای مشخص کردن این که کدوم لیست باز شده به اون li که الان بازه کلاس Active رو میدیم و اینجا چک می کنیم ببینیم که لیست باز شده یا بسته است!

$(this).children().hide();

$(this).removeClass('Active');

این دستورات در صورتی اجرا میشه که شرط بالا صحیح باشه یعنی لیست باز بوده پس باید بسته بشه که تابع children تمام تگ های زیر مجموعه ی اون li که روش کلیک شده رو بر می گردونه و تابع hide هم همه ی اون هارو مخفی یا محو می کنه! بعد هم با تابع removeClass اون کلاس Active که رو که مال لیست باز هست رو حذف می کنیم چون لیست بسته شده!

$('#Menu > li').removeClass('Active');

$('#Menu > li').children().hide();

$(this).addClass('Active');

$(this).children().show();

خوب این کد ها هم اگر شرط اشتباه بود اجرا میشن یعنی لیستی که روش کلیک شده بسته بوده و باید باز بشه!

تو دو خط اول هر چی لیست بوده رو می بندیم و کلاس های Active تمام لیست های رو حذف می کنیم!(تو خط های قبلی چگونگیش رو توضیح دادم!)

خوب چون لیست می خواد باز بشه پس باید کلاس Active رو به لیستی که روش کلیک شده اضافه می کنیم با تابع addClass!

در خط چهارم همه ی تگ های زیرمجموعه اون لیستی که روش کلیک شده رو با تابع show به نمایش در میاریم!

این توضیحات کد های JQuery اگر توی استایل های CSS مشکلی داشتید بگید تا اون هارو هم توضیح بدم؟!

[dr.undead]

میشه یکم رو کد هاتون توضیح بدید؟
دوست من undead این سایت چی هست؟

یه سایت پر محتوا از مثال های css jquery به همراه demo و کدها

[bitcob589]

اینم توضیحات:

$('#Menu > li').click(function(){});

توی این قسمت که واضحه می خوایم هر وقت روی اون تگ li که توی #Menu هست کلیک شد دستورات بعدی اجرا بشه!

if($(this).attr('class')=='Active')

برای مشخص کردن این که کدوم لیست باز شده به اون li که الان بازه کلاس Active رو میدیم و اینجا چک می کنیم ببینیم که لیست باز شده یا بسته است!

$(this).children().hide();

$(this).removeClass('Active');

این دستورات در صورتی اجرا میشه که شرط بالا صحیح باشه یعنی لیست باز بوده پس باید بسته بشه که تابع children تمام تگ های زیر مجموعه ی اون li که روش کلیک شده رو بر می گردونه و تابع hide هم همه ی اون هارو مخفی یا محو می کنه! بعد هم با تابع removeClass اون کلاس Active که رو که مال لیست باز هست رو حذف می کنیم چون لیست بسته شده!

$('#Menu > li').removeClass('Active');

$('#Menu > li').children().hide();

$(this).addClass('Active');

$(this).children().show();

خوب این کد ها هم اگر شرط اشتباه بود اجرا میشن یعنی لیستی که روش کلیک شده بسته بوده و باید باز بشه!

تو دو خط اول هر چی لیست بوده رو می بندیم و کلاس های Active تمام لیست های رو حذف می کنیم!(تو خط های قبلی چگونگیش رو توضیح دادم!)

خوب چون لیست می خواد باز بشه پس باید کلاس Active رو به لیستی که روش کلیک شده اضافه می کنیم با تابع addClass!

در خط چهارم همه ی تگ های زیرمجموعه اون لیستی که روش کلیک شده رو با تابع show به نمایش در میاریم!

این توضیحات کد های JQuery اگر توی استایل های CSS مشکلی داشتید بگید تا اون هارو هم توضیح بدم؟!

اگر امکان دارد سمپل بگذارید

[2undercover]

توی پست پنجم کل فایل هارو کامل ضمیمه کردم!

[bitcob589]

توی پست پنجم کل فایل هارو کامل ضمیمه کردم!

ظاهر سورس php است اگر امکان دارد با asp.net یا html بگذارید

[2undercover]

شرمنده موقع نوشتن حواسم نبود با فرمت php ذخیره کردم و گرنه کد php نداره توش! شما دستی فرمتشو به html تغییر بده!

[bitcob589]

در سمپل همه لیستها باز هستند و امکان بسته شدن لیستها وجود ندارد

[2undercover]

من روی Opera و Chrome تست کردم مشکلی نداشت!

احتمالا از IE استفاده کردید!

[mahdi.iqu]

من هم تست کردم
بسته نمیشند با فایر فاکس هم تست کردم

[2undercover]

برای بسته شدن باید دوباره روی لیست کلیک کنید!احتمالا شما توی نقاط خالی صفحه کلیک می کنید!برای اینکه اگه توی نقاط دیگه صفحه کلیک شد منو بسته بشه باید یک چند خط کد دیگه اضافه کرد!

[mahdi.iqu]

نه والا رو هر جا کلیک میشه بسته نمیشه حتی رو خود منو

[mahdi.iqu]

میشه مجدد بررسی کنید؟

[2undercover]

با بقیه مرورگر ها هم امتحان کردین؟نمی دونم آخه روی سیستم خودم جواب میده؟!

[2undercover]

خودم الان با Firefox 20 امتحان کردم درست کار می کرد!

[mahdi.iqu]

با همه مرورگر ها همین مشکل هست@!

[2undercover]

باید درست شده باشه دیگه:

[mahdi.iqu]

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

[2undercover]

عجب مشکلیه! من اینو امتحان کردم هر جا به غیر از منوی باز کلیک بشه بسته میشه: