طراحی وب سایت
طراحی سایت فروشگاهی
سئو و بهینه سازی سایت
تبلیغات گوگل
توسعه وب
اپلیکیشن موبایل
میزبانی وب
ثبت دامنه
گواهی ssl
با توجه به استفاده روزافزون از طراحی سایت های ریسپانسیو برآن شدیم تا چهار منوی زیبا با قابلیت ریسپانسیو به شما معرفی کنیم تا آن‌ها را بصورت رایگان در پروژه‌های خود استفاده کنید.
این منوها بدون استفاده از هرگونه فریم ورک ساخته شده‌اند پس با خیال راحت آنرا در هرجایی می‌توانید استفاده کنید.
همه قالب‌‌ها شامل فایل HTML و CSS می‌باشند. برای ادغام آن‌ها با پروژه‌ی خود فقط کد HTML را آنجا که می‌خواهید کپی کنید. سپس شما باید فایل CSS را لینک دهید یا آن را در فایل استایل دهی خود کپی کنید.
برای قابلیت ریسپانسیو ما از پلاگین jQuery با حجم کم SlickNav استفاده کردیم که در صفحات کوچک به صورت کشویی در می‌آید.
SlickNav یک فایل css و یک فایل js دارد که در کد HTML لینک داده شده‌است، میتوانیم این فایل ها را در پوشه assets/slick nav بیابیم. اگر بخواهیم تنها از قابلیت منوی ریسپانسیو بهره ببریم باید به شیوه‌ی زیر عمل کنیم.
کد html بصورت زیر باید باشد
<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>
SlickNav آپشن های دیگری نیز دارد که با مراجعه به سایت آن می‌توانید از آن‌ها استفاده کنید.
در دوتا از منوها از آیکون استفاده شده است که این آیکون‌ها از مجموعه‌ی FontAwesome می‌باشند که آموزش آن را می‌توانید در مقاله زیر بخوانید.
استفاده از فونت آیکون در طراحی سایت
چنانچه پرسشی دارید در بخش نظرها با ما مطرح کنید.
دیدگاه ها
بهروز
تو منابع فارسی کد اختصاصی کمه، دمتون گرم که شما این کار رو انجام دادید
زهرا
سلام. ببخشید میشه کد منوی mscsoftware.com رو بگین. ممنون میشم. هرچی گشتم پیدا نکردم. منوهامم ار تی ال میکنم مثه اون نمیشه؟میشه خواهش کنم ب ایمیلم ارسال کنید. ممنون.
کیانوش آسترکی
با درود. این سایت از منوی بوت استرپ استفاده کرده که شخصی سازیش کردن. می‌تونید مستنداتش رو توی سایتشون ببینید. https://getbootstrap.com/docs/4.3/components/navbar/#nav
حبیبی
سلام ممنون بابت کدهای آماده. کاش سایت شما شبیه به سایت codepen بشه و کلی کد آماده برای استفاده راحت تر برای افرادی مبتدی مثل ما داشته باشه.
سعید
اونا برنامه نویسا خیلی حرفه ای دارن. این سایت هم به اندازه خودش عالی عمل کرده.
انصاری
خیلی خوبه که کدهای آماده تو سایتتون میزارید تا کسایی که خیلی بلد نیستن ازش استفاده کنن
جواد ولییان
با سلام
واقعا مفید و کاربردی بودند
تشکر فراوان به امید پیروزی
جواد ولییان
با تشکر خلی عالی بود.
زهرا یونسی
با تشکر از مطالب خوب سایت تون
mohammad
به نام خدا
درود بر شما
عالی بود
یاعلی
نوشتن دیدگاه