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.


Referensi : CariCode.com
Previous
Next Post »

4 komentar

Click here for komentar
robin singh
admin
14 Januari 2016 14.01 ×

Thanks for your informative post!!! After completing my graduation, i am confused whether to choose web design as my career. Your article helped me to make a right choice. PHP Training in Chennai

Reply
avatar
18 Januari 2016 14.31 ×

Hi Admin,
Your website is totally awesome and loaded with various informative posts on web design and development. Keep on updating your blog. Web Design Training | Web designing course in Chennai

Reply
avatar
7 Februari 2016 17.36 ×

Mas kenapa ya yang saya itu kalo di liat versi mobile nya ga ada garis-garis buat buka menu nya gtu ? kaya ga ada toggle navigation padahal di script udah ditulis.. mohon penjelasannya

Reply
avatar
Sharon Sandy
admin
14 Juni 2017 13.46 ×

It is amazing and wonderful to visit your site.Thanks for sharing this information,this is useful to me...
Android Training in Chennai
Ios Training in Chennai

Reply
avatar
Thanks for your comment