آموزش ساخت منو با استفاده از css

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

آموزش ساخت منو با استفاده از css
نویسنده:
تاریخ:
دسته بندی: ترفندها
آموزش ساخت منو با استفاده از css 4از 5براساس 219 رای

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

امروزه در صنعت فناوری اطلاعات به ویژه طراحی وبسایت، استفاده از المنت ها و عناصر خاص باعث جذب کاربران در وبسایت خواهد شد. ما در اینجا با استفاده از کدهای ساده جی کوئری و سی اس اس، یک افکت منو برای شما برنامه نوسی کرده ایم که استفاده از آن بسیار ساده است.

برای استفاده از این افکت در منوی سایت خود،
ابتدا در قسمت head سایت خود، فایل jquery.js را ضمیمه کنید. بعد از آن نیز فایل modernizer.js را ضمیمه کنین.

سپس کدهای اسکریپت را بعد از jquery.js بنویسید.

توجه داشته باشید در کدهای اسکریپت، مانند زبانهای برنامه نویسی دیگر، ترتیب فراخوانی و ترتیب کدنویسی ها اهمیت بالایی دارد. مثلا برا کدهای اسکریپت، همیشه باید کتابخانه ها به ترتیب فراخوانی شوند.

ما در ابتدا فایل jquery.js را ضمیمه کردیم که کتابخانه اصلی ماست.

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

مثلا بجای سلکتور $('ul') از $('ul.main_menu') استفاده نمایید

نکته ای که در این کد وجود دارد، وجود یک تگ div با شناسه #marker است. این همان حاشیه ی لغزنده در پایین گزینه های منو است. که با حرکت موس نیز ابجا می شود.

7 دیدگاه
  1. متقیان متقیان دوشنبه 7 اسفند 1396 15:15

    به نظر سخت میاد

  2. مینا مینا دوشنبه 7 اسفند 1396 15:14

    خوب بود ساخت منو با css هم یاد گرفتیم

  3. Mahdavi Mahdavi سه شنبه 24 بهمن 1396 13:03

    خیلی ممنون از آموزش و توضیحات کاملی که دادین

  4. سارا سارا پنجشنبه 12 بهمن 1396 15:10

    بسیار عالی بود مخصوصا نظم کد ها

  5. hamed hamed یکشنبه 8 بهمن 1396 16:40

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

  6. زهرا باقری زهرا باقری سه شنبه 26 دی 1396 14:40

    اسم آیکنهایی که استفاده شدن چیه؟ فونت آویسام نیستن

  7. احمدی احمدی چهارشنبه 20 دی 1396 14:40

    سلام بسیار عالی بود فقط من نمیدونم (if (Modernizr.csstransitions چکار میکنه

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز با * علامت گذاری شده اند.

مطالب بیشتر

وبلاگ شرکت را دنبال کنید، مطالب تولید شده کاملا اختصاصی بوده و در جهت پیشبرد اهداف مشتریان بصورت رایگان انتشار میابد.
حتما نظر خود را با دادن رأی ثبت کنید.

بازگشت به وبلاگ
نماد الکترونیک