Teknik Membuat Menu Dropdown Responsive Pada Blog

Teknik Membuat Menu Dropdown Responsive Pada Blog – Menu tentu merupakan fitur yang memunculkan maupun memajang nama atau link halaman blog, misal seperti tentang kami, halaman kontak, privasi maupun halaman postingan dan halaman sesuai label/ kategori.

Untitled

Sementara dropdown merupakan fitur atau mode yang didesain satu ruangan dari nama laman yang bisa memunculkan banyak menu dari halaman yang lainnya. Dalam menu dropdown ini sendiri bagi blog memang biasanya berderet tersusun ke bawah.

Dengan menampilkan atau membuat menu dropdown di sebuah blog, maka akan memudahkan pengguna maupun pengunjung blog tersebut sebab apa yang terdapat di dalam blog sudah diberikan menu di laman utama blog.

Dengan adanya menu dropdown ini pulalah bisa lebih menghemat ruang, terlebih lagi blog yang memang menyediakan banyak pilihan menu. Sehingga dalam 1 kolom bisa berisi beberapa menu.

Cara untuk membuatnya juga mudah, Anda hanya perlu menambah 2 rangkaian kode HTML template dan selanjutnya silahkan langsung Anda simak panduannya dibawah ini.

  1. Masuk ke blog Anda
  2. Pergi ke dasbor blog dan pilih desain
  3. Pilih template dan klik EDIT HTML
  4. Copy kode dibawah ini dan tempatkan 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}

5. Copy lagi kode dibawah ini kemudian paste di atas </head>

<nav>
<ul>
<li><a href=’/’>Home</a></li>
<li><a href=’alamat url menu’>nama menu</a></li>
<li class=’sub’><a href=’/search/label/Template’>Menu 1</a><ul>
<li><a href=’alamat url’>sub menu 1</a></li>
<li><a href=’alamat url’>sub menu 2</a></li>
<li><a href=’alamat url’>sub menu 3</a></li>
<li><a href=’alamat url’ target=’_blank’>website Anda</a></li>
</ul>
</li>
</ul>
</nav>

  1. Selanjutnya Anda hanya perlu mengedit nama menu sekaligus alamat url masing-masing menu.
  2. Jika sudah selesai, maka simpan templatenya.

Baca Artikel Lainnya :

Loading...

About Mas Joko

Bukan Indonesia Yang Membutuhkan Dunia, Namun Dunia Yang Membutuhkan Indonesia

Leave a Reply

Your email address will not be published. Required fields are marked *