25 Kumpulan Menu Navigasi Vertikal Untuk Blogger

Setelah sebelumnya saya posting 30 kumpulan menu navigasi horizontal untuk blogger sekarang saya akan posting cara memebuat menu navigasi vertikal dengan 25 pilihan. Kalo postingan sebelumnya dari hasil mengumpulkan dari postingan-postingan blogger lain, kali ini juga sama postingan ini saya dapat dari postingan blogger lain dan saya kumpulkan menjadi 25 kumpulan menu navigasi vertikal untuk blogger, nah bagi yang tertarik sobat bisa baca terus artikel saya ini.

Cara Memasang Menu Navigasi Vertikal di Blog

Proses pemasangan kode menu navigasi vertikal ini sangat seder hana sobat cukup ikuti langkah dan penjelasan di bawah ini.

• Sobat masuk ke akun blog sobat
• Back-up terlebih dahulu template anda

Kode ini saya bagi menjadi dua bagian yang pertama kode CSS yang berguna untuk mengatur tampilan dan style menu navigasi vertikal dan yang ke dua kode HTML yang berfungsi sebagai tata tempat dimana menu itu akan sobat simpan.

• Copy kode CSS menu yang sobat pilih dari 25 pilihan menu navigasi vertikal di bawah dan simpan kode itu tepat di atas kode ]]></b:skin>
• Untuk kode HTML-nya ada tiga pilihan untuk cara penyimpanannya

1. Jika anda memiliki sidebar di kana sobat simpan kode HTML di bawah kode ini <div id='sidebar-wrapper'>  atau  <div id='sidebar-wrapper-right'>
2. Jika sidebar blog sobat di sebelah kiri sobat simpan kode HTML di bawah kode <div id='sidebar-wrapper-left'>
3. Semua kode di atas tidak sama di semua template blogger jika sobat tidak mau pusing mencari kode yang berbeda tersebut sobat beralih ke Elemen Laman => Tambah Gadget => HTML/Javascript masukan kode HTML Menu navigasi vertikal yang sobat sukai.

• Dan lihat hasilnya menu navigasi vertikal sudak terpasang di blog sobat.

Mengedit atau Menambahkan Link ke Menu Navigasi Vertikal

Untuk mengubah link dan judul pada menu navigasi ini sobat cukup ganti kode seperti di bawah ini pada kode HTML menu yang sobat pilih.

<li><a href="#1" >Link 1</a></li>
<li><a href="#2" >Link 2</a></li>
<li><a href="#3" >Link 3</a></li>
<li><a href="#4" >Link 4</a></li>
<li><a href="#5" >Link5</a></li>

Ganti #1, #2, #3 dst dengan link page URL/ Link dari menu navigasi dan ganti kode link 1, link 2, link 3 dst dengan judul atau nama menu navigasinya. Jika sobat ingin menghapus atau menambahkan menu navigasinya tinggal hapus atau tambahkan kode berikut.

<li><a href="#" >Judul</a></li> 

Jika sobat ingin melihat demonya sobat silahkan copy kode CSS dan HTML dari menu navigasi yang sobat pilih di bawah dan masuk ke HTML Editor BUS paste di tempat yang di sediakan dan lihat priview-nya.

Menu Navigasi Vertikal #1

Kode CSS :

 #menu6 ul { list-style: none; margin: 0; padding: 0; } #menu6 img { border: none; } #menu6 { width: 200px; margin: 10px; } #menu6 li a { font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu6 li a:link, #menu6 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzlBGt87MofPTPlgvsCQqragc97OSf2FObIPp_sYdrXjsbcPKiTsurBVDnPTXxA7NJfXjhRCechhAYNL_I5vEnhxOzROOdestwEzeUKwZeZVgzLG3BqCH7nLcjNdGInL0B39tYdfUCTdY/s800/menu6.gif); padding: 8px 0 0 20px; } #menu6 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzlBGt87MofPTPlgvsCQqragc97OSf2FObIPp_sYdrXjsbcPKiTsurBVDnPTXxA7NJfXjhRCechhAYNL_I5vEnhxOzROOdestwEzeUKwZeZVgzLG3BqCH7nLcjNdGInL0B39tYdfUCTdY/s800/menu6.gif) 0 -32px; padding: 8px 0 0 20px; } 

Kode HTML :

 <div id="menu6"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu Navigasi Vertikal #2

Kode CSS :

