Cara Membuat Menu Vertikal Dengan CSS
Dikirim oleh Andi Syam
Minggu, 02 Januari 2011
10 Komentar
Post views:
Pada tutorial kali ini saya akan membahas "Cara Membuat Menu Vertikal Dengan CSS" seperti gambar disamping, sama halnya dengan pembahasan sebelumnya yaitu "cara membuat menu horizontal" bedanya susunan link-link yang berada pada menu tersusun kebawah. Ok langsung olah tekape.. :DSebelum menerapkan pada template sobat, sebaiknya kode-kode css yang kita akan buat sebaiknya dibuatnya diluar template dalam hal ini saya menggunakan notepad dalam menulis kode CSS nya berikut kode CSS nya :
<style type="text/css">
#menu_ver ul {
list-style: none;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
text-decoration: none;
}
#menu_ver {
width: 200px;
margin: 10px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #FF0000;
border-right-color: #FF0000;
border-bottom-color: #FF0000;
border-left-color: #FF0000;
}
#menu_ver li a {
text-decoration: none;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-bottom-color: #FF0000;
}
#menu_ver .notopbrdr0xNone {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#menu_ver li a:link, #menu_ver li a:visited {
color: #FFFFFF;
display: block;
background-color: #000000;
padding-top: 3px;
padding-right: 0;
padding-bottom: 3px;
padding-left: 10px;
}
#menu_ver li a:hover {
color: #FFFF00;
background: #008000;
padding-top: 3px;
padding-right: 0;
padding-bottom: 3px;
padding-left: 10px;
}
</style>
#menu_ver ul {
list-style: none;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
text-decoration: none;
}
#menu_ver {
width: 200px;
margin: 10px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #FF0000;
border-right-color: #FF0000;
border-bottom-color: #FF0000;
border-left-color: #FF0000;
}
#menu_ver li a {
text-decoration: none;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-bottom-color: #FF0000;
}
#menu_ver .notopbrdr0xNone {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#menu_ver li a:link, #menu_ver li a:visited {
color: #FFFFFF;
display: block;
background-color: #000000;
padding-top: 3px;
padding-right: 0;
padding-bottom: 3px;
padding-left: 10px;
}
#menu_ver li a:hover {
color: #FFFF00;
background: #008000;
padding-top: 3px;
padding-right: 0;
padding-bottom: 3px;
padding-left: 10px;
}
</style>
Belum sampai disini, lanjut untuk memanggil SCC nya penulisan kodenya sebagai berikut :
<div id="menu_ver">
<ul>
<li><a href="/">Home</a></li>
<li><a href="#">new_item</a></li>
<li><a href="#">new_item</a></li>
<li><a href="#">new_item</a></li>
<li><a href="#">new_item</a></li>
</ul>
</div>
<ul>
<li><a href="/">Home</a></li>
<li><a href="#">new_item</a></li>
<li><a href="#">new_item</a></li>
<li><a href="#">new_item</a></li>
<li><a href="#">new_item</a></li>
</ul>
</div>
Silahkan sobat ganti "#" dan "new_item" dengan alamat dan nama label yang lain sesuai label yang sobat akan dimunculkan.
Sekian pembahasan cara membuat menu secara vertical, untuk penjelasan mengenai tag dan nilai pada kode css silahkan sobat review "cara membuat menu horizontal"… :)
| Tweet |
Article Information :
Reviewer : Andi Syam
Description : Cara Membuat Menu Vertikal Dengan CSS
Item Reviewed : Cara Membuat Menu Vertikal Dengan CSS
Rating : 4.5
Incoming search : Tutorial Blogger , Cara Membuat Menu Vertikal Dengan CSS
Reviewer : Andi Syam
Description : Cara Membuat Menu Vertikal Dengan CSS
Item Reviewed : Cara Membuat Menu Vertikal Dengan CSS
Rating : 4.5
Incoming search : Tutorial Blogger , Cara Membuat Menu Vertikal Dengan CSS
10 Komentar untuk "Cara Membuat Menu Vertikal Dengan CSS" | Tambahkan komentar
ditunggu CSS selanjutnya Syam !! :)
Salam kenal mas Andisyam, terima kasih sudah berkenan berkunjung ke blog Chyardi, maaf ya terlambat balasnya, oh iya mengenai link blog ini sudah terpasang di blog Chyardi dibagian Link kelompok (B) Belajar Komputer, mohon diperiksa kembali ya.....
Sukses untuk mas Andisyam, semoga blog Belajar Komputer semakin maju dan berkembang.
Om kalau mau buat menu vertikal tapi ada jaraknya, kira2 apa yg mesti di ganti.. mohhon pencerahannya
@mas Digit, thanks mas
@Charyadi, thanks mas, sukses juga ni mas
@Anonim, tentukan nilai marginnya gan di CSS-nya, semoga membantu..
sipp,....
@SANTRI MBELING< thanks kunjungan serta komentarnya gan :)
gimana cara nibanya kk gabungin scriptny gan .. da ane buat 2 file... gimana koneksikannya mksh
kalo warna menunya pengen gradien, gimana om?
@chox, ganti aja nilainya pada code color, untuk kode warna bisa dilihat di http://www.colorschemer.com/online.html
terima kasih tutor nya gan...
ane lagi buat tugas mid web gan..
keep blogwalking
Sampaikan Pesan Sobat yang sesuai dengan materi yang diposting...Don't Spam