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

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

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

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

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

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

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

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

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

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

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

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

11 دیدگاه
  1. لیلا لیلا شنبه 22 اردیبهشت 1397 13:11

    ساخت منو با css خیلی بهتر هست چون به راحتی میتونیمstyle های مورد نظرمون رو برای منو قرار بدیم.

  2. احمدپور احمدپور شنبه 15 اردیبهشت 1397 13:47

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

  3. هفتانی هفتانی شنبه 15 اردیبهشت 1397 13:46

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

  4. علیزاده علیزاده دوشنبه 10 اردیبهشت 1397 12:16

    آموزش ساخت منو با استفاده از CSS،روش خوبی برای تکراری شدن از این قسمت ارائه دادین..

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

نماد الکترونیک
مشاوره رایگان:
 025-32937209