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 »

19 komentar

Click here for komentar
Unknown
admin
7 Februari 2016 pukul 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
gowsalya
admin
7 September 2018 pukul 12.51 ×

Your good knowledge and kindness in playing with all the pieces were very useful. I don’t know what I would have done if I had not encountered such a step like this.
Devops Training in pune

Devops Training in Chennai

Devops Training in Bangalore

AWS Training in chennai

AWS Training in bangalore

Reply
avatar
Mounika
admin
13 September 2018 pukul 13.02 ×

Thanks for such a great article here. I was searching for something like this for quite a long time and at last I’ve found it on your blog. It was definitely interesting for me to read  about their market situation nowadays.
python training in Bangalore
python training in pune
python online training
python training in chennai

Reply
avatar
pooja
admin
21 September 2018 pukul 13.23 ×

Thanks Admin for sharing such a useful post, I hope it’s useful to many individuals for developing their skill to get good career.
Blueprism training in velachery

Blueprism training in marathahalli

Blueprism training in btm

Reply
avatar
prabha
admin
12 Oktober 2018 pukul 18.49 ×

Thank you for benefiting from time to focus on this kind of, I feel firmly about it and also really like comprehending far more with this particular subject matter. In case doable, when you get know-how, is it possible to thoughts modernizing your site together with far more details? It’s extremely useful to me.
angularjs Training in btm

angularjs Training in electronic-city

angularjs online Training

angularjs Training in marathahalli

angularjs interview questions and answers

Reply
avatar
rose
admin
7 Maret 2019 pukul 16.45 ×

Awesome article. It is so detailed and well formatted that i enjoyed reading it as well as get some new information too.

Microsoft Azure online training
Selenium online training
Java online training
Java Script online training
Share Point online training


Reply
avatar
Sivakumari.B
admin
27 Agustus 2019 pukul 20.24 ×

Your info is really amazing with impressive content..Excellent blog with informative concept. Really I feel happy to see this useful blog, Thanks for sharing such a nice blog..
If you are looking for any Data science Related information please visit our website best course for data science page!

Reply
avatar
Jayalakshmi
admin
20 Juni 2020 pukul 12.42 ×




The strategy you have posted on this technology helped me to get into the next level and had lot of information in it. The angular js programming language is very popular which are most widely used.



Dot Net Training in Chennai | Dot Net Training in anna nagar | Dot Net Training in omr | Dot Net Training in porur | Dot Net Training in tambaram | Dot Net Training in velachery







Reply
avatar
jeni
admin
21 Agustus 2020 pukul 21.06 ×

Wow, amazing weblog format! How lengthy have you been running a blog for? you make running a blog look easy. The total glance of your website is wonderful, let alone the content!

angular js training in chennai

angular js training in velachery

full stack training in chennai

full stack training in velachery

php training in chennai

php training in velachery

photoshop training in chennai

photoshop training in velachery

Reply
avatar
Unknown
admin
21 Juli 2021 pukul 09.43 ×

Brilliant post! We are connecting to this extraordinary post on our site. Keep up the extraordinary composition.
tech news

Reply
avatar
Thanks for your comment