ایجاد منو ریسپانسیو در طراحی سایت

ایجاد منو ریسپانسیو برای طراحی سایت را در این مطلب مشاهده کنید و برای طراحی سایت خود استفاده کنید

  • نوشته شده توسط : رضا رجب پور
  • دسته بندی :آموزش html
  • بازدید: 7343
ایجاد منو ریسپانسیو در طراحی سایت
Rate this blog

ایجاد منو ریسپانسیو برای طراحی سایت

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

  ساخت منو با html

ساخت منو با 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()">&#9776;</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>

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

پیشنهاد می کنیم اگر می خواهید کار طراحی سایت را ادامه بدید از منو های متفاوت و جذابی استفاده کنید همین کاری که ما در ساین وب داریم انجام می دهیم اگر سری به نمونه کارهای طراحی سایت بزنید این موضوع را درک می کنید

مقالات مرتبط

پیشنهاد می کنیم این مطالب هم مطالعه کنید

چگونه سایت و سئو رقبای خودمان را تجزیه و تحلیل کنید

چگونه سایت و سئو رقبای خودمان را تجزیه و تحلیل کنیم

چگونه سایت و سئو رقبای خودمان را تجزیه و تحلیل کنید را حتما مطالعه کنید اگر دوس دارید از رقبای…

Pbn چه تاثیری می تواند در سئو سایت شما داشته باشد

Pbn چه تاثیری می تواند در سئو سایت شما داشته باشد ؟

آیا از تاثیر pbn برای سئو خبر دارید آیا می دانید اگر pbn درست اجرا نشود باعث کاهش رتبه شما…

چند نکته خیلی مهم که باید در انتخاب تیتر سایت خود داشته باشید

چند نکته خیلی مهم که باید در انتخاب تیتر صفحه بدانید

اگر می خواهید یک عنوان مناسب و خوب برای صفحات سایت خود پیدا کنید جوری که نرخ کلیک بالا برود…

پرسش و پاسخ 0

بحث درباره این مقاله را شما آغاز کنید!

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

مشاوره رایگان تلفنی