Menu Responsive Drop down Part II (Lanjutan)


Setelah kita belajar membuat menu Drop down yang sudah kita pelajari di Part 1 .
Kita akan lanjutkan bagaimana sih cara menu agar bisa Responsive tentunya. Jika anda yang lansung pada tahap ini tapi belum mempelajari di Par1 anda bisa membacanya dulu atau click link ini Responsive Drop down Menu.

Pertama-tama jika anda belum tau apa sih Responsive, Responsive secara simple adalah bagaimana design layout website kita bisa tetap terlihat rapih walau pada screen kecil atau pada layar mobile.

Dini saya akan melanjutkan dari tahap sebelumnya dari pembuatan Menu Responsive Drop down, jika anda sudah membaca tahap sebelumnya, Tahap yang sekarang adalah pembuatan  Responsivenya

Langsung saja disini saya mebuat Responsive Menu dengan bantuan Jquery. Jika website anda belum memiliki Jquery anda bisa download di sini http://jquery.com/download/

atau bisa juga anda masukan code ini di atas </head> atau </body>

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

Setelah anda memiliki Jquery maka anda siap untuk membuatnya.
Pada tahap sebelumya kita sudah memiliki :
  1. CSS Untuk Membuat Menu  dan 
  2. CSS Untuk Membuat  Dropdown
Jadi yang dibuthkan sekarang CSS Responsive yang akan kita tambah kan dibawah CSS sebelumya,
jika anda belum memilikinya click link ini Responsive Drop down Menu.

CSS Responsive Menu Dropdown


@media screen and (min-width: 768px){
#responsive{
    display :none !important;
}
#menu-wrap > ul{
    display: block !important;
}
}
@media screen and (max-width: 768px) {
#menu-wrap li {
    float: none;
    position: relative;
    margin: 0 !important;
}
#menu-wrap li a{
    margin: 0 0 1px !important;
}
#menu-wrap {
    float: none;
    position: relative;
}
#menu-wrap > ul {
    display: none;
    padding: 0 10px !important;
}
#menu-wrap ul {
    background:#555555;
    box-shadow: none !important;
    left: 0 !important;
    list-style: none outside none;
    margin: 0 !important;
    opacity: 1 !important;
    padding: 0 0 0 20px;
    position: relative !important;
    top: 0 !important;
    visibility: visible !important;
    width: auto !important;
}
#responsive {
    background: #555555;
    color: #FFFFFF;
    margin: 0 0 2px;
    padding: 10px;
    display :block;
    transition:0.5s;
    cursor: pointer;
}
#responsive:hover {
    background-color:#0186ba;
    background-image:linear-gradient(#04acec, #0186ba);
}
}

Catatan "@media screen and (min-width: 768px)" dan "@media screen and (max-width: 768px)", pada angka 768 adalah ukuran lebar screen jadi menu akan berubah jika layar screen berukuran kurang atau sama dengan 768 pixel,

Selanjutnya ntuk Code Scriptnya

<script>jQuery( document ).ready(function($) {
$('#menu-wrap').prepend('<div id="responsive">Menu</div>');
$('#responsive').click(function() {
            $( '#menu-wrap > ul' ).toggle( 'slow' );
            });
});</script>

Demo nya Sepert ini