#menu3 ul { list-style: none; margin: 0; padding: 0; } #menu3 img { border: none; } #menu3 { width: 200px; border: 1px solid #ccc; margin: 10px; } #menu3 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu3 li a:link, #menu3 li a:visited { color: #888; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjynqVIlSaCmn23VgTZl4SK6O9dfq8RguZnHIiRaeM_ttAFTTluofyGm1nKGuCCcGmIendvbH7Kn_MGBw7Si_V2s7mfwrSo0Snx9GA-5kP2w6rUhhv0Z6q2RwockMUNHN9jz1VxgAGwE4s/s800/menu3.gif); padding: 8px 0 0 30px; } #menu3 li a:hover, #menu3 li #current, #menu3 li a:active { color: #283A50; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjynqVIlSaCmn23VgTZl4SK6O9dfq8RguZnHIiRaeM_ttAFTTluofyGm1nKGuCCcGmIendvbH7Kn_MGBw7Si_V2s7mfwrSo0Snx9GA-5kP2w6rUhhv0Z6q2RwockMUNHN9jz1VxgAGwE4s/s800/menu3.gif) 0 -32px; padding: 8px 0 0 30px; }

Kode HTML :

<div id="menu3"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu Navigasi Vertikal #3

Kode CSS :

#menu9 ul { list-style: none; margin: 0; padding: 0; } #menu9 img { border: none; } #menu9 { width: 200px; margin: 10px; } #menu9 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu9 li a:link, #menu9 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpeIv1E9qqWp944f-kUCq7dmq9dnBLe-XyqNYYKVdsOlgjnAYkNYJZVn2IgRk-t1f0i7nC4X13fKQ3-SR3MM4x7SWYAKsl6fdYWVPL3PIvaFpP1T7rNFlRCAmDbkwWYiKvBNM81uN-uBw/s800/menu9.gif); padding: 8px 0 0 35px; } #menu9 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpeIv1E9qqWp944f-kUCq7dmq9dnBLe-XyqNYYKVdsOlgjnAYkNYJZVn2IgRk-t1f0i7nC4X13fKQ3-SR3MM4x7SWYAKsl6fdYWVPL3PIvaFpP1T7rNFlRCAmDbkwWYiKvBNM81uN-uBw/s800/menu9.gif) 0 -32px; padding: 8px 0 0 35px; }

Kode HTML :

<div id="menu9"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu Navigasi Vertikal #4

Kode CSS :

 #menu6 ul { list-style: none; margin: 0; padding: 0; } #menu6 img { border: none; } #menu6 { width: 200px; margin: 10px; } #menu6 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu6 li a:link, #menu6 li a:visited { color: #8D9179; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQJGTvp93Fn1EGYzGlRYpIZmxeMksQ20f6XvOEBe5CtWQWlkNsFHXcRuAgnf7Y4gICaL9NzWfWDplX9IvsSqxJg8BXqMMwhINf3VJxU1W2vmyISxQEd_euwe_j2XWRquXh3CQy8tnXBVU/s800/menu6.gif); padding: 8px 0 0 10px; } #menu6 li a:hover, #menu6 li #current, #menu6 li a:active { color: #6C7250; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQJGTvp93Fn1EGYzGlRYpIZmxeMksQ20f6XvOEBe5CtWQWlkNsFHXcRuAgnf7Y4gICaL9NzWfWDplX9IvsSqxJg8BXqMMwhINf3VJxU1W2vmyISxQEd_euwe_j2XWRquXh3CQy8tnXBVU/s800/menu6.gif) 0 -32px; padding: 8px 0 0 10px; }

Kode HTML :

<div id="menu6"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu Navigasi Vertikal #5

Kode CSS :

 #menu7 ul { list-style: none; margin: 0; padding: 0; } #menu7 img { border: none; } #menu7 { width: 200px; margin: 10px; } #menu7 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu7 li a:link, #menu7 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMyVOs8ushv-c2OJp__w8SMrsXE6amEMO_1y9gROjb5rogxIRYlpAEYwuo7zG4jTE3C3s85MqXeqKO9dJwdQ5kRAxm22lmWDuVqCJYdavaXMIgY5nnROIG0pUADyRzmUdGzLFkf6tVdMw/s800/menu7.gif); padding: 8px 0 0 30px; } #menu7 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMyVOs8ushv-c2OJp__w8SMrsXE6amEMO_1y9gROjb5rogxIRYlpAEYwuo7zG4jTE3C3s85MqXeqKO9dJwdQ5kRAxm22lmWDuVqCJYdavaXMIgY5nnROIG0pUADyRzmUdGzLFkf6tVdMw/s800/menu7.gif) 0 -32px; padding: 8px 0 0 30px; }

Kode HTML :

<div id="menu7"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu Navigasi Vertikal #6 

Kode CSS :

