Tutorial Cara Membuat Menu Website Responsive

Summer IT - Haii kali ini saya akan membagikan cara membuat menu website responsive, anda tau kan apa itu responsive web design ? oke coba anda baca kutipan dibawah ini.

Mengutip dari situs smashingmagazine.com, Responsive Web Design adalah sebuah pendekatan yang menunjukkan bahwa desain dan pengembangan harus menanggapi perilaku dan lingkungan pengguna  berdasarkan pada ukuran, platform dan orientasi layar. Praktik ini meliputi penggunan perpaduan grid fleksibel dan layout, gambar dan CSS media query. Sebagaimana pengguna saat ini yang beralih dari laptop ke tablet, website secara otomatis harus menyesuaikan resolusi, ukuran gambar dan kemampuan scriptingnya. Dengan kata lain, website harus memiliki teknologi untuk secara otomatis merespon preferensi pengguna yang didasarkan pada resolusi layar gadget yang digunakan (komputer pc, laptop, netbook,tablet, smart phone dan mobile phone).

anda sudah mengerti, dari kutipan di atas ?
kalau sudah langsung saja ke tutotial pembuatan menu website responsive.

Jika anda buka dengan PC/Laptop akan tampak seperti ini.

Tampilan versi Desktop

Dan jika anda buka dengan perangkat mobile, akan tampak seperti ini.

Tampilan versi Mobile

1. Membuat Menu

Buka aplikasi editor yang anda biasa gunakan.

Lalu ketikan code seperti dibawah ini.

<link href="style.css" type="text/css" rel="stylesheet"/>
<nav class="clearfix">
    <ul class="clearfix">
        <li><a href="#">Home</a></li>
        <li><a href="#">Website</a></li>
        <li><a href="#">Forum</a></li>
        <li><a href="#">About</a></li>
    </ul>
</nav>  

Lalu beri nama index.html

2. Membuat Style Untuk Menu

Buat file CSS dengan nama style.css, kemudian ketikan code seperti dibawah ini.

body {
    background-color: #ece8e5;
}
nav {
    height: 50px;
    width: 100%;
    background: #455868;
    font-size: 11pt;
    font-family: 'PT Sans', Arial, sans-serif;
    font-weight: bold;
    position: relative;
    border-bottom: 2px solid #283744;
}
nav ul {
    padding: 0;
    margin: 0 auto;
    width: 600px;
    height: 50px;
}
nav li {
    display: inline;
    float: left;
}
.clearfix:before,
.clearfix:after {
    content: " ";
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}
nav a {
    color: #fff;
    display: inline-block;
    width: 100px;
    text-align: center;
    text-decoration: none;
    line-height: 40px;
    text-shadow:  0px #283744;
}
nav li a {
    border-right: 1px solid #576979;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
nav li:last-child a {
    border-right: 0;
}
nav a:hover, nav a:active {
    background-color: #8c99a4;
}

3. Membuat menu responsive dengan css

pertama – tama, tambahkan dulu meta vieport di dalam file index.html

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

kemudian untuk membuat menunya responsive pada layar gadget yang berukuran lebih kecil dari 600px maka ketikkan code berikut dalam file style.css :

@media screen and (max-width: 500px) {
    nav {
        height: auto;
    }
    nav ul {
        width: auto;
        display: block;
        height: auto;
    }
    nav li {
        width: 100%;
        float: left;
        position: relative;
    }
    nav li a {
        border-bottom: 1px solid #576979;
        border-right: 1px solid #576979;
    }
    nav a {
        text-align: left;
        width: 100%;
        text-indent: 25px;
    }
}  

pada syntak di atas, kita bisa lihat bahwa CSS memeriksa kondisi layar browser, kemudian jika layar browser itu lebih kecil dari 500px, maka lebar menu akan di bagi menjadi dua, 50% – 50%.

sekarang untuk membuat menu responsive pada ukuran layar di bawah 480px atau dengan kata lain ketika web di buka dengan SmartPhone ukuran sekitar 4,5Inch, tambahkan syntak berikut pada style.css

nav a#pull {
display: none;
}
@media only screen and (max-width : 480px) {
    nav {
        border-bottom: 0;
border-bottom: 2px solid #283744;
    }
    nav ul {
        display: none;
        height: auto;
    }
    nav a#pull {
color: #fff;
        display: inline-block;  
        width: 100px;
padding-top:5px;
padding-right:40px;
        position: right;
    }
    nav a#pull:after {
        content:"";  
        width: 10px;
        height: 10px;  
        position: right;
        top: 50px;
    }
}  

kemudian tambahkan code berikut dalam tag <nav> di file index.php

<a href="#" id="pull">Menu</a>

sekarang buka lagi index.php dan tambahkan code berikut

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
 $(function() {
 var pull = $('#pull');
 menu = $('nav ul');
 menuHeight = menu.height();

 $(pull).on('click', function(e) {
 e.preventDefault();
 menu.slideToggle();
 });

 $(window).resize(function() {
 var w = $(window).width();
 if (w > 320 && menu.is(':hidden')) {
 menu.removeAttr('style');
 }
 });
 });
</script>

oke, sekian tutorial dari saya hari ini, jika ada hal yang mau di tanyakan silahkan di comment saja ya.

Demo
Click here



Download
Click here

Klik disini untuk Tutorial - Tutorial yang lebih banyak lagi

Referensi : CariCode.com

• Tweet
• Share
• Share
• Share
• Share

About Admin

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.

Related Post