Cara Membuat DropDown Menu Dibawah Header Pada Template Blog - Setelah sebelumnya kita belajar membuat Sidebar dan Header. Maka sekarang kita akan belajar membuat DropDown. DropDown yang akan kita buat nantinya akan berada tepat dibawah header.
Cara membuatnya cukup mudah dari tutorial-tutorial sebelumnya. Untuk membuatnya cukup menambahkan CSS dan HTMLnya saja.
Cara Membuat Dropdown :
Taruh CSS dibawah ini diatas ]]</b:skin>nav {text-transform:uppercase;position:relative;font:bold 12px Arial,Sans-Serif;}
nav * {margin:0 0 0 0;padding:0 0 0 0;list-style:none;}
nav ul {overflow: hidden;float:left;background:#1BC7A5;margin: 5px 0;width: 100%;}
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 ul{margin:0px;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:0px;height:0px;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:0px;height:0px;border-width:4px;border-style:solid;border-color:transparent transparent transparent #eee;position:absolute;top:16px;right:10px;}
nav li li:hover{background:rgba(0, 0, 0, 0.16);}
Dan letakkan HTML dibawah ini tepat dibawah </header>
<nav>
<ul>
<li><a href='/'>Beranda</a></li>
<li class='sub'><a href='/search/label/Blog'>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>
</nav>
Atur tulisan berwarna merah dengan link tujuan dan yang berwarna hijau dengan Tulisan yang akan ditampilkan. Jika sudah, silakan Simpan Template dan lihat hasilnya. Selamat mencoba.
Artikel Sebelumnya :
- Cara Membuat Header
- Cara Membuat Sidebar
- Cara Membuat Template Blogger
Artikel Selanjutnya :
- Cara Membuat Footer
Source : http://www.noval.web.id/2014/01/cara-membuat-dropdown-menu-di-bawah.html
Cara Membuat DropDown Menu Dibawah Header Pada Template Blog
4/
5
Oleh
Niddul
.jpg)
