Cara Membuat Menu Bar Keren Dengan CSS3

Jika sobat ingin menggunakan menu bar ini di blog sobat silahkan ikuti langkah-langkah dibawah ini :http://id-upienawa.blogspot.com/2013/06/cara-membuat-menu-bar-keren-dengan-css3.html

View Demo

• Masuk ke akun blog sobat.
• Pilih Template =>> Edit HTML.
• Kemudian cari kode ]]></b:skin> ( Untuk mempercepat pencarian gunakan Ctrl+F di kotak script EDit HTML).
• Copy kode dibawah ini, kemudian Paste tepat diatas kode ]]></b:skin>.

@import url(http://fonts.googleapis.com/css?family=Open+Sans:600);
/* Menu CSS */
#cssmenu, #cssmenu > ul{
background:#24459A;
padding-bottom: 3px;
font-family: 'Open Sans', sans-serif;
font-weight: 600;
}
#cssmenu:before, #cssmenu:after, #cssmenu > ul:before, #cssmenu > ul:after {
content: '';
display: table;
}
#cssmenu:after, #cssmenu > ul:after {
clear: both;
}
#cssmenu {
zoom:1;
}
#cssmenu > ul{
background:black;
margin: 0;
padding: 0;
position: relative;
}
#cssmenu > ul li{
margin: 0;
padding: 0;
list-style: none;
}
#cssmenu > ul > li{
float: left;
position: relative;
}
#cssmenu > ul > li > a{
padding: 23px 26px;
display: block;
color: white;
font-size: 13px;
text-decoration: none;
text-transform: uppercase;
text-shadow: 0 -1px 0 #0d0d0d;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .70);
line-height: 18px;
}
#cssmenu > ul > li:hover > a{
background:#24459A;
text-shadow: 0 -1px 0 #97321f;
text-shadow: 0 -1px 0 rgba(122, 42, 26, .64);
}
#cssmenu > ul > li > a > span{
line-height: 18px;
}
#cssmenu > ul > li.active > a, #cssmenu > ul > li > a:active{
background: #24459A;
}
/* Childs */
#cssmenu > ul ul{
opacity: 0;
visibility: hidden;
position: absolute;
top: 120px;
background:black;
margin: 0;
padding: 0;
z-index: -1;
-webkit-transition: all .35s .2s ease-in-out;
-moz-transition: all .35s .2s ease-in-out;
-ms-transition: all .35s .2s ease-in-out;
transition: all .35s .2s ease-in-out;
}
#cssmenu > ul li:hover ul{
opacity: 1;
visibility: visible;
margin: 0;
color: #000;
z-index: 2;
top:64px;
left: 0;
}
#cssmenu > ul ul:before{
content: '';
position: absolute;
top: -10px;
width: 100%;
height: 20px;
background: transparent;
}
#cssmenu > ul ul li{
list-style: none;
padding: 0;
margin: 0;
width: 100%;
}
#cssmenu > ul ul li a{
padding: 18px 26px;
display: block;
color: white;
font-size: 13px;
text-decoration: none;
text-transform: uppercase;
width: 150px;
border-left: 4px solid transparent;
-webkit-transition: all .35s ease-in-out;
-moz-transition: all .35s ease-in-out;
-ms-transition: all .35s ease-in-out;
transition: all .35s ease-in-out;
}
#cssmenu > ul ul li a:hover{
background:#24459A;
}
#cssmenu > ul ul li a:active{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYKuOIK3Rkl7RtAQ7kGTmThWEsoNGsAdqackf-qE88CNj_dteIbSdqK-mDFqQJX2fYQoYmuV8ndiCNOxsFkf9CmTqnRByLgJhfFs6ZnuYvUkXNCNc_WykjBnJZepwqiG3JiqVpNnFYZbw/s1600/menu-bg.png) repeat;
}menu > ul > li > ul > li > ul{
left: 202px;
top: 1px;
width: 200px;
}
#cssmenu > ul > li > ul > li > ul > li{
float: none;
}

• Simpan Template.
• Kemudian Pilih Tata Letak =>> Add Gedget / Tambahkan Gedget.
• Pilih HTML/Javascript.
• Kemudian Copy kode dibawah ini dan Paste di HTML/Javascript.

<div id="cssmenu">
<ul>
<li class="active "><a href="#"><span>Home</span></a></li>
<li class="has-sub "><a href="#"><span>Templates</span></a>
<ul>
<li><a href="#"><span>Blogger</span></a></li>
<li><a href="#"><span>WordPress</span></a></li>
</ul>
</li>
<li><a href="#"><span>Write For Us</span></a></li>
<li><a href="#"><span>Sitemap</span></a></li>
<li><a href="#"><span>Contact</span></a></li>
<li><a href="#"><span>Privacy</span></a></li>
<li><a rel="author" href="#"><span>About</span></a></li>
</ul>
</div>

• Ganti kode yang berwarna Biru dengan URL Link yang sobat inginkan. Kode yang berwarna Merahadalah judul / nama Navigasi sobat.
• Simpan HTML/Javascript.