CSS3 Dropdown Menu Responsive

CSS3 Dropdown Menu Responsive - navigasi responsif dengan  menggunakan CSS3. Kenapa responsive...? Ane pikir itu penting dan esensial. Seperti yang sobat ketahui, ahir-ahir ini, banyak orang browsing internet melalui perangkat mobile (seperti ipad, iphone atau android). Dan penting bahwa seluler bisa menavigasi melalui Blog/website sobat. Beberapa solusi yang dapat sobat blogger temukan di internet menawarkan  untuk menggunakan jquery atau javascript. Tapi hari ini ane akan memberikan solusi tanpa menggunakan javascript.

Secara default, ini biasa-UL LI menu drop-down. Tapi, jika layar  kecil (dalam kasus browser ponsel), menu ini berubah menjadi menu klik-based. Dalam hal ini pengunjung blog sobat akan dapat  membuka submenu.

Responsive, Dropdown Menu, menu responsive

Responsive, Dropdown Menu, menu responsive


Untuk Tutorialnya sebagai berikut:-

  1. Seperti biasa sobat Login ke akun Blogger sobat
  2. Klik Tataletak >>> Add Widget lalu kopas kode dibawah ini
 <style type="text/css">
.container {
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    width: 96%;
}
/* common and top level styles */
#nav span {
    display: none;
}
#nav, #nav ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
#nav {
    background-color: #F5F5F5;
    border-bottom: 5px solid #333333;
    float: left;
    margin-left: 1%;
    margin-right: 1%;
    position: relative;
    width: 98%;
}
#nav ul.subs {
    background-color: #FFFFFF;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
    color: #333333;
    display: none;
    left: 0;
    padding: 2%;
    position: absolute;
    top: 54px;
    width: 96%;
}
#nav > li {
    border-bottom: 5px solid transparent;
    float: left;
    margin-bottom: -5px;
    text-align: left;
    -moz-transition: all 300ms ease-in-out 0s;
    -ms-transition: all 300ms ease-in-out 0s;
    -o-transition: all 300ms ease-in-out 0s;
    -webkit-transition: all 300ms ease-in-out 0s;
    transition: all 300ms ease-in-out 0s;
}
#nav li a {
    display: block;
    text-decoration: none;
    -moz-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -ms-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -o-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -webkit-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    white-space: normal;
}
#nav > li > a {
    color: #333333;
    display: block;
    font-size: 1.3em;
    line-height: 49px;
    padding: 0 15px;
    text-transform: uppercase;
}
#nav > li:hover > a, #nav > a:hover {
    background-color: #F55856;
    color: #FFFFFF;
}
#nav li.active > a {
    background-color: #333333;
    color: #FFFFFF;
}
/* submenu */
#nav li:hover ul.subs {
    display: block;
}
#nav ul.subs > li {
    display: inline-block;
    float: none;
    padding: 10px 1%;
    vertical-align: top;
    width: 33%;
}
#nav ul.subs > li a {
    color: #777777;
    line-height: 20px;
}
#nav ul li a:hover {
    color: #F55856;
}
#nav ul.subs > li > a {
    font-size: 1.3em;
    margin-bottom: 10px;
    text-transform: uppercase;
}
#nav ul.subs > li li {
    float: none;
    padding-left: 8px;
    -moz-transition: padding 150ms ease-out 0s;
    -ms-transition: padding 150ms ease-out 0s;
    -o-transition: padding 150ms ease-out 0s;
    -webkit-transition: padding 150ms ease-out 0s;
    transition: padding 150ms ease-out 0s;
}
#nav ul.subs > li li:hover {
    padding-left: 15px;
}
/* responsive rules */
@media all and (max-width : 980px) {
    #nav > li {
        float: none;
        border-bottom: 0;
        margin-bottom: 0;
    }
    #nav ul.subs {
        position: relative;
        top: 0;
    }
    #nav li:hover ul.subs {
        display: none;
    }
    #nav li #s1:target + ul.subs,
    #nav li #s2:target + ul.subs {
        display: block;
    }

    #nav ul.subs > li {
        display: block;
        width: auto;
    }
}
</style>

<div class="container">
            <ul id="nav">
                <li><a href="#">Home</a></li>
                <li><a href="#s1">Menu 1</a>
                    <span id="s1"></span>
                    <ul class="subs">
                        <li><a href="#">Header a</a>
                            <ul>
                                <li><a href="#">Submenu x</a></li>
                                <li><a href="#">Submenu y</a></li>
                                <li><a href="#">Submenu z</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Header b</a>
                            <ul>
                                <li><a href="#">Submenu x</a></li>
                                <li><a href="#">Submenu y</a></li>
                                <li><a href="#">Submenu z</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li class="active"><a href="#s2">Menu 2</a>
                    <span id="s2"></span>
                    <ul class="subs">
                        <li><a href="#">Header c</a>
                            <ul>
                                <li><a href="#">Submenu x</a></li>
                                <li><a href="#">Submenu y</a></li>
                                <li><a href="#">Submenu z</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Header d</a>
                            <ul>
                                <li><a href="#">Submenu x</a></li>
                                <li><a href="#">Submenu y</a></li>
                                <li><a href="#">Submenu z</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#">Menu 3</a></li>
                <li><a href="#">Menu 4</a></li>
                <li><a href="#">Menu 5</a></li>
                <li><a href="http://joens-tutorial.blogspot.com">Back to Responsive menu tutorial</a></li>
            </ul>
        </div>
 

