Minggu, 04 September 2011

Free HTML Code for Dropdown Vertical Menu (Part 1)

Setelah lama dibuat bingung gimana cara membuat menu drop down vertikal akhirnya ketemu solusi mudah. Caranya dengan membelajari kode html dari hasil yang disajikan dari site purecssmenu.com. Dan, apa yang saya pelajari akan disampaikan secara bertahap sebagaimana saya mempelajarinya.

  • Tahap 1. Permulaan mencoba membuat 1 item
  • Tahap 2 Membuat 2 Item
  • Tahap 3 Membuat 1 item submenus
  • Tahap 4 Membuat 2 subitem menus
  • Tahap 5 Membuat 1 sub dari subitem menus
  • Tahap 6 Membuat 2 sub dari subitem menus

Tahap 1. Permulaan mencoba membuat 1 Menu

Parameter yang digunakan
  1. Font 
    • Tahoma
    • 11 px
  2. Colour 
    • Font
      • Normal : 305429
      • Hover : FFFFFF
    • Background
      • Normal : 91FF09
      • Hover : 47723F
  3. Item : Product

<style>
#pcm{display:none;}
ul.pureCssMenu ul{display:none}
ul.pureCssMenu li:hover>ul{display:block}
ul.pureCssMenu ul{position: absolute;left:98%;top:-1px;}
ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;}
ul.pureCssMenu,ul.pureCssMenu ul {
	margin:0px;
	list-style:none;
	padding:0px 1px 1px 0px;
	background-color:#308321;
	background-repeat:repeat;
	border-color:;
	border-width:0px;
	border-style:solid;
}
ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
	display:block;
	zoom:1;
	_width:68.25px;
	float: left;
}
ul.pureCssMenu ul{
	width:0px;
}
ul.pureCssMenu li{
	display:block;
	margin:1px 0px 0px 1px;
	font-size:0px;
}
ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
outline-style:none;
}
ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
	display:block;
	vertical-align:middle;
	zoom:1;
	background-color:#91FF09;
	border-width:0px;
	border-color:#E4E1DE;
	border-style:solid;
	text-align:left;
	text-decoration:none;
	padding:4px;
	_padding-left:0;
	font:normal 11px Tahoma;
	color: #305429;
	text-decoration:none;
	cursor:default;
}
ul.pureCssMenu span{
	overflow:hidden;
}
ul.pureCssMenu ul li {
	float:none;
}
ul.pureCssMenu ul a {
	text-align:left;
	white-space:nowrap;
}
ul.pureCssMenu li.sep{
	text-align:left;
	padding:0px;
	line-height:0;
}
ul.pureCssMenu li.sep span{
	float:none;	padding-right:0;
	width:100%;
	height:3;
	display:inline-block;
	background-color:;	background-image:none;}
ul.pureCssMenu li:hover{
	position:relative;
}
ul.pureCssMenu li:hover>a{
	background-color:#47723F;
	border-color:#FFFFFF;
	border-style:solid;
	font:normal 11px Tahoma;
	color: #FFFFFF;
	text-decoration:none;
}
ul.pureCssMenu li a:hover{
	position:relative;
	background-color:#47723F;
	border-color:#FFFFFF;
	border-style:solid;
	font:normal 11px Tahoma;
	color: #FFFFFF;
	text-decoration:none;
}
ul.pureCssMenu li.dis a {
	color: #AAAAAA !important;
}
ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:4px;width:24px;
height:24px;
}
ul.pureCssMenu ul img {width:16px;
height:16px;
}
ul.pureCssMenu img.over{display:none}
ul.pureCssMenu li.dis a:hover img.over{display:none !important}
ul.pureCssMenu li.dis a:hover img.def {display:inline !important}
ul.pureCssMenu li:hover > a img.def  {display:none}
ul.pureCssMenu li:hover > a img.over {display:inline}
ul.pureCssMenu a:hover img.over{display:inline}
ul.pureCssMenu a:hover img.def{display:none}
ul.pureCssMenu span{
	display:block;
	background-image:url(./images/arrow_sub5.gif);
	background-position:right center;
	background-repeat: no-repeat;
   padding-right:12px;}
ul.pureCssMenu li:hover>a>span{	background-image:url(./images/arrow_main4.gif);
}
ul.pureCssMenu a:hover span{	_background-image:url(./images/arrow_main4.gif)}
ul.pureCssMenu ul span,ul.pureCssMenu a:hover table span{background-image:url(./images/arrow_sub5.gif)}
ul.pureCssMenu ul li:hover > a span{	background-image:url(./images/arrow_main4.gif);}
</style>
<ul class="pureCssMenu pureCssMenum">
	<li class="pureCssMenui"><a class="pureCssMenui" href="#">Product</a></li>
</ul>

Menambah item baru Sistem Transaksi
Dikarenakan sistem transaksi memerlukan lebar kolom yang lebih besar maka  perlu diubah pula ukurannya. Ganti lebar awal

}
ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
	display:block;
	zoom:1;
	_width:68.25px;
	float: left;
}


menjadi

}
ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
	display:block;
	zoom:1;
	_width:105px;
	float: left;
}


Setelah itu, jangan lupa tambahkan item baru "Sistem Transaksi" dari yang sebelumnya

<!-- Start PureCSSMenu.com MENU -->
<ul class="pureCssMenu pureCssMenum">
	<li class="pureCssMenui"><a class="pureCssMenui" href="#">Product</a></li>
</ul>


menjadi

<!-- Start PureCSSMenu.com MENU -->
<ul class="pureCssMenu pureCssMenum">
	<li class="pureCssMenui"><a class="pureCssMenui" href="#">Product</a></li>
	<li class="pureCssMenui"><a class="pureCssMenui" href="#">Sistem Transaksi</a></li>
</ul>
<a id="pcm" href="http://www.purecssmenu.com/">CSS Drop Down Menu by PureCSSMenu.com</a>
<!-- End PureCSSMenu.com MENU -->
Nantinya akan berubah seperti di pada gambar di samping. Jadi penambahan Menu tinggal menaruh kode di bawah menu sebelumnya (yang dicetak tebal)

Menambahkan Link Pada Menu / Item

Untuk menambahkan link pada item tinggal menaruhkan kode link pada kode link item (#) yang sebelumnya kayak gini :

<!-- Start PureCSSMenu.com MENU -->
<ul class="pureCssMenu pureCssMenum">
	<li class="pureCssMenui"><a class="pureCssMenui" href="#">Product</a></li>
	<li class="pureCssMenui"><a class="pureCssMenui" href="#">Sistem Transaksi</a></li>
</ul>
<a id="pcm" href="http://www.purecssmenu.com/">CSS Drop Down Menu by PureCSSMenu.com</a>
<!-- End PureCSSMenu.com MENU -->


menjadi seperti ini

<!-- Start PureCSSMenu.com MENU -->
<ul class="pureCssMenu pureCssMenum">
	<li class="pureCssMenui"><a class="pureCssMenui" href="#">Product</a></li>
	<li class="pureCssMenui"><a class="pureCssMenui" href="http://masteronlinestore.blogspot.com/2011/02/sistem-trasaksi.html" target="_blank">Sistem Transaksi</a></li>
</ul>
<a id="pcm" href="http://www.purecssmenu.com/">CSS Drop Down Menu by PureCSSMenu.com</a>
<!-- End PureCSSMenu.com MENU -->


Mudah bukan? Untuk warna, font, serta luasan silahkan pelajari sendiri yak. Tinggal ubah aja jenis font, colour, dan widhtnya sesuai dengan kebutuhan sampeyan.Nah, kalau sempat akan saya jabarkan untuk case dua colom item.

Tidak ada komentar:

Posting Komentar