Cara Membuat Menu Horizontal Dengan CSS
Sebagian besar sudah banyak sobat blogger mengetahui bagaimana cara membuat menu horizontal, dan sudah banyak dibahas pada blog-blog sobat mengenai menu horizontal baik itu cara membuat atau meletakkan pada template.
Disini saya akan sedikit mengulas cara membuat menu horizontal sederhana dengan CSS dan sedikit berbagi apa yang saya ketahui kepada sobat blogger yang baru memulai untuk membuat blog… :)
Ok langsung saja tanpa banyak cerita, berikut langkah-langkahnya :
Disini saya akan sedikit mengulas cara membuat menu horizontal sederhana dengan CSS dan sedikit berbagi apa yang saya ketahui kepada sobat blogger yang baru memulai untuk membuat blog… :)
Ok langsung saja tanpa banyak cerita, berikut langkah-langkahnya :
Membuat kode CSS nya seperti gambar diatas yang perlu sedikit kita ketahui bahwa kode CSS ditulis dengan banyak cara salah satu cara metode penulisan seperti yang saya buat berikut ini, dan kode tersebut pada umumnya diletakkan antara kode
<head> dan </head> dan biasanya diletakkan diatas kode ]]></b:skin><style type="text/css" media="screen">
.menu_hor {
float:left;
padding:0;
margin:100px 70px
color:#FFFFFF;
background:#000000;
width:100%;
border:solid 1px #000000;
clear:both;
}
/*warna menu horizontal normal*/
.menu_hor a,
.menu_hor a:visited {
font-family:Arial, Helvetica, sans-serif;
font-style:normal;
font-weight:normal;
font-size:12px;
color:#FFFFFF;
background-color:#000000;
text-decoration:none;
}
.menu_hor ul {
list-style-type:none;
padding:0; margin:0;
}
.menu_hor ul li {
float:left;
position:relative;
z-index:auto !important;
z-index:1000;
border-right:solid 1px #000000;
border-left:solid 1px #000000;
}
.menu_hor ul li a {
color: #FFFFFF;
background: #000000;
float:none !important;
float:left;
display:block;
height:30px;
line-height:30px;
padding:0 10px 0 10px;
text-decoration:none;
}
.menu_hor ul li ul {
display:none;
border:none;
color: #FFFFFF;
background: #000000;
width:1px
}
.menu_hor ul li:hover a {
background-color:#FFFF00;
text-decoration:none;
color:#000000; /*warna hovering main cells*/
}
.menu_hor ul li:hover ul {
display:block;
position:absolute;
z-index:999;
top:29px;
margin-top:1px;
left:0;
}
.menu_hor ul li:hover ul li a {
display:block;
width:12em;
height:auto;
line-height:1.3em;
margin-left:-1px;
padding:5px 10px 5px 10px;
border-left:solid 1px #000000;
border-bottom: solid 1px #000000;
background-color:#0000FF;
color:#FFFFFF; /*pemberian warna subcells*/
}
.menu_hor ul li:hover ul li a:hover {
background-color:#CA0000;
text-decoration:none;
color:#FFFF00; /*warna hover pada subcells*/
}
.menu_hor ul li a:hover {
background-color:#FFFF00;
text-decoration:none;
color:#000000; /*warna hovering main cells*/
}
.menu_hor ul li a:hover ul {
display:block;
width:12em;
position:absolute;
z-index:999;
top:29px;
left:0;
}
.menu_hor ul li ul li a:visited {
background-color:#0000FF;
color:#FFFFFF; /*warna subcells keadaan normal*/
}
.menu_hor ul li a:hover ul li a {
display:block;
width:12em;
height:1px;
line-height:1.3em;
padding:4px 16px 4px 16px;
border-left:solid 1px #000000;
border-bottom: solid 1px #000000;
background-color:#0000FF;
color:#FFFFFF;
}
.menu_hor ul li a:hover ul li a:hover {
background-color:#CA0000;
text-decoration:none;
color:#FFFF00; /*warna subcells hovering mode*/
}
</style>
Membuat kode untuk memanggil dan menampilkan pada layout template kode CSS sebagai berikut :
.menu_hor {
float:left;
padding:0;
margin:100px 70px
color:#FFFFFF;
background:#000000;
width:100%;
border:solid 1px #000000;
clear:both;
}
/*warna menu horizontal normal*/
.menu_hor a,
.menu_hor a:visited {
font-family:Arial, Helvetica, sans-serif;
font-style:normal;
font-weight:normal;
font-size:12px;
color:#FFFFFF;
background-color:#000000;
text-decoration:none;
}
.menu_hor ul {
list-style-type:none;
padding:0; margin:0;
}
.menu_hor ul li {
float:left;
position:relative;
z-index:auto !important;
z-index:1000;
border-right:solid 1px #000000;
border-left:solid 1px #000000;
}
.menu_hor ul li a {
color: #FFFFFF;
background: #000000;
float:none !important;
float:left;
display:block;
height:30px;
line-height:30px;
padding:0 10px 0 10px;
text-decoration:none;
}
.menu_hor ul li ul {
display:none;
border:none;
color: #FFFFFF;
background: #000000;
width:1px
}
.menu_hor ul li:hover a {
background-color:#FFFF00;
text-decoration:none;
color:#000000; /*warna hovering main cells*/
}
.menu_hor ul li:hover ul {
display:block;
position:absolute;
z-index:999;
top:29px;
margin-top:1px;
left:0;
}
.menu_hor ul li:hover ul li a {
display:block;
width:12em;
height:auto;
line-height:1.3em;
margin-left:-1px;
padding:5px 10px 5px 10px;
border-left:solid 1px #000000;
border-bottom: solid 1px #000000;
background-color:#0000FF;
color:#FFFFFF; /*pemberian warna subcells*/
}
.menu_hor ul li:hover ul li a:hover {
background-color:#CA0000;
text-decoration:none;
color:#FFFF00; /*warna hover pada subcells*/
}
.menu_hor ul li a:hover {
background-color:#FFFF00;
text-decoration:none;
color:#000000; /*warna hovering main cells*/
}
.menu_hor ul li a:hover ul {
display:block;
width:12em;
position:absolute;
z-index:999;
top:29px;
left:0;
}
.menu_hor ul li ul li a:visited {
background-color:#0000FF;
color:#FFFFFF; /*warna subcells keadaan normal*/
}
.menu_hor ul li a:hover ul li a {
display:block;
width:12em;
height:1px;
line-height:1.3em;
padding:4px 16px 4px 16px;
border-left:solid 1px #000000;
border-bottom: solid 1px #000000;
background-color:#0000FF;
color:#FFFFFF;
}
.menu_hor ul li a:hover ul li a:hover {
background-color:#CA0000;
text-decoration:none;
color:#FFFF00; /*warna subcells hovering mode*/
}
</style>
Sobat perhatikan bahwa penulisan CSS ditulis diawali tag pembuka
Penulisan .menu_hor sebenarnya tidak mutlak dalam artian sobat bisa menggantinya dengan kata-kata lain seperti contoh misalnya .menu_horizontal atau .menuku dengan catatan bahwa pada saat menulis kode pemanggil sobat mesti konsisten dengan perubahan tersebut.
<style type="text/css" media="screen"> dan diakhiri tag penutup </style>. Penulisan .menu_hor sebenarnya tidak mutlak dalam artian sobat bisa menggantinya dengan kata-kata lain seperti contoh misalnya .menu_horizontal atau .menuku dengan catatan bahwa pada saat menulis kode pemanggil sobat mesti konsisten dengan perubahan tersebut.
<div class="menu_hor">
<ul><li><a href="#">Home</a>
</li></ul>
<ul><li><a href="#">new_item1</a>
</li></ul>
<ul><li><a href="#">new_item2</a>
</li></ul>
<ul><li><a href="#">new_item3</a>
</li></ul>
<ul><li><a href="#">new_item3</a>
</div>
<ul><li><a href="#">Home</a>
</li></ul>
<ul><li><a href="#">new_item1</a>
</li></ul>
<ul><li><a href="#">new_item2</a>
</li></ul>
<ul><li><a href="#">new_item3</a>
</li></ul>
<ul><li><a href="#">new_item3</a>
</div>
Penggunaan kode untuk memanggil kode CSS biasanya penulisannya didahului tag pembuka
<div class="menu_hor"> dan diakhiri tag penutup </div>. div clss=”menu_hor” yang saya maksud tadi pada pembahasan bagian pertama bahwa antara kode CSS dan kode pemanggil mesti dalam keadaan satu clas dalam hal ini kode CSS dan pemanggil berada dalam clss menu_hor. Mudah bukan cara membuat menu horizontal, adapun dengan nilai-nilainya silahkan sobat berkreasi. Contoh diatas adalah dasar cara membuat menu horizontal. Untuk bagaimana cara memodifikasi silahkan googling dan banyak sobat-sobat blogger membahas cara memodifikasi menu horizontal dengan CSS. Selamat mencoba.
Tidak ada komentar:
Posting Komentar