#menu2 ul { list-style: none; margin: 0; padding: 0; } #menu2 img { border: none; } #menu2 { width: 200px; border-style: solid solid none solid; border-color: #677D92; border-size: 1px; border-width: 1px; margin: 10px; } #menu2 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu2 li a:link, #menu2 li a:visited { color: #fff; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpRMJxEyFwvLlalurRryC_3FoI9V3lDoh_Kj9yhUFak6Bu5lCdNTQmqjVHiscqbSezwE-RZT_d6EYwFfEBEcwuL8HMrBLijmaL1Hd6NlYeHpGQ8jp8Nte55tMNqnaPA1WF-WoTodywAp0/s800/menu2.gif); padding: 8px 0 0 10px; } #menu2 li a:hover, #menu2 li #current { color: #283A50; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpRMJxEyFwvLlalurRryC_3FoI9V3lDoh_Kj9yhUFak6Bu5lCdNTQmqjVHiscqbSezwE-RZT_d6EYwFfEBEcwuL8HMrBLijmaL1Hd6NlYeHpGQ8jp8Nte55tMNqnaPA1WF-WoTodywAp0/s800/menu2.gif) 0 -32px; padding: 8px 0 0 10px; } #menu2 li a:active { color: #283A50; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpRMJxEyFwvLlalurRryC_3FoI9V3lDoh_Kj9yhUFak6Bu5lCdNTQmqjVHiscqbSezwE-RZT_d6EYwFfEBEcwuL8HMrBLijmaL1Hd6NlYeHpGQ8jp8Nte55tMNqnaPA1WF-WoTodywAp0/s800/menu2.gif) 0 -64px; padding: 8px 0 0 10px; }

Kode HTML :

<div id="menu2"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu Navigasi Vertikal #7

Kode CSS :

#menu14 ul { list-style: none; margin: 0; padding: 0; } #menu14 img { border: none; } #menu14 { width: 200px; margin: 10px; } #menu14 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu14 li a:link, #menu14 li a:visited { color: #fff; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzGr8YGLGeiRsVEdMjPVqKm7njYbxRLqcyiQPrsAmRttluuh6kUCAbv_0-13tbEFiQjsofew_SJNsKGhLC7yCmO5npmkv-JshLEsWRqAzrwLsj7DR2nLtDrP88drWOS6-eN6GUn-aymAQ/s800/menu14.gif) 0 -32px; padding: 8px 0 0 10px; } #menu14 li a:hover { color: #333; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzGr8YGLGeiRsVEdMjPVqKm7njYbxRLqcyiQPrsAmRttluuh6kUCAbv_0-13tbEFiQjsofew_SJNsKGhLC7yCmO5npmkv-JshLEsWRqAzrwLsj7DR2nLtDrP88drWOS6-eN6GUn-aymAQ/s800/menu14.gif); padding: 8px 0 0 10px; }

Kode HTML :

<div id="menu14"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu Navigasi Vertikal #8 

Kode CSS :

 #menu9 ul { list-style: none; margin: 0; padding: 0; } #menu9 img { border: none; } #menu9 { width: 200px; margin-top: 10px; } #menu9 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu9 li a:link, #menu9 li a:visited { color: #E5E8D4; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5FWKc74eQwXn2Rn6HtY6nreN_Y_k6ihCHsvroGte1JpgLpAz8mF-Evi2eZddw5aWlm1QMh2LbL667h-SY_Bczuq9s_a9oGp3ixLUl_9ztB1g59MFxvAY18V6mO7Pp-raHGLWtQE5xwP0/s800/menu9.gif); padding: 8px 0 0 10px; } #menu9 li a:hover, #menu9 li #current { color: #725033; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5FWKc74eQwXn2Rn6HtY6nreN_Y_k6ihCHsvroGte1JpgLpAz8mF-Evi2eZddw5aWlm1QMh2LbL667h-SY_Bczuq9s_a9oGp3ixLUl_9ztB1g59MFxvAY18V6mO7Pp-raHGLWtQE5xwP0/s800/menu9.gif) 0 -32px; padding: 8px 0 0 10px; } #menu9 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5FWKc74eQwXn2Rn6HtY6nreN_Y_k6ihCHsvroGte1JpgLpAz8mF-Evi2eZddw5aWlm1QMh2LbL667h-SY_Bczuq9s_a9oGp3ixLUl_9ztB1g59MFxvAY18V6mO7Pp-raHGLWtQE5xwP0/s800/menu9.gif) 0 -64px; padding: 8px 0 0 10px; }

Kode HTML :

<div id="menu9"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu Navigasi Vertikal #9 

Kode CSS :

#menu12 ul { list-style: none; margin: 0; padding: 0; } #menu12 img { border: none; } #menu12 { width: 200px; margin: 10px; } #menu12 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 22px; text-decoration: none; } #menu12 li a:link, #menu12 li a:visited { color: #666; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfWMfvb0adSTf_NYy-cVTpuJCcYRgOWP0tQ6gZPur5p8eWnOhZSCwYZ5HdbPEusYqaetwIExF19st-CmAhdSGmh5d4bqx2dBrOP17oo7by_L8uq4HDLtqgIjIEYe0JtEP3hBmixi1j5DI/s800/menu12.gif); padding: 10px 0 0 35px; } #menu12 li a:hover { color: #000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfWMfvb0adSTf_NYy-cVTpuJCcYRgOWP0tQ6gZPur5p8eWnOhZSCwYZ5HdbPEusYqaetwIExF19st-CmAhdSGmh5d4bqx2dBrOP17oo7by_L8uq4HDLtqgIjIEYe0JtEP3hBmixi1j5DI/s800/menu12.gif) 0 -32px; padding: 10px 0 0 35px; } 

Kode HTML :

<div id="menu12"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu Navigasi Vertikal #10 

Kode CSS :

#menu13 ul { list-style: none; margin: 0; padding: 0; } #menu13 img { border: none; } #menu13 { width: 200px; margin: 10px; } #menu13 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu13 li a:link, #menu13 li a:visited { color: #C7377D; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ-lAu0wPQuMP7a1NYZXCNx34Qq1xLnWSkjNKkZ-MVuThlz-4CMLdDsAu1aOfa8XeTXHK_64GKTXwNkmxMvA3GokJvgwfiOYdJ6uFnEoFvpJXFEgkM2Lv_y1eE_QqbfVj2_t-v7LOpBfM/s800/menu13.gif); padding: 8px 0 0 10px; } #menu13 li a:hover { color: #C7377D; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ-lAu0wPQuMP7a1NYZXCNx34Qq1xLnWSkjNKkZ-MVuThlz-4CMLdDsAu1aOfa8XeTXHK_64GKTXwNkmxMvA3GokJvgwfiOYdJ6uFnEoFvpJXFEgkM2Lv_y1eE_QqbfVj2_t-v7LOpBfM/s800/menu13.gif) 0 -32px; padding: 8px 0 0 10px; }

Kode HTML :

<div id="menu13"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu Navigasi Vertikal #11

Kode CSS :

 #menu4 ul { list-style: none; margin: 0; padding: 0; } #menu4 img { border: none; } #menu4 { width: 200px; border-style: solid solid none solid; border-color: #D76100; border-size: 1px; border-width: 1px; margin: 10px; } #menu4 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu4 li a:link, #menu4 li a:visited { color: #9E3C02; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdDTOl1a19QraHcPt5KgxD27blVS4ondVoIFXyZ1kUQfMrhwxjv3Y9egMwFdJcVxj8jVAWbbiWdXuJmH8kmVrXuRZHWLuDDhga92zYYhcIF62WGzfeJvmyV8q1NrS5WtRexK9vLpnc99s/s800/menu4.gif); padding: 8px 0 0 30px; } #menu4 li a:hover, #menu4 li #current { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdDTOl1a19QraHcPt5KgxD27blVS4ondVoIFXyZ1kUQfMrhwxjv3Y9egMwFdJcVxj8jVAWbbiWdXuJmH8kmVrXuRZHWLuDDhga92zYYhcIF62WGzfeJvmyV8q1NrS5WtRexK9vLpnc99s/s800/menu4.gif) 0 -32px; padding: 8px 0 0 30px; } #menu4 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdDTOl1a19QraHcPt5KgxD27blVS4ondVoIFXyZ1kUQfMrhwxjv3Y9egMwFdJcVxj8jVAWbbiWdXuJmH8kmVrXuRZHWLuDDhga92zYYhcIF62WGzfeJvmyV8q1NrS5WtRexK9vLpnc99s/s800/menu4.gif) 0 -64px; padding: 8px 0 0 30px; }

Kode HTML :

<div id="menu4"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu Navigasi Vertikal #12 

Kode CSS :

#navlist { color: white; background: #17a; border-bottom: 0.2em solid #17a; border-right: 0.2em solid #17a; padding: 0 1px; margin-left: 0; width: 12em; font: normal 10px Verdana, sans-serif; } #navlist li { list-style: none; margin: 0; font-size: 1em; } #navlist a { display: block; text-decoration: none; margin-bottom: 0.5em; margin-top: 0.5em; color: white; background: #39c; border-width: 1px; border-style: solid; border-color: #5bd #035 #068 #6cf; border-left: 1em solid #fc0; padding: 0.25em 0.5em 0.4em 0.75em; } #navlist a#current { border-color: #5bd #035 #068 #f30; } #navlist a { width: 99%; /* only necessary for Internet Explorer */ } #navlist a { voice-family: "\"}\""; voice-family: inherit; width: 9.6em; /* Tantek-hack should only used if Internet-Explorer 6 is in standards-compliant mode */ } #navcontainer>#navlist a { width: auto; /* only necessary if you use the hacks above for the Internet Explorer */ } #navlist a:hover, #navlist a#current:hover { background: #28b; border-color: #069 #6cf #5bd #fc0; padding: 0.4em 0.35em 0.25em 0.9em; } #navlist a:active, #navlist a#current:active { background: #17a; border-color: #069 #6cf #5bd white; padding: 0.4em 0.35em 0.25em 0.9em; }