Demikian sobat blogger artikel kita kali ini semoga bisa membantu sobat blogger.

Berlangganan update artikel terbaru via email:

45 Responses to "CSS3 Dropdown Menu Responsive "

  1. Udah nguasai css5 ditunggu tutorialnya.. Pengen follo tp lg pake hp. Met siang aja

    ReplyDelete
    Replies
    1. hehhehhehh......

      Masih belajar gan CSS5 nya hehhheheh, belum berani terimakasih banyak gan kunjungannya.

      Delete
  2. met sore sobat trmkasih infonya sangat membantu sekali sobat

    ReplyDelete
    Replies
    1. sore mas, teriomaksih banyak mas atas support serta kunjungannya

      Delete
  3. Sebetulnya Ane selalu suka baca dan praktik yang beginian Bang Bro. Sayangnya belum ada waktu senggang lagi untuk otak atik blog dan bereksprimen. hehe

    ReplyDelete
    Replies
    1. Mantap mas, sama dong ane juga low lagi senggang kaya mas gitu berexperimen, terimakasih banyak mas atas kunjungannya.

      Delete
  4. mantap ya masssssssssssssssss info nya . . . . . . .

    http://sukatribal.blogspot.com

    ReplyDelete
  5. okee nih mas menunya, sangat mendukung template blog saya :) simple juga pasangnya.
    terimakasih mas

    ReplyDelete
    Replies
    1. terimaksih mas, atas support serta kunjungannya.

      Delete
  6. Replies
    1. terimaksih mas, atas support serta kunjungannya.

      Delete
  7. bagus, jadi gak perlu otak atik template. cuma tambah JS doang. oya Demonya gak bisa kebuka gan.

    ReplyDelete
    Replies
    1. terimaksih gan, coba link yang ini buat demonya :
      http://jsbin.com/ulivex/4

      Delete
  8. Responsive....keren juga nih.
    Template blog ane sudah ada yg beginian sob, salam kenal dari saya.

    ReplyDelete
    Replies
    1. wah mantap mas.
      terimaksih mas, atas support serta kunjungannya.

      Delete
  9. menu dropdown yang kern nih gan,,,,mantap bener!

    ReplyDelete
    Replies
    1. terimaksih mas, atas support serta kunjungannya.

      Delete
  10. mudah juga ya mempraktikkan cara pasang dropdown ini... heeeee

    btw salam kenal ya... :D

    ReplyDelete
    Replies
    1. Iya mas sengaja ane satukan biar mudah cara penerapannya. terimaksih sudah berkunjung

      Delete
  11. Asyik nih mas...tutornya ...pengen juga nanti ta coba ...
    Thx ya :)

    ReplyDelete
    Replies
    1. Silakan mas budi, terimakasih banyak atas kunjungannya

      Delete
  12. wah kang alex emang yahud nih top margotop dilanjut kang dan jangan lupa cooffeemixnya :D

    ReplyDelete
    Replies
    1. so pasti mas, Terimaksih mas atas support serta kunjungannya.

      Delete
  13. tutorialnya sangat bermanfaat sekali sobat, sepertinya perlu juga untuk dicoba
    terima kasih sudah berbagi

    ReplyDelete
    Replies
    1. Terimaksih mas atas support serta kunjungannya.

      Delete
  14. prit,fanta,cola ko roko ,,,,, :D hadir siang kang alex met rehat yah

    ReplyDelete
  15. tutorialnya keren2 semua mas, emang jago blogging nih. sukses ya mas

    ReplyDelete
    Replies
    1. Terimakasih banyak mis atas support serta kunjungannya

      Delete
  16. satu lagi tutorial yg keren mas, sistem navigasi cukup penting bagi suatu blog, apalagi klo tampilan navigasi yg menarik, izin copas kodenya y mas, terima kasih

    ReplyDelete
    Replies
    1. betul mas, silakan mas dibungkus aja hhehheh, thank udah berkunjung

      Delete
  17. kereen nih mas,baru tau kalo dropdown bisa d pasang lewat add widget,biasanya ribet harus bongkar kode HTML template..

    ReplyDelete
    Replies
    1. Bisa aja nimas, sama ane juga baru tau hehehheh.

      Delete
  18. Koleksi menu dropdown yg lain ada tidak mas.....

    ReplyDelete
  19. wah mantap sob, artikel nya...

    ReplyDelete
    Replies
    1. terimakasih, atas support serta kunjungannya.

      Delete
  20. dah coba2 dari tuorial lain, emang sih dilayar komputer responsive tp di tablet pada not working, tp bgitu ane ikutin tutor agan yg satu ini, maknyusssss ... working di smua gadget
    mampir ke tempat ane klo mau liat hasilnya hehehe

    thx gan tutornya

    ReplyDelete

Terimakasih banyak atas kunjungannya, salam silatuhami Alexjoen

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel