Cara Membuat Pure CSS3 Two Level Dark Menu

Okeh setelah 4 bulan lamanya gak memberikan tutorial baru di blog ini, pagi ini saya mau kembali mengajak anda membuat sebuah Menu Navigasi baru, yang seperti biasa masih akan kita buat dengan memanfaatkan CSS3, Kenapa saya masih setia memberikan tutorial dengan memanfaatkan CSS3? Simple aja, karena selain Efek dari CSS3 yang luar biasa Powerfull, dengan memanfaatkan CSS3 artinya anda pun sedikit mengurangi Loading Blog anda karena disini saya memang tidak akan mengajarkan anda untuk menyisipkan gambar serta javascript apapun, atau seperti judulnya kita memang pure hanya akan menggunakan CSS3 untuk membuat semua Efeknya.

Lantas kenapa Menu Navigasi kali ini saya namakan "Pure CSS3 Two Level Dark Menu"? karena seperti yang dapat anda lihat pada gambar diatas, menu navigasi kali ini memang saya buat dengan tampilan yang agak gelap, dengan memanfaatkan 1 buah Sub menu atau dengan kata lain terlihat menjadi menu navigasi dengan 2 level :)

Dan untuk anda yang penasaran dan ingin melihat secara langsung seperti apa hasil penerapannya nanti, silahkan klik link demo dibawah ini

DEMO

Dan silahkan lihat hasil penerapan menu ini pada bagian paling bawah di link demo diatas. Oiya, karena Background yang saya gunakan di link demo tersebut masih terhitung terang, jadi level pertama (bukan Sub Menu) pada menu Navigasi ini memang agak kurang terlihat klo anda gak mengarahkan kursor ke menu tersebut, jadi menu kali ini memang secara khusus saya anjurkan untuk digunakan pada Blog dengan Template agak gelap :)

Lantas bagaimana cara membuatnya?

1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Cari kode seperti dibawah ini:

]]></b:skin>

5. Jika Sudah Ketemu, letakkan Kode CSS dibawah ini tepat diatas kode tersebut atau sebelum kode ]]></b:skin> tersebut:

/* Main Dark Menu Unordered List First Level Style */
ul.dark_menu {
list-style: none;
padding: 0;
font-family: Arial;
font-size: 14px;
line-height: 14px;
}

/* Clears all floated List Items */
ul.dark_menu:after {
content: "";
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}

/* First Level List Items Style */
ul.dark_menu li {
float: left;
margin: 0 0 0 10px;
position: relative;
}

/* First List Item in First Level Style */
ul.dark_menu li:first-child {
margin: 0;
}