Kode HTML :

 <div id="navcontainer"> <ul id="navlist"> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu Navigasi Vertikal #13 

Kode CSS :

 #menu8 ul { list-style: none; margin: 0; padding: 0; } #menu8 img { border: none; } #menu8 { width: 200px; margin-top: 10px; } #menu8 li a { text-decoration: none; height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; } #menu8 li a:link, #menu8 li a:visited { color: #777; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizHzzDtuWmChlgPai3qD3LnEnNXCq8AU8kfC9YnroqMST5_O3ieyNFuvrXLCGjh1wGmawBBKYSvDjy5T4g5jXcDYSX3J2yeOvo9zazkp6cW-QE7GVhAVHBVHdBh3MgC9WnXUILtbBgljE/s800/menu8.gif); padding: 8px 0 0 20px; } #menu8 li a:hover, #menu8 li #current { color: #257EB7; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizHzzDtuWmChlgPai3qD3LnEnNXCq8AU8kfC9YnroqMST5_O3ieyNFuvrXLCGjh1wGmawBBKYSvDjy5T4g5jXcDYSX3J2yeOvo9zazkp6cW-QE7GVhAVHBVHdBh3MgC9WnXUILtbBgljE/s800/menu8.gif) 0 -32px; padding: 8px 0 0 25px; } #menu8 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizHzzDtuWmChlgPai3qD3LnEnNXCq8AU8kfC9YnroqMST5_O3ieyNFuvrXLCGjh1wGmawBBKYSvDjy5T4g5jXcDYSX3J2yeOvo9zazkp6cW-QE7GVhAVHBVHdBh3MgC9WnXUILtbBgljE/s800/menu8.gif) 0 -64px; padding: 8px 0 0 25px; }

Kode HTML :

<div id="menu8"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu Navigasi Vertikal #14 

Kode CSS :

#menu8 ul { list-style: none; margin: 0; padding: 0; } #menu8 img { border: none; } #menu8 { width: 200px; margin: 10px; border-style: solid; border-color: #656556; border-size: 1px; border-width: 1px; } #menu8 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu8 li a:link, #menu8 li a:visited { color: #656556 ; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV3w5Ikgfj2gOEA3pufUVOxr9ULcSehnD57NXQAQ_wStf35A1BOMZUujLQP6DaQVaNSV7iAkBBQfElDNIygMZ6f9RPjKJb6MaAB9i2Eesu0qc_47QOIbT6m3pQwZ4JEF1rCoF4zgArREQ/s800/menu8.gif) ; padding: 8px 0 0 20px; } #menu8 li a:hover { color: #474739; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV3w5Ikgfj2gOEA3pufUVOxr9ULcSehnD57NXQAQ_wStf35A1BOMZUujLQP6DaQVaNSV7iAkBBQfElDNIygMZ6f9RPjKJb6MaAB9i2Eesu0qc_47QOIbT6m3pQwZ4JEF1rCoF4zgArREQ/s800/menu8.gif) 0 -32px; padding: 8px 0 0 20px; }

Kode HTML :

 <div id="menu8"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu Navigasi Vertikal #15 

Kode CSS :

#menu9 body { font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; } #menu1 ul { list-style: none; margin: 0; padding: 0; } #menu1 img { border: none; } #menu1 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #3D261D; border-size: 1px; border-width: 1px; } #menu1 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu1 li a:link, #menu1 li a:visited { color: #E4D6CD; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaUPmHSZqk6_yew8xdksYkfiAzP_X77XnLwQZwTNhTo3NyixBmsGkw_nsrg6VlqIiPOcsfP_7CFVCa9o0HhInH23k5lgbCYnvyB_Gh7dSggihdrjGo_xshZyUc8Pu2wmYGKdHB3owMaNE/s800/menu1.gif); padding: 8px 0 0 10px; } #menu1 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaUPmHSZqk6_yew8xdksYkfiAzP_X77XnLwQZwTNhTo3NyixBmsGkw_nsrg6VlqIiPOcsfP_7CFVCa9o0HhInH23k5lgbCYnvyB_Gh7dSggihdrjGo_xshZyUc8Pu2wmYGKdHB3owMaNE/s800/menu1.gif) 0 -32px; padding: 8px 0 0 10px; }

Kode HTML :

<div id="menu1"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu Navigasi Vertikal #16 

Kode CSS :

