Dropdown Menu Horizontal Cantik

By Unknown

Minggu, 25 Maret 2012

Sekarang saya akan terangkan cara membuat menu horizontal cantik untuk blog. Fungsinya sama, hanya beda tampilan, dan ini lebih menarik. Widget ini tidak mempunyai root ke bawah secara vertikal, mempunyai root horizontal yang di tampilkan di bawah span tab navigasi.Baiklah sekarang mari kita bahas cara membuat menu navigasi horizontal canti, ikujti langkah berikut.

Log in ke blog
Klik Rancangan
Klik Edit HTML
Masukkan kode berikut di atas kode ]]></b:skin>

.nav{height:35px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8qMgeJFICvFIM3ogSUsCU9SKTlz4G25EDqIANLUaOaEAnXoSP4vvRPEc6HWAUNv1XccjWi2gUuAG4VV_YOIRjPY8NUb3bUJnEVRgcVX4cLTFvSf8QPzifxVKkxDeUyyzoH8K0EYIjWII5/s1600/bg.gif) repeat-x; position:relative; font-family:arial,verdana,sans-serif; font-size:11px; width:100%; z-index:100; margin:0; padding:0}
.nav .table{display:table; margin:0 auto}
.nav .select,
.nav .current{margin:0; padding:0; list-style:none; display:table-cell; white-space:nowrap}
.nav li{margin:0; padding:0; height:auto; float:left}
.nav .select a{display:block; height:35px; float:left; font-weight:bold; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8qMgeJFICvFIM3ogSUsCU9SKTlz4G25EDqIANLUaOaEAnXoSP4vvRPEc6HWAUNv1XccjWi2gUuAG4VV_YOIRjPY8NUb3bUJnEVRgcVX4cLTFvSf8QPzifxVKkxDeUyyzoH8K0EYIjWII5/s1600/bg.gif); padding:0 30px 0 30px; text-decoration:none; line-height:35px; white-space:nowrap; color:#2b3238}
.nav .select a:hover,
.nav .select li:hover a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuiwknE7dRXCJU4No5HVoVgQGFiTi5NUdNpUk_HwvtPhL5xyWKAvsbBpcR9RuVvR1ALYFS8nWOz1DROrb9SsPB9PSIbXkbbz8Mf91Qxm7CiN-2LV8_zRc5n3NMV2zUtsKQBOnJoyCMub0O/s1600/hover.gif); padding:0 0 0 15px; cursor:pointer; color:#2b3238}
.nav .select a b{font-weight:bold}
.nav .select a:hover b,
.nav .select li:hover a b{display:block; float:left; padding:0 30px 0 15px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuiwknE7dRXCJU4No5HVoVgQGFiTi5NUdNpUk_HwvtPhL5xyWKAvsbBpcR9RuVvR1ALYFS8nWOz1DROrb9SsPB9PSIbXkbbz8Mf91Qxm7CiN-2LV8_zRc5n3NMV2zUtsKQBOnJoyCMub0O/s1600/hover.gif) right top; cursor:pointer}
.nav .select_sub{display:none}
.nav table{border-collapse:collapse; margin:-1px; font-size:1em; width:0; height:0}
.nav .sub{display:table; margin:0 auto; padding:0; list-style:none}
.nav .sub_active .current_sub a,
.nav .sub_active a:hover{background:transparent; color:#2b3238}
.nav .select:hover .select_sub,
.nav .current .show{display:block; position:absolute; width:100%; top:35px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh04LkwZN0yktkIQWoPc_Vde78lHVl4u4VMdxKwW-QoZ7lACZTo6ozd3i1xpu48o9KMvdXcCvxCWf0r7tEejpVmfEEzIsYtN3dqU7ZryUZc7KA_0E9yde7xJdh1bTdXYCIkNP0Lc9iRai-0/s1600/back.gif); padding:0; z-index:100; left:0; text-align:center}
.nav .current .show{z-index:10}
.nav .select:hover .sub li a,
.nav .current .show .sub li a{display:block; float:left; background:transparent; padding:0 10px 0 10px; margin:0; white-space:nowrap; border:0; color:#2b3238}
.nav .current .sub li.sub_show a{color:#2b3238; cursor:default}
.nav .select .sub li a{font-weight:normal}
.nav .select:hover .sub li a:hover,
.nav .current .sub li a:hover{visibility:visible; color:#73a0d2}
<!--[if IE]>
.nav ul{display:inline-block}
.nav ul{display:inline}
.nav ul li{float:left}
.nav{text-align:center}
.nav .select a:hover b,
.nav .select li:hover a b{float:none}
<![endif]-->

Selanjutnya klik Simpan Template
Klik lagi Rancangan
Klik Tambah Gadget
Pilih HTML/JavaScript
Masukkan kode berikut ke dalamnya

<div class="nav">
<div class="table">

<ul class="select"><li><a href="#"><b>Sample</b></a></li></ul>

<ul class="select"><li><a href="#"><b>BERI JUDUL 1 DI SINI</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="MASUKKAN ALAMAT LINK">Sample Menu 1</a></li>
<li><a href="MASUKKAN ALAMAT LINK">Sample Menu 1</a></li>
<li><a href="MASUKKAN ALAMAT LINK">Sample Menu 1</a></li>
<li><a href="MASUKKAN ALAMAT LINK">Sample Menu 1</a></li>
<li><a href="MASUKKAN ALAMAT LINK">Sample Menu 1</a></li>

</ul>
</div>
</li>
</ul>

<ul class="select"><li><a href="#"><b>BERI JUDUL 2 DI SINI</b></a>
<div class="select_sub">
<ul class="sub">

<li><a href="MASUKKAN ALAMAT LINK">Sample Menu 2</a></li>
<li><a href="MASUKKAN ALAMAT LINK">Sample Menu 2</a></li>
<li><a href="MASUKKAN ALAMAT LINK">Sample Menu 2</a></li>
<li><a href="MASUKKAN ALAMAT LINK">Sample Menu 2</a></li>
</ul>

</div>
</li>
</ul>


<ul class="select"><li><a href="#"><b>BERI JUDUL 3 DI SINI</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="MASUKKAN ALAMAT LINK">Sample Menu 3</a></li>
<li><a href="MASUKKAN ALAMAT LINK">Sample Menu 3</a></li>
<li><a href="MASUKKAN ALAMAT LINK">Sample Menu 3</a></li>
<li><a href="MASUKKAN ALAMAT LINK">Sample Menu 3</a></li>
<li><a href="MASUKKAN ALAMAT LINK">Sample Menu 3</a></li>
</ul>
</div>
</li>
</ul>


<ul class="select"><li><a href="#"><b>BERI JUDUL 4 DI SINI</b></a>
<div class="select_sub">
<ul class="sub">

<li><a href="MASUKKAN ALAMAT LINK">Sample Menu 4</a></li>
<li><a href="MASUKKAN ALAMAT LINK">Sample Menu 4</a></li>
<li><a href="MASUKKAN ALAMAT LINK">Sample Menu 4</a></li>
<li><a href="MASUKKAN ALAMAT LINK">Sample Menu 4</a></li>
<li><a href="MASUKKAN ALAMAT LINK">Sample Menu 4</a></li>
</ul>

</div>
</li>
</ul>

</div>
</div>

Silahkan edit sesuai petunjuk pada kode di atas
Selanjutnya klik Simpan dan lihat hasilnya. Demikian tutorial cara membuat menu horizontal cantik, semoga bermanfaat. Amin. Selamat mencoba dan sukses selalu.

"keep spirits and do the best"

Share :

Facebook Twitter Google+