آموزش ساخت منو واکنشگرا (Responsive) برای هر سایتی لازم است
آموزش ساخت منو واکنشگرا (Responsive) توسط سلام برنامه تهیه گردیده و کاملا فارسی و تصویری می باشد.
واکنشگرا (Responsive) چیست؟
به تطابق صفحه وب و المان های آن با رزولیشن های مختلف (گوشی ، تبلت ، انواع مانیتور) واکنشگرایی یا رسپانسیو می گویند.
همانطور که میدانید از دید گوگل اینکه سایت شما رسپانسیو باشد تاثیر بسیاری در جایگاه شما دارد
اگر نمیدانید سایت شما رسپانسیو است یا نه کافیست آن را در بخش موبایل فرندلی گوگل چک کنید تا متوجه شوید.این ابزار به شما میگوید که سایت شما به چه میزان برای دستگاه موبایل و دستگاه های کوچکتر از مانیتور کامپیوتر مناسب است . حتی در صورت مشکل و عدم مطابقت علت آن را به شما میگوید و میتوانید با برطرف کردن این مورد از رسپانسیو بودن سایت خود مطمئن شوید.
امروزه بیشتر جستجو های گوگل و وب با گوشی های هوشمند و تبلت ها انجام میشود
اگر سایت شما برای این دستگاه ها بهینه نباشد یا اصطلاحا رسپانسیو نباشد کاربران زیادی را از دست می دهید
همانطور که میدانید منو های سایت یکی از مهم ترین بخش های سایت به شمار می روند که در این آموزش رسپانسیو کردن آن را یاد میگیرید
برای ساخت منو واکنشگرا ابتدا باید کد های زیر را به قسمت body اضافه کنید:
<div class="topnav" id="myTopnav"> <a class="first" href="#home">خانه</a> <a href="#news">اخبار</a> <a href="#content">محتوا</a> <a href="#about">درباره ما</a> <a href="javascript:void(0);" style="font-size:15px;" class="icon" onClick="myFunction()">☰</a> </div>
سپس برای ظاهر سازی و استایل دهی کد های زیر را به CSS خود اضافه کنید:
body{margin:0;direction:rtl;} .topnav{ overflow:hidden; background-color:#333; } .topnav a{ float:right; display:block; color:#f2f2f2; text-align:center; padding:14px 16px; text-decoration:none; font-size:17px; } .topnav a:hover{ background-color:#ddd; color:black; } .topnav .icon{ display:none; } @media screen and (max-width:600px){ .topnav a{display:none;} .topnav a.icon{ float:right; display:block; } .first{margin-top:40px;} } @media screen and (max-width:600px){ .topnav.responsive {position:relative;} .topnav.responsive .icon{ position:absolute; right:0; top:0; } .topnav.responsive a{ float:none; display:block; text-align:right; } }
دستور media@ برای هماهنگ سازی منو با رزولیشن های مختلف است
و در انتها کد های جاوااسکریپت زیر را به انتهای کد های html خود منو اضافه کنید:
<script> function myFunction(){ var x = document.getElementById("myTopnav"); if(x.className == "topnav"){ x.className += " responsive"; }else{ x.className= "topnav"; } } </script>
کار طراحی منو واکنشگرا تمام است.
در صورت علاقه میتوانید به صورت آنلاین ویدیو آموزش را ببینید:
همچنین شما می توانید برای مشاهده جزئیات بیشتر آموزش تصویری منو رسپانسیو را از باکس دانلود موجود در زیر همین پست دانلود نمایید.