Bagaimana cara Membuat Horizontal Menu HTML Dengan CSS
Horizontal menu adalah sederet baris pilihan yang berbentuk horizontal berupa link yang menuju halaman lain pada sebuah website. Salah satu contohnya seperti menu diatas dari blog ini yang berbentuk horizontal. Berikut kode scriptnya:
Script HTML1:
Script CSS1:
Contoh demo1
Script HTML2:
Script CSS2:
Contoh demo2
Horizontal menu adalah sederet baris pilihan yang berbentuk horizontal berupa link yang menuju halaman lain pada sebuah website. Salah satu contohnya seperti menu diatas dari blog ini yang berbentuk horizontal. Berikut kode scriptnya:
Script HTML1:
1
2
3
4
5
6
7
8
9
10
11
12
13
| <ul id="nav1"> <li> <a href="home.html" class="">Home</a> </li> <li> <a href="about.html" class="lang">About</a> </li> <li> <a href="kontak.html" class="lang">Contact</a> </li></ul> |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| #nav1, #header #nav1 a { text-decoration: none;}#nav1 li { display: inline;}#nav1 li:before { content: " | ";}#nav1 li:first-child:before { content: " ";}#nav1 li a { margin-right: 5px; margin-left: 5px; |
Script HTML2:
1
2
3
4
| <ul id="atas"> <li><a href="http://www.<a title="jegulo.net" href="http://www.jegulo.net">jegulo.net</a>" title="Kembali ke Halaman Utama">HOME</a></li> <li><a class="current" href="http://downloadlagu.pusku.com/" title="Cari Lagu Gratis">CARI LAGU</a></li> </ul> |
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
| #atas ul{ margin:0; list-style:none; width:100%; float:left; background:#FF6600; } #atas li{ display:block; padding-left:10px; } #atas li a{ display:block; float:left; background:#0a710a; padding:5px 12px; text-decoration:none; color:#FFFFFF; font:12px Arial, Helvetica, sans-serif; font-weight:bold; border-right:1px solid #FF9900; } #atas li a:hover{ color:#c92058; background:#FF9900 url(39original.gif) top left; } #atas li a.current{ background:#c95820; } #atas li a.current:hover{ color:#000; } |
0 Comments