superFish : پلاگین jQuery برای ساخت منوهای چند سطحی

- visibility ۱۳ mode_comment

در این مطلب میخوام یک پلاگین jQuery بنام superFish رو خدمت شما معرفی کنم و اونو آموزش بدم.

با استفاده از این پلاگین میتونین به راحتی هر چه تمامتر منوهای چند سطحی ایجاد کنید که در تمامی مرورگرها بخوبی اجرا بشن. مانند تصویر زیر :

superfish

 

نحوه استفاده :

ابتدا باید به صفحه مربوطه در سایت Github برید و فایلهای مورد نظر رو دانلود کنید. در این مطلب ما به jQuery و superfish.min.js و superfish.css و hoverIntent.js نیاز داریم. من این فایلهارو در انتهای این مطلب قرار دادم و میتونین از اونا استفاده کنید.

حالا یه فایل بنام index.html بسازید و کدهای زیر رو درونش قرار بدین :

میبینید که تا اینجا فایلهای مورد نظر رو وارد کردیم. در انتهای قسمت body هم یک تگ باز و بسته ی script قرار دادیم که میتونیم کدهای مورد نظر رو درونش بنویسیم. در بالا یک منوی چند سطحی ایجاد کردیم ، اگر تا اینجا در مرورگر مشاهده کنید ، چیزی مثل تصویر پایین رو خواهید دید :

Sf1

میبینید که استایل پیش فرض مرورگر به منو اعمال شده و جالب نیس. حالا کافیه که به اون ul پدر ( Parent ) کلاس sf-menu رو نسبت بدیم. با این کار استایلهای CSS به منوی ما اعمال میشه و شکلی شبیه به زیر رو خواهید دید:

sf2

بهمین سادگی. تا اینجا فقط با CSS منو رو درست کردیم ، حالا با استفاده از پلاگین jquery میتونیم چنتا چیز بهش اضافه کنیم که بهتر نشون داده بشه. برای اینکار باید در اون تگ Script آخر کدهای زیر رو قرار بدین :

میبینید که تابع superfish رو برای همون ul صدا زدیم. با این کار دو ویژگی بارز به منو اضافه میشه. یکی اینکه عناصری که زیرمجموعه دارن ، یک فلش در کنارشون نشون داده میشه و دیگری اینکه ، منوها با حالت انیمیشنی باز و بسته میشن. بصورت زیر :

sf3

همچنین میتونین تعدادی خصوصیت رو به تابع superfish پاس بدین ، که من دو تاشو براتون توضیح میدم :

  • delay : با استفاده از این خصوصیت میتونین مشخص کنید که منو چقد بعد از خارج شدن ماوس از روی عنصر پدر مخفی بشه. باید بصورت عددی مقدار بهش بدین. مثلا 2000 برابر با 2 ثانیه هست.
  • cssArrows : با استفاده از این خصوصیت میتونین مشخص کنید که اون فلشها نشون داده بشن یا نه. میتونین دو مقدار false یا true رو بهش نسبت بدین.

اگه دقت کرده باشین ، هر زمان با سرعت ماوستون رو بر روی li که زیر مجموعه داره میبرین ، منو باز میشه. این خیلی جالب نیس. بنابراین میتونین از فایل hoverIntent.js استفاده کنین که این مشکل رو رفع میکنه. حالا اگر ماوستون رو به سرعت از روی li عبور بدین ، باز نمیشه و زمانی که یه مدت کوتاه روی اون بمونین باز میشه. برای اضافه کردنش بصورت زیر عمل کنید :

برای مطالعه بیشتر میتونین به این لینک و این لینک مراجعه کنید.

امیدوارم خوشتون اومده باشه.

موفق باشید. یا علی

comment دیدگاه کاربران
banooyemah

با درود و سپاس

لطفا من را راهنمایی بفرمایید که چطور اکتیو بودن یک منو را انجام دهم بطور مثال روی درباره ما که کلیک میشه و وارد آن صفحه شد منوی درباره ما با سایر منوها تفاوت کند. من از گزینه a:active استفاده کردم ولی استایل آن را به کل منوها میدهد. لطفا راهنمایی کنید.

بعنوان مثال برای سایت زیر که دارای منوهای داینامیک و تلریک میباشد.

http://givco.mahanweb.ir

محمد اسفندیاری

برای اینکار نمیشه با CSS تنها عمل کرد باید از Javascript و یا PHP هم کمک بگیرید
باید یک نشونه ای در هر صفحه ی جدا قرار بدین و با استفاده از Javascript چک بشه که ، اگه به اون نشونه رسیدیم ، یک سری استایل به منو اعمال بشه
موفق باشید

banooyemah

سلام ممنون از راهنماییتون
انجامش دادم
فقط یه نکته دیگه: میخوام وقتی که زیر منوی مثلا منوی محصول رو انتخاب میکنم منوی محصول اکتیو باشه
اینو چطور انجام بدم 😳
ممنون میشم راهنماییم کنید

محمد اسفندیاری

دوست عزیز برای اینم دقیقا باید همونکار رو انجام بدین
ولی در مقیاس کوچکتر

banooyemah

میشه بیشتر کمکم کنید
با استایل یا جی کوئری؟
میشه کدشو بهم بگید.
برای لینک زیر میخوام
http://givco.mahanweb.ir/

محمد اسفندیاری

بنظر من از jquery استفاده کنید.
اول بیاد به زیر منوهای منوی مورد نظرتون یک کلاس نسبت بدین
حالا بیاد با استفاده از jquery ، مثلا بگید که زمانی که روی این زیر منوها با این کلاس ها hover شد ، پدرشون ( همون منو ) به رنگ متفاوتی در بیاد
امیدوارم فهمیده باشین

banooyemah

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

banooyemah

میخوای فایلامو بفرستم

محمد اسفندیاری

فایل استایل رو بفرستین و کدهاتون رو بفرستین
بفرستین به ایمیلم
m.esfandiary72@gmail.com
فایل استایل رو بدین که میخواید چطوری بشه
موفق باشید

banooyemah

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

محمد اسفندیاری

خواهش میکنم
موفق باشی

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

محمد اسفندیاری

سلام دوست عزیز
ببینید اگر منو ارتفاعش زیاد بشه ، صفحه اسکرول میخوره و میتونین به همه زیر منو ها دسترسی داشته باشین…..به نظر من میتونین تعداد زیر منو ها رو کمتر کنید ، این بهترین راهه
یا زیر منو ها رو در منو های بیشتری بخش کنید تا ارتفاعشون کمتر بشه
فک نکنم بشه به سمت مخالف باز کرد

نیاز به لاگین

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