#navcontainer { background: #f0e7d7; width: 30%; margin: 0 auto; padding: 1em 0; font-family: georgia, serif; font-size: 13px; text-align: center; text-transform: lowercase; } ul#navlist { text-align: left; list-style: none; padding: 0; margin: 0 auto; width: 70%; } ul#navlist li { display: block; margin: 0; padding: 0; } ul#navlist li a { display: block; width: 100%; padding: 0.5em 0 0.5em 2em; border-width: 1px; border-color: #ffe #aaab9c #ccc #fff; border-style: solid; color: #777; text-decoration: none; background: #f7f2ea; } #navcontainer>ul#navlist li a { width: auto; } ul#navlist li#active a { background: #f0e7d7; color: #800000; } ul#navlist li a:hover, ul#navlist li#active a:hover { color: #800000; background: transparent; border-color: #aaab9c #fff #fff #ccc; }

Kode HTML :

<div id="navcontainer"> <ul id="navlist"> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu Navigasi Vertikal #17 

Kode CSS :

#menu3 ul { list-style: none; margin: 0; padding: 0; } #menu3 img { border: none; } #menu3 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #BCD2E6; border-size: 1px; border-width: 1px; } #menu3 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu3 li a:link, #menu3 li a:visited { color: #8BADCF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZtwUe653sYOOTP6_LXP81wXwSfdb_mmSGT37IVSjDD578u9wISU9nRXcT2ogiJwN8oBvA1XQVhilv7pT_hSaSZrCvbaK80oscx1UY2rK7rQ5cihyN0hDPJAzYc_dKYByDndaTU2VOsX8/s800/menu3.gif); padding: 8px 0 0 10px; } #menu3 li a:hover { color: #627EB7; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZtwUe653sYOOTP6_LXP81wXwSfdb_mmSGT37IVSjDD578u9wISU9nRXcT2ogiJwN8oBvA1XQVhilv7pT_hSaSZrCvbaK80oscx1UY2rK7rQ5cihyN0hDPJAzYc_dKYByDndaTU2VOsX8/s800/menu3.gif) 0 -32px; padding: 8px 0 0 10px; }

Kode HTML :

 <div id="menu3"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu Navigasi Vertikal #18 

Kode CSS :

#menu11 ul { list-style: none; margin: 0; padding: 0; } #menu11 img { border: none; } #menu11 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #889944; border-size: 1px; border-width: 1px; } #menu11 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu11 li a:link, #menu11 li a:visited { color: #889944; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8mRJhzHpk5c0vfjf6tXLEs4b0JC1seofOEZiuO1AhwNPDO2Ug-YDvxRsOUANsu1n_ey4sGaFvE3cnVvXgX-84KOaXimsLLHJZafbzb9lrfYaeGZgvGdXBAbi7C0PhLabGVrOU-3Tiq3g/s400/menu11.gif); padding: 8px 0 0 25px; } #menu11 li a:hover { color: #889944; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8mRJhzHpk5c0vfjf6tXLEs4b0JC1seofOEZiuO1AhwNPDO2Ug-YDvxRsOUANsu1n_ey4sGaFvE3cnVvXgX-84KOaXimsLLHJZafbzb9lrfYaeGZgvGdXBAbi7C0PhLabGVrOU-3Tiq3g/s400/menu11.gif) 0 -32px; padding: 8px 0 0 27px; }

Kode HTML :

<div id="menu11"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu Navigasi Vertikal #19 

Kode CSS :

#button { width: 12em; border-right: 1px solid #000; padding: 0 0 1em 0; margin-bottom: 1em; font-family: Tahoma, Arial, sans-serif; /*'Trebuchet MS', 'Lucida Grande', Verdana, Arial, sans-serif;*/ font-size : 10px; background-color: #90bade; color: #333; } #button ul { list-style: none; margin: 0; padding: 0; border: none; } #button li { border-bottom: 1px solid #90bade; margin: 0; list-style: none; list-style-image: none; } #button li a { display: block; padding: 5px 5px 5px 0.5em; border-left: 10px solid #1958b7; border-right: 10px solid #508fc4; background-color: #2175bc; color: #fff; text-decoration: none; width: 100%; } html>body #button li a { width: auto; } #button li a:hover { border-left: 10px solid #1c64d1; border-right: 10px solid #5ba3e0; background-color: #2586d7; color: #fff; } #button li #active { border-left: 10px solid #1c64d1; border-right: 10px solid #5ba3e0; background-color: #2586d7; color: #fff; }

Kode HTML :

<div id="button"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu Navigasi Vertikal #20 

Kode CSS :

