Cara Membuat Menu Dropdown Responsive

Langkah Membuat Menu Dropdown Responsive dan Valid di Blog + Search Box- Tahukah anda bahwa menu naviagasi yang tepasang di blog anda merupakan salah satu hal untuk membuat blog anda menjadi user seo friendly karena dengan terpasang menu dropdown di blog dapat meningkatkan jumlah pagviews anda lebih banya dua kali lipat dibanding UV atau unik Visitor . Kalau nggak percaya silahkan lihat statistik blog saya melalui histats

Oh iya , navigasi meni dropdown kali ini berbeda dengan yang lainya , karena telah di modifikasi dan ditambahi fitur responsive untuk menyesuaikan trend dan perkembangan zaman saat ini , serta ditambahi kotak pencarian untuk mempermudah pengunjung mencari artikel meanrik unik lainya yang ada di blog sobat.

Bentuk penampakan menu dropdownnya seperti apa mas ? untuk hasilnya nanti , kurang lebih jadiya akan seperti gambar dibawah ini . Gimana keren bangetss bukan ?

Langkah Membuat Menu Dropdown Responsive + Kotak Pencarian di Blog

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. Yang Terkhir Silahkan Simpan Template dan Lihat perubahanya

Taraaa Menu Dropdown Responsive di Blog di bawah header kini sudah terpasang di blog sobat , oh iya saya sarankan ketika sobat melakukan tutorial diatas gunakanlah blog demo terlebih dahulu jangan blog utama , nanti kalau sobat kurang tepat malah jadi kacau deh template blog utama , kalau di blog demo udah berhasil kemudian baru di blog utama , sekian tutorial membuat dan memasang menu dropdowns di blog yang keren dan responsive , semoga bermanfaat bagi anda

Share: