نمایش نتایج: از 1 به 1 از 1

موضوع: معرفی چهار منوی ریسپانسیو زیبا

884
  1. بالا | پست 1

    عنوان کاربر
    کاربر انجمن
    تاریخ عضویت
    Jan 2016
    شماره عضویت
    25969
    نوشته ها
    2
    تشکـر
    0
    تشکر شده 3 بار در 2 پست
    میزان امتیاز
    0

    معرفی چهار منوی ریسپانسیو زیبا



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


    منوها


    همه قالب ها شامل فایل HTML و CSS می باشند. برای ادغام آن ها با پروژه ی خود فقط کد HTML را آنجا که می خواهید کپی کنید. سپس شما باید فایل CSS را لینک دهید یا آن را در فایل استایل دهی خود کپی کنید.


    برای قابلیت ریسپانسیو ما از پلاگین jQuery با حجم کم SlickNav استفاده کردیم که در صفحات کوچک به صورت کشویی در می آید.


    SlickNav یک فایل css و یک فایل js دارد که در کد HTML لینک داده شده است، میتوانیم این فایل ها را در پوشه assets/slick nav بیابیم. اگر بخواهیم تنها از قابلیت منوی ریسپانسیو بهره ببریم باید به شیوه ی زیر عمل کنیم.


    کد html بصورت زیر باید باشد.


    کد:
    
    
    <html> <head> <link rel="stylesheet" href="/assets/slicknav/slicknav.min.css"> </head> <body> <nav class="menu-navigation-basic"> <a href="#" class="selected">خانه</a> <a href="#">محصولات</a> <a href="#">خدمات</a> <a href="#">تماس با ما</a> <a href="#">درباره ما</a> </nav> <div> Your Content </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="/assets/slicknav/jquery.slicknav.min.js"></script> <script> $(function(){ var menu = $('.menu-navigation-basic'); menu.slicknav({ label: "منو", }); }); </script> </body> </html>



    SlickNav آپشن های دیگری نیز دارد که با مراجعه به سایت آن می توانید از آن ها استفاده کنید.


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


    استفاده از فونت آیکن در طراحی سایت


    [replacer_a]

    برای دیدن دمو کلیک کنید

  2. 2 کاربران زیر از nooshin88 بابت این پست مفید تشکر کرده اند


اطلاعات موضوع

کاربرانی که در حال مشاهده این موضوع هستند

در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)

موضوعات مشابه

  1. طراحی وب سایت ریسپانسیو و اهمیت آن
    توسط nooshin88 در انجمن اینترنت و کامپیوتر
    پاسخ: 4
    آخرين نوشته: 11-06-2016, 05:25 PM
  2. چه جوی چروک زیر چشم رو ازبین ببرم؟
    توسط مرسده در انجمن مشاوره پزشکی
    پاسخ: 2
    آخرين نوشته: 02-10-2015, 11:38 AM
  3. پاسخ: 0
    آخرين نوشته: 10-21-2014, 05:36 PM
  4. مراقب تأثیر حال و احوالتان بر روی زیباییتان باشید!
    توسط R e z a در انجمن روانشناسی شغلی
    پاسخ: 0
    آخرين نوشته: 12-14-2013, 01:17 AM
  5. پاسخ: 6
    آخرين نوشته: 10-12-2013, 06:44 PM

لیست کاربران دعوت شده به این موضوع

کلمات کلیدی این موضوع

© تمامی حقوق برای مشاورکو محفوظ بوده و هرگونه کپی برداري از محتوای انجمن پيگرد قانونی دارد