در این أموزش jQuery فصد داریم به شما نحوه ساخت منو ریسپانسیو با jQuery و CSS بدون استفاده از مدیا کویری ها (@media query ) را نشان بدیم.
طراحی واکنشگرا (Responsive) برای صفحات وب به منظور قابل انعطاف کردن صفحه برای صفحات نمایش با اندازه های مختلف استفاده می شود.
در این مثال, ما یک منو در هدر داریم. قصد داریم این منو را با دو سایز صفحه نمایش مختلف واکنشگرا کنیم. لیست منو بصورت افقی مرتب شده است. اگر عرض صفحه نمایش کمتر از ۶۰۰ پیکسل باشد پس منو بصورت ریسپانسیو و عمودی باز می شود (slide Down).
کد HTML منو
این کد به شما منوی هدر را نمایش می دهد. که شمال یک لیست از آیتم های منو و آیکون بازکردن/بستن است. این آیکون فقط در صفحات نمایش کوچکتر از ۶۰۰px نمایش داده می شود.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div id="responsive-menu"> <div id="menu-expand-collapse"><img src="menu.png" width="25px"></div> <div id="responsive-menu-list"> <div class="menu-item"> <a href="#" >Home</a> </div> <div class="menu-item"> <a href="#" >Getting Started</a> </div> <div class="menu-item"> <a href="#">Download</a> </div> <div class="menu-item"> <a href="#">Demos</a> </div> </div> </div> |
و استایل های منو ریسپانسیو بصورت زیر است :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<style> #responsive-menu { background:#DEB25E;padding:10px 5px; } #responsive-menu-list { display:block; } .menu-item { display:inline-block; padding: 0px 15px; border-right: #E8C47D 1px solid; } .menu-item a { color:#FFF;text-decoration:none; } #menu-expand-collapse{ display:none;cursor:pointer; } @media screen and (max-width: 600px) { #responsive-menu-list { display:none; width: 100%; } .menu-item {padding: 10px 5px;border-bottom: #E8C47D 1px solid;border-right: #ccc 1px none;display: block;} #menu-expand-collapse{display:block;text-align:right;} } </style> |
ساخت منو ریسپانسیو با jQuery و CSS
اگر صفحه نمایش <600px باشد, پس منوی افقی مخفی خواهد شد و آیکون بازکردن/بستن منو در سمت رایت هدر نمایش داده می شود. با کلیک روی این آیکون, منو بصورت اسلایدی و بااستفاده از jQuery باز می شود.
|
1 2 3 4 5 6 7 |
<script> $(document).ready(function(){ $("#menu-expand-collapse").click(function() { $("#responsive-menu-list").toggle(); }); }); </script> |
امیدوارم از آموزش ساخت منو ریسپانسیو با jQuery و CSS نهایت استفاده را برده باشید .
برای دانلود سورس کد کامل این آموزش از باکس دانلود استفاده کنید.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق و پیروز باشید
سلام
وقت بخیر
من یه پوسته روی سایتم نصب کردم. وقتی برگه می سازم خوده برگه ها اسمشون خودبه خود توی هدر نمایش داده می شه. چطور می تونم فهرست بسازم که فهرست روی هدر نشون اجرا بشه
ممنون
سلام. از چه سیستمی استفاده می کنید ؟ اگر از وردپرس استفاده می کنید احتمالا این مورد در خود قالب تعریف شده که میتونید تغییر بدید یا بخش نمایش > فهرست وردپرس را بررسی کنید از انجا میتونید تغییرات رو لحاظ کنید.
به هر حال مربوط به کدنویسی خود قالب است که تا بررسی و تست نشه نمی شه گفت دقیقا به چه صورت میشه حل کرد که میتونید با توسعه دهنده قالب یا وردپرس کار (اگر وردپرس دارید) در ارتباط باشید.
موفق باشید.
سلام
اگر یه پیش نمایش میزاشتین عالی میشد و دوم اینکه کجای قالب بزاریم اینا رو؟
سلام. لطفا فایل قالب خود را ویرایش و در بخش هدر به جای منوی خودتون این کدها را مطابق تنظیمات و کدنویسی قالب خود اضافه کنید
موفق باشید.