ساخت منو با جی‌کوئری‌

منو‌های‌ جذاب‌

امروز می‌خواهیم در مورد یکی دیگر از قابلیت‌های مهمی‌ که در طراحی‌های جدید باید مد نظر طراحان قرار گیرد صحبت کرده و ابزار بسیارکار آمدی را معرفی کنیم. یکی از خاصیت‌های طرح‌های جدید، وجود تمامی ‌امکانات مورد نیاز کاربران درپیش رویشان است.
کد خبر: ۲۰۲۷۷۱

به این معنی که وقتی شما وارد سایتی می‌شوید، اگر سایت، با رعایت کلیه موارد یک طراحی استاندارد بنا شده باشد، می‌توانید تمامی ‌عوامل مورد نیاز جهت پیدا کردن هرچه سریع‌تر خواسته خود از سایت مورد نظر را، در یک نگاه جلوی روی خود مشاهده کنید. به عنوان مثال طرح‌های جدید، باید به نحوی پیاده سازی شده باشند که کاربران فقط با 2 یا 3 کلیک به مقصود خود برسند، این کار شاید برای سایت‌ها‌‌و وبلاگ‌های کوچک بسادگی امکان‌پذیر باشد، اما پرتالی را درنظر بگیرید که اطلاعات زیادی را در خود جای داده است  یا وب سایت یک شرکت که باید در روز کاربران زیادی را به هدف‌هایی خاص راهنمایی کند، آن وقت تکلیف چیست؟

یکی از راه‌های متداول و دائمی‌ایجاد منو‌های  مدیریتی صفحات و یا همان navigation منو‌ها است. در برخی از سایت‌ها ‌‌این منو‌ها‌‌به صورت ساده‌ای استفاده می‌شوند، چند لینک را در خود جای می‌دهند که حاوی مسیر‌های مهمی‌ است که کاربران احتمالا بیشتر با آنها ‌‌سر و کار دارند.  اما وقتی تعداد این لینک‌ها ‌‌زیاد می‌شود، دردسر یک طراح وب شروع می‌شود که این دردسر پیدا کردن مکانی مناسب در صفحه است که بتواند حجم لینک‌ها‌‌ی مورد نظر را در خود جای دهد.

در اغلب اوقات این کار نشدنی است‌

راه حل قدیمی‌ این مساله استفاده از منو‌هایی است که با کمک جاوااسکریپت ایجاد می‌شدند، منو‌های "کرکره ای" و "باز شو" می‌توانستند کمک زیادی کنند و حجم زیادی از لینک‌ها‌‌را به نحوی که فضای زیادی به خود اختصاص ندهند، درخود جای دهند، ضمن اینکه افکت‌های مختلفی نیز می‌توان برای نمایش آن‌ها‌‌استفاده کرد و این کار جلوه بیشتری به طراحی کلی سایت می‌بخشید.

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

امروز و با کمک فریم‌ورک جی‌کوئری می‌توان تنها ‌‌با چند کلیک منو‌های بسیار جذاب و کارآمدی را با افکت‌های متنوع ایجاد کرد!

پلاگینsuperfish  جی‌کوئری یکی از کارآمد‌ترین و متداول‌ترین پلاگین‌های این فریم‌ورک جهت ایجاد منو‌های متنوع است.

نصب در سه مرحله‌

1- ابتدا منوی مورد نظر خود را ایجاد کنید، جهت استفاده از منو‌های استاندارد باید از عناصر  ul و li  استفاده کنید. نمونه‌های استاندارد را می‌توانید در آدرس اینترنتی نویسنده این پلاگین که در ادامه ارائه می‌شود مشاهده نمایید.
2- کد شناسایی پلاگین را بعد از معرفی جی‌کوئری به مرورگر در بخش  head  صفحه قرار دهید.

scripttype="text/javascript"src=>
<superfish.js"<>/script"

3- دستور زیر را نیز در پایین‌ترین بخش  head  صفحه قرار دهید.

<script+type="text/javascript">
ت(document).ready(function()$
('ul.sf-menu').superfish();$
;(ت
</script>

اگر دقت کنید این پلاگین فقط با استفاده از یک دستور عنصر اصلی لیست شما را  (ul)  به منوی کاملا حرفه ای تبدیل می‌کند.

این دستور با استفاده از تابع پوششی جی‌کوئری عنصر مورد نظر که در اینجا با نام  sf-menu  مشخص شده است را تحت تاثیر قرار می‌دهد و سپس تابعsuperfish  را به آن ربط می‌دهد.

این پلاگین بر روی کار دیگر پلاگین‌های جی‌کوئری تاثیری نمی‌گذارد و شما می‌توانید با ادغام کردن این پلاگین با دیگر پلاگین‌های جی‌کوئری نتیجه بهتری را بدست آورید.

آدرس صفحه خانگی این پلاگین
http://users.tpg.com.au/jbirch/plugins/superfish

 است، شما می‌توانید با مراجعه به آدرس فوق و یا تایپ عبارت  jquery superfish  در جستجوگر گوگل، به صفحه مورد نظر رسیده و علاوه بر دریافت پلاگین، اطلاعات مفیدتری را از طریق آدرس اینترنتی معرفی شده کسب کنید.
امیدواریم که با استفاده از این پلاگین منو‌های خود را جذاب‌تر از گذشته طراحی و پیاده‌سازی کنید.

پویا سلیمی‌

newsQrCode
ارسال نظرات در انتظار بررسی: ۰ انتشار یافته: ۰

نیازمندی ها