Css Menu Arrow Bullet

Membuat menu vertikal dengan css banyak contoh yang bisa kita ambil untuk membuat sebuah navigasi menu seperti pada sidebar dalam situs ini untuk kode css saya melihat pada dynamic drive disitus tersebut banyak sekali contoh kode css yang sangat bagus dan mungkin bergunak untuk kita kembangkan pada wordpress dengan basis php tinggal sedikit melakukan perubahan pada tag yang sourcenya bisa anda lihat dalam wordpress.org disini saya coba berbagi sedikit pengatahuan saya serta cara untuk mengedit sebuah menu pada situs wordpress, sebagaiman wajarnya manusia kadang kita melakukan kesalahan jika ada yang salah mohon dikoreksi pintu sangat terbuka dihati saya untuk mendapatkan koreksi dari anda,disini saya menggunakan Css Menu Arrow Bullet dengan sedikit edit pada kode php serta css dan sentuhan dua backgroud yang saya dapatkan juga dari dynamic drive jadi sebenarnya ini seperti terjemahan yang sudah dibahas dalam situs tersebut cuma saya menambahkan tag php pada penempatan kode htmlnya yang tentu saja sangat berguna untuk kita dalam pengembangan selanjutnya tanpa harus mengedit lagi template jika kita menambahkan suatu link semoga artikel ini memberikan gambaran bagaimana mengedit menu navigasi(khusunya vertikal menu), selamat mencoba.
contoh menu :

• Menggunakan dua buah gambar sebagai background :

• Css Kode:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

<;style type="text/css">;
 
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
 
.arrowlistmenu{
width: 180px; /*width of menu*/
}
 
.arrowlistmenu .headerbar{
font: bold 14px Arial;
color: white;
background: black url(media/titlebar.png) repeat-x center left;
margin-bottom: 10px; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 4px 0 4px 10px; /*header text is indented 10px*/
}
 
.arrowlistmenu ul{
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
}
 
.arrowlistmenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}
 
.arrowlistmenu ul li a{
color: #A70303;
background: url(media/arrowbullet.png) no-repeat center left; /*custom bullet list image*/
display: block;
padding: 2px 0;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 90%;
}
 
.arrowlistmenu ul li a:visited{
color: #A70303;
}
 
.arrowlistmenu ul li a:hover{ /*hover state CSS*/
color: #A70303;
background-color: #F3F3F3;
}
<;/style>;

• Php Kode :

1
2
3
4
5
6
7
8
9
10
11
12

<div class="arrowlistmenu">
 
<h3 class="headerbar">My Favorite</h3>
<ul>
		<li><?php get_linksbyname('Favorite Link', '<li>', '</li>', '<br />', FALSE, 'name', TRUE); ?></a></li>
</ul>
<h3 class="headerbar">Tools</h3>
<ul>
<?php get_linksbyname('Tools', '<li>', '</li>', '<br />', FALSE, 'name', TRUE); ?>
</ul>
 
</div>

1. Save dua buah gambar tersebut lalu buat sebuah folder dengan nama media dalam directori theme anda.
2. save css kode dengan nama arrowbullet.css lalu upload ke directori theme anda Lalu tambahkan pada header.php :

   1	<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/arrowbullet.css" type="text/css" media="screen" />

3. Untuk menggunakan php kode edit pada bagian sidebar.php untuk tag link get linkbyname sesuaikan dengan nama kategori blogroll anda untuk menampilkan link yang anda inginkan.

Source From Dynamic Drive