Cara Membuat Menu Dropdown Responsive di Blog

Bentuk penampakan menu dropdownnya akan seperti gambar dibawah ini .

Langkah Membuat Menu Dropdown Responsive + Kotak Pencarian di Blog

Pertama , silahkan sobat masuk ke dasbhor blog sobat terlebih dahulu
Masuk ke bagian Temlate => Edit Html
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}

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}}}

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>

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 , semoga bermanfaat bagi anda

DaltonNet

Cara Membuat Menu Dropdown Responsive di Blog

Related Posts