fsfsdfs

چگونه می توان برای وبسایت / وبلاگ ، منویی ساخت که روی تمام دستگاه ها قابل نمایش باشد ؟

          PERSIAN STACK 
            بازدید : 149
          1396/05/18
           نظرات (0)
        

می خواهم برای وبسایت / وبلاگ خود منویی بسازم که روی تمامی دستگاه ها مثل انواع موبایل ها و تبلت ها و کامپیوتر ها به خوبی نمایش داده شود . چگونه می توان این کار را انجام داد ؟

پاسخ :

به چنین منویی Responsive Navigation Bar گفته می شود . شما می توانید تنها با استفاده از کد های CSS ، HTML و Java Script این کار را انجام دهید .

مر حله ی اول ) ابتدا کد های CSS را جهت استایل دهی به منو ، بین تگ های <style> و <style/> موجود در بخش head وارد کنید .

/* Add a black background color to the top navigation */
.topnav {
    background-color: #333;
    overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
}

مرحله ی دوم ) تا اینجا تنها روی ظاهر منو کار کرده اید . حالا باید از media@ به منظور مطابقت منو با دستگاه های مختلف و نمایش مناسب ، استفاده کنید . پس کد های زیر را به کد CSS قبلی اضافه کنید :

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
    float: right;
    display: block;
}
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@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;
}
}

مرحله ی سوم ) کد های HTML را به بخش body صفحه وارد کنید :

<div class="topnav" id="myTopnav">
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">☰</a>
</div>

مرحله ی چهارم ) در آخر کد های Java Script را به بخش body صفحه وارد کنید :

/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}