امروزه اگر بدانید بیشتر کاربران طراحی سایت را در موبایل ها و تبلت ها مشاهده می کنند چون کسی مثلا می خواهد سایتی خبری را مشاهده کند حوصله ندارد برود پای کامپیوتر روشن کند نت بالا بیاد سایتی خبری را مشاهده می کند این دیگر قدیمی شده است ولی به نظر ما در ساین وب هر سایتی موبایلی نباشد بهتر هست مثلا سایت های فروشگاهی وقتی موبایلی می شوند کاربر اذیت می شود مثل کاری که طراحی سایت دی جی کالا که یک فروشگاه خوب و خیلی حرفه ای هست انجام داده دی جی کالا نسخه موبایلی ندارد ولی آپ موبایل دارد کاری که واقعا درست هست سایت های شرکتی و سایت هایی که احتیاج هست یا کاربر در آن بیشتر تمرکز کند مثلا کسی که دنبال طراحی سایت تهران می گردد اول سایت رو در داخل کامپیوتر خود مشاهده می کند تا بتواند نمونه کارهای شما را آنالیز کند تا بتواند انتخاب درستی داشته باشد از مسئله اصلی دور نشویم امروز می خواهیم ساخت یک منو موبایلی را به شما آموزش دهیم تا بتوانید در سایت های خود استفاده کنید
ساخت منو با html
اولین مرحله برای اینکه بتوانید منو موبایلی خود را بسازید کدهای HTML هست که به این صورت باید استفاده کنید
<pre> <div class="topnav" id="myTopnav"> <a href="#home" class="active">صفحه اصلی</a> <a href="#news">درباره ما </a> <a href="#contact">تماس با ما</a> <a href="#about">اخبار</a> <a href="javascript:void(0);" class="icon" onclick="myFunction()">☰</a> </div> </pre>
خوب بعد از اینکه فایل های HTML را جایگزین کردید نوبت این هست تا فایل های CSS را داخل کدهای خود بگذارید
<pre> .topnav { background-color: #333; overflow: hidden; }
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
</pre>
خوب تا اینجا منو ما به صورت در آمده است یک منو ساده که کاربران می توانند از آن فقط در کامپیوتر استفاده کنند خوب حالا شما اولین مرحله را به درستی انجام دادید
ساخت منو برای موبایل با html,css
در خط اول گفته می شود که وقتی صفحه بیشتر از ۶۰۰PX بود نمایان شود وقتی صفحه بزرگتر از ۶۰۰ می شود منو موبایلی پنهان شود
<pre> @media screen and (max-width: 600px) { .topnav a:not(:first-child) {display: none;} .topnav a.icon { float: right; display: block; } } </pre>
در خط دوم با کدهای CSS این را به مرورگر می گوییم که وقتی ۶۰۰ شد به جایی اینکه منو رو به صورت عمودی نشان دهد آن را به صورت افقی نمایش دهد تا اینجای کار خیلی راحت بود
<pre> @media screen and (max-width: 600px) { .topnav.responsive {position: relative;} .topnav.responsive a.icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; text-align: left; } } </pre>
حالا نوبت این هست کدهای JAVA را وارد کنیم تا بتوانیم وقتی کاربر روی دکمه ی که انتخاب کرده ایم کلیک کند منو به صورت افقی نمایش دهد
<pre> function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } } </pre>
امیدواریم از این آموزش هم نهایت استفاده رو برده باشید و در سایت های خود از این منو استفاده کنید البته این کدها حالت نرمال منو موبایلی هست با کمی جستجو در وب می توانید خیلی بهتر از این منو را مشاهده و در کارهای خود استفاده کنید اگر فرصت شد منو های پیشرفته تر و جذابی رو برای شما آماده کنیم
پیشنهاد می کنیم اگر می خواهید کار طراحی سایت را ادامه بدید از منو های متفاوت و جذابی استفاده کنید همین کاری که ما در ساین وب داریم انجام می دهیم اگر سری به نمونه کارهای طراحی سایت بزنید این موضوع را درک می کنید
پرسش و پاسخ 0
بحث درباره این مقاله را شما آغاز کنید!
ارسال دیدگاه