#menu ul { list-style: none; margin: 0; padding: 0; } #menu img { border: none; } #menu { width: 200px; border-style: solid solid none solid; border-color: #94AA74; border-size: 1px; border-width: 1px; margin: 10px; } #menu li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu li a:link, #menu li a:visited { color: #5E7830; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiagxkXrZEQa97jBT0VWXCm3p1T9DXXeiD7kdqGrF3eIrhGe2Wh5fEDIlIK1WmnSOAPaxMc3aWdfcMWkyXJvM0svcsaYRM3KtD4OrCveeaX5SCalFZSXP2-UDUb25WFdYc8b3C7nuamy-I/s800/menu1.gif); padding: 8px 0 0 10px; } #menu li a:hover, #menu li #current { color: #26370A; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiagxkXrZEQa97jBT0VWXCm3p1T9DXXeiD7kdqGrF3eIrhGe2Wh5fEDIlIK1WmnSOAPaxMc3aWdfcMWkyXJvM0svcsaYRM3KtD4OrCveeaX5SCalFZSXP2-UDUb25WFdYc8b3C7nuamy-I/s800/menu1.gif) 0 -32px; padding: 8px 0 0 10px; } #menu li a:active { color: #26370A; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiagxkXrZEQa97jBT0VWXCm3p1T9DXXeiD7kdqGrF3eIrhGe2Wh5fEDIlIK1WmnSOAPaxMc3aWdfcMWkyXJvM0svcsaYRM3KtD4OrCveeaX5SCalFZSXP2-UDUb25WFdYc8b3C7nuamy-I/s800/menu1.gif) 0 -64px; padding: 8px 0 0 10px; }

Kode HTML :

<div id="menu"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu Navigasi Vertikal #21 

Kode CSS :

#menu2 ul { list-style: none; margin: 0; padding: 0; } #menu2 img { border: none; } #menu2 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #D8D5D1; border-size: 1px; border-width: 1px; } #menu2 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu2 li a:link, #menu2 li a:visited { color: #3688BA; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiooKTbv0rbg9mTs18chGlWjCCXFVFf16GaTl3kTz8NeCIJz3cODgXe6HXdN_UMqsY0vR6yOS6klljEGo7xd7tzN0TZPOQV2trOylknfAAWNOa0XssW2hFubbJkIYVQn7dTkI7Ibnud8xw/s800/menu2.gif); padding: 8px 0 0 30px; } #menu2 li a:hover { color: #3688BA; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiooKTbv0rbg9mTs18chGlWjCCXFVFf16GaTl3kTz8NeCIJz3cODgXe6HXdN_UMqsY0vR6yOS6klljEGo7xd7tzN0TZPOQV2trOylknfAAWNOa0XssW2hFubbJkIYVQn7dTkI7Ibnud8xw/s800/menu2.gif) 0 -32px; padding: 8px 0 0 32px; }

Kode HTML :

 <div id="menu2"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu Navigasi Vertikal #22 

Kode CSS :

#menu5 ul { list-style: none; margin: 0; padding: 0; } #menu5 img { border: none; } #menu5 { width: 200px; border-style: none solid none solid; border-color: #D0D0D0; border-width: 1px; margin: 10px; } #menu5 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu5 li a:link, #menu5 li a:visited { color: #777; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPtjOM2uqR3A38GRzloMY_40yYMDpWbkLjy4Ha4YmqHVgPEM3zYZMwszWg_xKGoLamWVMz7Jp9bwtbP1hPC-pKppPa9XQLarcnWlOwfESfBpr_Hm1hj4hNMWl8Om42H6ERPzRx2QA22ZU/s800/menu5.gif); padding: 8px 25px 0 10px; text-align: right; } #menu5 li a:hover, #menu5 li #current { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPtjOM2uqR3A38GRzloMY_40yYMDpWbkLjy4Ha4YmqHVgPEM3zYZMwszWg_xKGoLamWVMz7Jp9bwtbP1hPC-pKppPa9XQLarcnWlOwfESfBpr_Hm1hj4hNMWl8Om42H6ERPzRx2QA22ZU/s800/menu5.gif) 0 -32px; padding: 8px 25px 0 10px; text-align: right; } #menu5 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPtjOM2uqR3A38GRzloMY_40yYMDpWbkLjy4Ha4YmqHVgPEM3zYZMwszWg_xKGoLamWVMz7Jp9bwtbP1hPC-pKppPa9XQLarcnWlOwfESfBpr_Hm1hj4hNMWl8Om42H6ERPzRx2QA22ZU/s800/menu5.gif) 0 -64px; padding: 8px 25px 0 10px; text-align: right; }

Kode HTML :

<div id="menu5"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu Navigasi Vertikal #23 

