Advertisement
Membuat Horizontal Menu Drobdown Pure Css - Menu merupakan komponen penting dalam sebuah blog, berperan sebagai navigasi agar dapat memudahkan pengunjung untuk mengeksplor apa saja yang di tawarkan suatu blog. Ada beragam jenis menu mulai dari sederhana sampai menu yang menampilkan konsep yang wahh...yang disajikan dengan beragam style dan animasi khusus. Pada posting kali ini saya akan menjelas cara sederhana dan simpel
Membuat Horizontal Menu Drobdown Pure Css yang di lengkapi dengan beberapa ikon sosial media. Berikut cara membuatnya :
2. Pilih Template > Edit HTML, CTRL + F cari kode </header> Copy paste kode di bawah ini tepat di bawahnya :
<style>
#wc-soc-nav{ width:100%;
height:50px;
display:block;
padding:0;
margin:0 0 22px 0;
background:#292929;
border-bottom:4px solid rgba(197,52,52,1);
box-shadow:1px 1px 4px #dcdcdc;
-moz-box-shadow:1px 1px 4px #dcdcdc;
-web-kit-box-shadow:1px 1px 4px #dcdcdc;
-goog-ms-box-shadow:1px 1px 4px #dcdcdc;
}
#wc-soc-menu{ margin:0 auto;
display:block;
padding:0;
font-family: 'georgia', sans-serif;
}
#wc-soc-menu ul{ float:left;
margin:0;
padding:0;
}
#wc-soc-menu li{ float:left;
list-style:none;
line-height:50px;
margin:0;
padding:0
}
#wc-soc-menu li a, #wc-soc-menu li a:link{ color:#f0f0f0;
display:block;
margin:0;
padding:0 10px;
font-size:16px;
text-decoration:none;
}
#wc-soc-menu li a:hover, #wc-soc-menu li a:active, #wc-soc-menu .current_page_item a {
color:#fff;
padding:0 10px;
}
#wc-soc-menu li li a, #wc-soc-menu li li a:link, #wc-soc-menu li li a:visited{ font-size: 16px;
background:#292929;
color: #fff;
width: 150px;
margin: 0;
padding: 0px 10px;
line-height:30px;
position: relative;
}
#wc-soc-menu li li a:hover, #wc-soc-menu li li a:active {
background:#222222;
color: #fff;
}
#wc-soc-menu li ul{ z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:168px;
margin:0px;
padding:0px
}
#wc-soc-menu li:hover ul, #wc-soc-menu li li:hover ul, #wc-soc-menu li li li:hover ul, #wc-soc-menu li.sfhover ul, #topwc-soc-menu li li.sfhover ul, #topwc-soc-menu li li li.sfhover ul{
left:auto
}
#wc-soc-menu li:hover, #wc-soc-menu li.sfhover{ position:static
}
#wc-soc-ico img
{
margin-left:-6px;
height:35px;
margin-top:9px;
}
</style>
<div id='wc-soc-nav'>
<div id='wc-soc-menu'>
<ul>
<li><a href='#'>Beranda</a></li>
<li><a href='#'>Happy</a>
</li>
<li><a href='#'>Blogging</a></li>
<li><a href='#'>Island</a></li>
<li><a href='#'>Dropdown 2 »</a>
<ul>
<li><a href='#'>Blogger</a></li>
<li><a href='#'>Templates</a></li>
<li><a href='#'>Plugins</a></li>
<li><a href='#'>Wordpress </a></li>
<li><a href='#'>Themes</a></li>
<li><a href='#'>Blogging tips</a></li>
</ul>
</li>
<li><a href='#'>Contact us</a>
</li>
<li id='wc-soc-ico'>
<a href='URL facebook Fanpage Kamu' target='_blank'>
<img style='margin-left:50px;' src='http://2.bp.blogspot.com/-iKLppxYoaW0/Uws6PaZJ-yI/AAAAAAAAAHk/5Vp8DWfYXCU/s1600/48x48-Circle-49-FB.png' alt='Facebook' title='Like us on Facebook'/>
</a>
</li>
<li id='wc-soc-ico'>
<a href='URL twitter Kamu' target='_blank'>
<img src='http://3.bp.blogspot.com/-48EGbQzzsdI/Uws6RmhElvI/AAAAAAAAAIM/4cB8dYeRA1c/s1600/48x48-Circle-49-TW.png' alt='Twitter' title='Follow us on twitter'/>
</a>
</li>
<li id='wc-soc-ico'>
<a href='URL Google Plus Kamu' target='_blank'>
<img src='http://4.bp.blogspot.com/-hyEUL2pEdxo/Uws6PoLa8tI/AAAAAAAAAHo/cPPQeU-XbdE/s1600/48x48-Circle-49-GP.png' alt='Google Plus' title='Follow us on Google plus'/>
</a>
</li>
<li id='wc-soc-ico'>
<a href='URL RSS feed Blog Kamu' target='_blank'>
<img src='http://4.bp.blogspot.com/-6NeaTmA0fxs/Uws6RGbKbnI/AAAAAAAAAIE/X-xp-2uBQ-g/s1600/48x48-Circle-49-RSS.png' alt='RSS' title='Subscribe to our RSS feeds'/>
</a>
</li>
</ul>
</div>
</div>
3. Save Template.
Untuk menganti warna background silahkan cari kode ini :
background:#292929; dan warna Hover background:#222222;
Demikian posting kali ini tentang
Membuat Horizontal Menu Drobdown Pure Css semoga dapat bermanfaat dan memperinda tampilan blog kalian. Salam hangat LandBlogging dan terima kasih.
Advertisement