Cara Membuat Menu Dropdown Responsive

12/15/2014
Pasti agan sering liat kan menu yang sering turun saat kita mengarahkan kursor? menu itu disebut menu dropdown. Menu dropdown sendiri di blog dapat meningkatkan jumlah pageviews anda lebih banyak dibanding UV atau Unik Visitor.

Navigasi dropdown ini berbeda dengan yang lain karena sudah dimodifikasi dan ditambah  fitur responsive serta ditambahi kotak pencarian agar mempermudah pengunjung mencari artikel di blog sobat.




Langkah Membuat Menu Dropdown Responsive dan Kotak Pencarian
1. Pertama , silahkan sobat masuk ke dasbhor blog sobat terlebih dahulu
2. Masuk ke bagian Temlate => Edit Html
3. Kemudian Salin dan letakkan kode berikut tepat di atas ]]</b:skin>

nav{text-transform:uppercase;position:relative;font:bold 12px Arial,Sans-Serif;background:#e74c3c}
nav *{margin:0 0 0 0;padding:0 0 0 0;list-style:none}
nav ul{overflow:hidden;background:rgba(231,76,60,0.84);float:left}
nav li{float:left;display:inline}
nav li a{padding:3px 15px;line-height:40px;color:#fff!important;display:block;text-decoration:none}
nav li a:hover{background:rgba(231,76,60,0.84)!important}
nav li ul{display:block;width:170px;position:absolute;left:auto;z-index:10;visibility:hidden;opacity:0;height:auto;transition:all 0.26s ease-out 0.2s}
nav li li{display:block;float:none;width:100%}nav li:hover > ul{visibility:visible;width:200px;opacity:1}nav li li ul{left:200px;margin-top:-40px}
nav li.sub > a{position:relative;padding-right:30px}
nav li.sub > a:after{content:"";width:0;height:0;border-width:4px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:20px;right:10px}
nav li.sub li.sub > a:after{content:"";width:0;height:0;border-width:4px;border-style:solid;border-color:transparent transparent transparent #eee;position:absolute;top:16px;right:10px}

4. Supaya menu tersebut dapat berubah responsive, maka kita harus menambahkan media query ke template anda. Terdapat 2 media query, yaitu pada ukuran 600px dan 380px. Letakkan media query ini sesuai dengan media query yang ada di template anda. Atau letakkan bisa letakkan kode berikut tepat di atas ]]</b:skin>

@media screen and (max-width:600px){#nav2{display:inherit;margin:5px;float:left;padding:8px}nav ul{display:none}}
@media screen and (max-width:380px){#nav2{padding:3px}#search-top{padding:5px}input[type="text"]{padding:5px;width:90px}#search-button-top{background-image:url("http://3.bp.blogspot.com/-60fYApN0j2M/Ub8uXOv4rNI/AAAAAAAACBs/6PDa4uu3cHk/s1600/csg-51bf2d6764c79.png");background-repeat:no-repeat;transition:all 0.7s ease 0s;height:26px;width:29px;background-color:#34495e;background-position:7px -247px;border:none;float:right;cursor:pointer}}}

5. Kemudian letakkan kode berikut suka-suka anda, kalau saya meletakannya di bawah header

<nav>
<ul>
<li><a href="/search/label/Tutorial">Tutorial</a></li>
<li class="sub"><a href="/search/label/Template">Template</a><ul>
<li><a href="/search/label/CSS3">CSS3</a></li>
<li><a href="/search/label/HTML5">HTML5</a></li>
<li><a href="/search/label/Responsive">Responsive</a></li>
<li><a href="/search/label/SEO">SEO</a></li>
</ul>
</li>
</ul>
<select class="nav2" id="nav2" onchange="document.location.href=this.options[this.selectedIndex].value;">
<option value="/">Home</option>
<option value="/search/label/Tutorial">Tutorial</option>
<option value="/search/label/Template">Template</option>
<option value="/search/label/CSS3">- CSS3</option>
<option value="/search/label/HTML5">- HTML5</option>
<option value="/search/label/Responsive">- Responsive</option>
<option value="/search/label/SEO">- SEO</option>
</select>
<form action="/search" id="search-top" method="get">
<input name="q" placeholder="Search..." type="text"/><input id="search-button-top" type="submit" value=""/></form>
</nav>

6. Terahir, klik Simpan Template

Semoga bermanfaat.

    Artikel Terkait

    Next Article
    « Prev Post
    Previous Article
    Next Post »
    Penulisan markup di komentar
    • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
    • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
    • Untuk menulis huruf underline silahkan gunakan <u></u>.
    • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
    • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.
    Konversi Code
    Disqus
    Silahkan Berkomentar Dengan

    12 komentar

    Write komentar
    faiz aufa
    AUTHOR
    15 Desember 2014 23.07 delete

    Mantap Nih Gan, Ijin Dicoba Ya

    Reply
    avatar
    Arief Maulana
    AUTHOR
    15 Desember 2014 23.16 delete

    Makasih informasinya gan,, bermanfaat ^^

    Reply
    avatar
    Eky Januarta
    AUTHOR
    15 Desember 2014 23.17 delete

    monggoh dicoba gan ^_^

    Reply
    avatar
    agam yusliman
    AUTHOR
    16 Desember 2014 01.35 delete

    wah nambah ilmu scc ni, makasi gan udah share , ,

    Reply
    avatar
    Eky Januarta
    AUTHOR
    16 Desember 2014 02.24 delete

    hehehe thanks kenapa gan? @_@

    Reply
    avatar
    16 Desember 2014 03.00 delete

    Sudah Saya Coba dan alhasil sangat Responsif untuk di pasang di blog yang ringan ...
    Jangan lupa mampirgan ...

    Reply
    avatar
    1 Februari 2015 04.02 delete

    makasih atas infonya gan kapan2 kunjungi juga blog ane
    http://hafizharlygameslinker.blogspot.com/

    Reply
    avatar
    1 Februari 2015 04.03 delete

    makasih atas infonya gan kapan2 kunjungi juga blog ane
    http://hafizharlygameslinker.blogspot.com/

    Reply
    avatar

    Catatan!
    Berkomentar menyertakan link akan saya hapus atau bahkan saya golongkan sebagai "SPAM". Jika ingin menyertakan link, silakan menggunakan Komentar Name/URL yang telah disediakan.

    Dilarang keras OOT!!