Kode CSS :

 #menu5 ul { list-style: none; margin: 0; padding: 0; } #menu5 img { border: none; } #menu5 { width: 200px; margin: 10px; } #menu5 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu5 li a:link, #menu5 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUM7bPisBLfUsmA0LDv3xFFDbHgot-K2SDxDXcxWSjiH7Ey0Ltal9QkHuTccTXzrzCeD27YixYlh5vXID2G_IFH-UkVf1vWgK0_nsilnfgBCa4-jt5RIXcCbYnQloHM7QPwmXK1SZ9hA4/s800/menu5.gif); padding: 8px 0 0 10px; } #menu5 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUM7bPisBLfUsmA0LDv3xFFDbHgot-K2SDxDXcxWSjiH7Ey0Ltal9QkHuTccTXzrzCeD27YixYlh5vXID2G_IFH-UkVf1vWgK0_nsilnfgBCa4-jt5RIXcCbYnQloHM7QPwmXK1SZ9hA4/s800/menu5.gif) 0 -32px; padding: 8px 0 0 10px; }

Kode HTML :

<div id="menu5"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu Navigasi Vertikal #24 

Kode CSS :

#menu4 ul { list-style: none; margin: 0; padding: 0; } #menu4 img { border: none; } #menu4 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #000; border-size: 1px; border-width: 1px; } #menu4 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu4 li a:link, #menu4 li a:visited { color: #CCC; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVfGtQ90Y2sWumvWRCLAEsu_DwE99PqnqYmAjpqrCn-Ndnn3Is9pFSAaIdFppAEGdeznoCYB7VGptQ4LGfolqhmTzj536CFpXyKoAU3CqswVRYN7JVP-X2sue2SiBo3P1dWUNl5YcGOCg/s800/menu4.gif); padding: 8px 0 0 10px; } #menu4 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVfGtQ90Y2sWumvWRCLAEsu_DwE99PqnqYmAjpqrCn-Ndnn3Is9pFSAaIdFppAEGdeznoCYB7VGptQ4LGfolqhmTzj536CFpXyKoAU3CqswVRYN7JVP-X2sue2SiBo3P1dWUNl5YcGOCg/s800/menu4.gif) 0 -32px; padding: 8px 0 0 10px; }

Kode HTML :

<div id="menu4"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu Navigasi Vertikal #25 

Kode CSS :

#menu10 ul { list-style: none; margin: 0; padding: 0; } #menu10 img { border: none; } #menu10 { width: 200px; margin: 10px; } #menu10 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu10 li a:link, #menu10 li a:visited { color: #4D4D4D; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNXoaF6MqhWKMEkRGH6mGzP9iPz5XI-x4KAyKjQ7mfUl44JHlgsYBhP8wDGz1KCPJpRSktE8x1XgHCOR6Jfn_IHUfVPfrKZA4GCh5ycMbxHM5clN4cTnmb2p91WFgsTSXtyX-i_TPgXsQ/s800/menu10.gif); padding: 8px 0 0 10px; } #menu10 li a:hover { color: #FF9834; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNXoaF6MqhWKMEkRGH6mGzP9iPz5XI-x4KAyKjQ7mfUl44JHlgsYBhP8wDGz1KCPJpRSktE8x1XgHCOR6Jfn_IHUfVPfrKZA4GCh5ycMbxHM5clN4cTnmb2p91WFgsTSXtyX-i_TPgXsQ/s800/menu10.gif) 0 -32px; padding: 8px 0 0 10px; }

Kode HTML :

<div id="menu10"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Itulah kumpulan menu navigasi vertikal untuk blogger yang saya kumpulkan dari berbagai sumber silahkan sobat pilih yang sobat suka dan pastinya sobat sukai juga postingan saya ini.

Lihat juga postingan saya yang lainnya cara membuat bubble cursor pada blog atau membuat menu drop down tanpa gambar dan juga membuat menu drop down tampil melayang

Theant Budiana

About the Guest Author:
Saya bukanlah orang yang ahli dalam dunia blogger tapi saya mencoba untuk berbagi ilmu dari apa yang saya ketahui dari paman saya, saya sangat suka blogging dan berbagi ilmu, tapi bukan berarti saya master blog salah besar jika sobat anggap saya hebat saya hanya seorang anak kampung yang mencoba untuk tidak kampungan dan tertinggal informasi alias GAPTEK, banyak artikel yang saya tulis di Blog Urang Sunda dan lihat juga blog saya satu lagi di Dunia Maya Saya dan klik disini untuk mengetahui lebih lanjut tentang saya

Kindly Bookmark this Post using your favorite Bookmarking service:

warning

Anda bingung?
Jangan ragu untuk bertanya kepada saya lewat komentar di bawah, saya akan mencoba menjawabnya sesegera mungkin, bahkan jika sobat ada saran untuk saya silahkan jangan ragu untuk memberi saran kepada saya asalkan komentar no spam. Komentar anda, adalah bekal untuk kemajuan blog saya, saya akan kunjungi balik blog sobat jika sobat meninggalkan jejak sobat disini.