// معرفی چهار منوی ریسپانسیو زیبا و کارآمد - برق،رباتیک،کامپیوتر - الکترونیکا

الکترونیکا پروژه های الکترونیک و مکانیک

سایت در حال به روز رسانی به نسخه ی جدید میباشد در صورت بروز مشکل با شماره ی 09213203841 تماس بگیرید

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

اطلاعات بیشتر
7 سال 3 ماه قبل #412 توسط nooshin88

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

منوها

همه قالب ها شامل فایل 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 آپشن های دیگری نیز دارد که با مراجعه به سایت آن می توانید از آن ها استفاده کنید.

برای دیدن دمو کلیک کنید
دانلود فایل
منبع: طراحی وب ستروکیت

لطفاً ورود یا ايجاد حساب كاربری برای پیوستن به بحث.

مدیران انجمن: developzoom
قدرت گرفته از كيوننا