/* List Items Links Style */
ul.dark_menu li a, ul.dark_menu li a:link {
color: #161312;
text-decoration: none;
display: block;
padding: 10px 26px;

/* Text Shadow */
text-shadow: 0 1px 0 #4b433e;

/* Gradient Background */
background: #362f2c; /* Old browsers */
background: -moz-linear-gradient(top, #362f2c 0%, #282321 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#362f2c), color-stop(100%,#282321)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #362f2c 0%,#282321 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #362f2c 0%,#282321 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #362f2c 0%,#282321 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#362f2c', endColorstr='#282321',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #362f2c 0%,#282321 100%); /* W3C */

/* Border Radius */
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;

/* Box Shadows */
-webkit-box-shadow: inset 0 1px 0 #564b46,
0 1px 1px #181514;
-moz-box-shadow: inset 0 1px 0 #564b46,
0 1px 1px #181514;
box-shadow: inset 0 1px 0 #564b46,
0 1px 1px #181514;

/* Transition Effect */
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
/* List Items Links Hover State Style */
ul.dark_menu li a:hover {
color: #73635e;

/* Text Shadow */
text-shadow: 0 1px 1px #000;

/* Gradient Background */
background: #282321; /* Old browsers */
background: -moz-linear-gradient(top, #282321 0%, #362f2c 99%, #362f2c 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#282321), color-stop(99%,#362f2c), color-stop(100%,#362f2c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #282321 0%,#362f2c 99%,#362f2c 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #282321 0%,#362f2c 99%,#362f2c 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #282321 0%,#362f2c 99%,#362f2c 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#282321', endColorstr='#362f2c',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #282321 0%,#362f2c 99%,#362f2c 100%); /* W3C */

/* Transition Effect */
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

/* List Items Links Active and Selected State Style */
ul.dark_menu li a.selected, ul.dark_menu li a:active {
color: #73635e;
background: #282321;

/* Text Shadow */
text-shadow: 0 1px 1px #000;

/* Box Shadows */
-webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.6),
0 1px 0 #5e524f;
-moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.6),
0 1px 0 #5e524f;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.6),
0 1px 0 #5e524f;

/* Transition Effect */
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
/* Sub Menu Unordered List Second Level Style */
ul.dark_menu li ul {
display: none;
}
/* Sub Menu Unordered List Second Level Style
When Parent List Item is Hovered */
ul.dark_menu li:hover ul {
position: absolute;
display: block;
z-index: 1000;
left: 0;
top: 44px;
padding: 5px 0;
list-style: none;
background: #282321;

/* Box Shadows */
-webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.6),
0 1px 0 #5e524f;
-moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.6),
0 1px 0 #5e524f;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.6),
0 1px 0 #5e524f;

/* Border Radius */
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
/* Before Second Level Unordered List Style */
ul.dark_menu li ul:before {
content: " ";
position: absolute;
display: block;
z-index: 1500;
left: 0;
top: -10px;
height: 10px;
width: 100%;
}

/* Second Level Menu List Items Style */
ul.dark_menu li ul li {
float: none;
margin: 0 10px;
border-bottom: 1px solid #191614;
border-top: 1px solid #3a3230;
}

/* First List Item in Second Level Menu Style */
ul.dark_menu li ul li:first-child {
margin: 0 10px;
border-top: 0 none;
}

/* Last List Item in Second Level Menu Style */
ul.dark_menu li ul li:last-child {
border-bottom: 0 none;
}
/* Second Level List Items Links Style */
ul.dark_menu li ul li a, ul.dark_menu li ul li a:link {
color: #73635e;
display: block;
background: transparent none;
padding: 10px 20px 10px 5px;
white-space: nowrap;

/* Text Shadow */
text-shadow: 0 1px 2px #000;

/* Box Shadows */
-webkit-box-shadow: 0 0 0 rgba(0,0,0,0);
-moz-box-shadow: 0 0 0 rgba(0,0,0,0);
box-shadow: 0 0 0 rgba(0,0,0,0);

/* Border Radius */
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}

/* Second Level List Items Links Hover State Style */
ul.dark_menu li ul li a:hover {
text-decoration: underline;
background: #2a2523;
}

6. Jika sudah, beralihlah dan cari Kode <body> dan letakkan Kode HTML dibawah ini tepat dibawah atau setelah kode <body> tersebut.

<!-- Dark Menu Begin -->
<ul class='dark_menu'>
<li><a class='selected' href=''>Home</a></li>
<li>
<a href='#'>Back To</a>
<!-- Sub Menu Begin -->
<ul>
<li><a href='#'>Back To Tutorial</a></li>
<li><a href='#'>Back To Tutorial</a></li>
<li><a href='#'>Back To Tutorial</a></li>
<li><a href='#'>Back To Tutorial</a></li>
</ul>
<!-- Sub Menu End -->
</li>
<li>
<a href='#'>Blog</a>
<!-- Sub Menu Begin -->
<ul>
<li><a href='http://dj-site.blogspot.com/'>DJ Site</a></li>
<li><a href='http://dj-note.blogspot.com/'>DJ Note</a></li>
<li><a href='http://private-ebook.blogspot.com/'>E-Book</a></li>
<li><a href='http://review-movie-boxoffice.blogspot.com/'>Movie&#39;s</a></li>
<li><a href='http://sejarah-bangsa-kita.blogspot.com/'>History</a></li>
</ul>
<!-- Sub Menu End -->
</li>
<li><a href='mailto:djnand.dj@gmail.com'>Contact</a></li>
</ul>
<!-- Dark Menu End -->

7. Atau klo anda mau yang lebih gampang lagi, anda bisa menempatkan kode HTML diatas, dalam sebuah Widget HTML dengan menuju ke Edit Laman > Add Gadget, karena intinya sebenernya sama aja hhe... :)

8. Save Template anda dan lihat hasilnya.

Dan untuk proses pengeditan, anda bisa mengganti keterangan yang saya beri warna merah dengan URL yang ingin anda masukkan, serta keterangan yang saya beri warna biru, dengan kata-kata yang ingin anda tampilkan dalam menu navigasi tersebut.

Selamat Mencoba :)