() translation by (you can also view the original English article)
Sering digunakan pada e-commerce atau situs web berskala besar, menu mega menjadi lebih dan lebih populer, karena mereka menawarkan solusi efektif untuk menampilkan banyak konten sekaligus menjaga tata letak yang bersih. Dalam tutorial ini, kita akan belajar bagaimana membangun menu mega hanya-CSS yang lintas-browser yang mengagumkan, menggunakan fitur CSS3 yang bagus.
Langkah 1: Membangun Bar Navigasi
Mari kita mulai dengan menu dasar, dibangun dengan unordered list dan beberapa gaya CSS dasar.
1 |
<ul id="menu"> |
2 |
<li><a href="#">Home</a></li> |
3 |
<li><a href="#">About</a></li> |
4 |
<li><a href="#">Services</a></li> |
5 |
<li><a href="#">Portfolio</a></li> |
6 |
<li><a href="#">Contact</a></li> |
7 |
</ul>
|
Membuat Kontainer Menu
Kita sekarang akan menerapkan beberapa gaya CSS dasar. Untuk kontainer menu, kita mendefinisikan lebar tetap yang kita tengahkan dengan mengatur margin kiri dan kanan menjadi "auto".
1 |
#menu { |
2 |
list-style:none; |
3 |
width:940px; |
4 |
margin:30px auto 0px auto; |
5 |
height:43px; |
6 |
padding:0px 20px 0px 20px; |
7 |
}
|
Sekarang, mari kita lihat bagaimana kita bisa memperbaikinya dengan beberapa fitur CSS3. Kita perlu menggunakan sintaks yang berbeda untuk browser berbasis Webkit (seperti Safari) dan untuk browser berbasis Mozilla (seperti Firefox).
Untuk sudut membulat, sintaksnya adalah :
1 |
-moz-border-radius: 10px |
2 |
-webkit-border-radius: 10px; |
3 |
border-radius: 10px; |
Untuk latar belakang, kita akan menggunakan gradien dan warna mundur untuk browser lawas. Untuk menjaga konsistensi saat memilih warna, ada alat mengagumkan yang disebut Facade yang membantu Anda menemukan warna yang lebih terang dan lebih gelap dari warna dasar.
1 |
background: #014464; |
2 |
background: -moz-linear-gradient(top, #0272a7, #013953); |
3 |
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953)); |
Baris pertama menerapkan warna latar belakang sederhana (untuk browser lawas); baris kedua dan ketiga membuat gradien dari atas ke bawah menggunakan dua warna: #0272a7 dan #013953.
Kita sekarang dapat menambahkan border yang lebih gelap dan memoles desain dengan border inset "tiruan" yang dibuat dengan fitur "box-shadow". Sintaksnya sama untuk semua browser yang kompatibel: nilai pertama adalah offset horizontal, yang kedua adalah offset vertikal, yang ketiga adalah radius blur (nilai kecil membuatnya lebih tajam; akan menjadi 1 pixel dalam contoh kita). Kita mengatur semua offset menjadi 0 sehingga nilai blur akan menciptakan border terang yang seragam:
1 |
-moz-box-shadow:inset 0px 0px 1px #edf9ff; |
2 |
-webkit-box-shadow:inset 0px 0px 1px #edf9ff; |
3 |
box-shadow:inset 0px 0px 1px #edf9ff; |
Berikut kode CSS akhir untuk kontainer #menu :
1 |
#menu { |
2 |
list-style:none; |
3 |
width:940px; |
4 |
margin:30px auto 0px auto; |
5 |
height:43px; |
6 |
padding:0px 20px 0px 20px; |
7 |
|
8 |
/* Rounded Corners */
|
9 |
|
10 |
-moz-border-radius: 10px; |
11 |
-webkit-border-radius: 10px; |
12 |
border-radius: 10px; |
13 |
|
14 |
/* Background color and gradients */
|
15 |
|
16 |
background: #014464; |
17 |
background: -moz-linear-gradient(top, #0272a7, #013953); |
18 |
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953)); |
19 |
|
20 |
/* Borders */
|
21 |
|
22 |
border: 1px solid #002232; |
23 |
|
24 |
-moz-box-shadow:inset 0px 0px 1px #edf9ff; |
25 |
-webkit-box-shadow:inset 0px 0px 1px #edf9ff; |
26 |
box-shadow:inset 0px 0px 1px #edf9ff; |
27 |
}
|
Penataan Item Menu
Kita akan mulai dengan semua item menu sejajar ke kiri dan memberi jarak dengan margin-right (padding akan diperlukan untuk status hover):
1 |
#menu li { |
2 |
float:left; |
3 |
display:block; |
4 |
text-align:center; |
5 |
position:relative; |
6 |
padding: 4px 10px 4px 10px; |
7 |
margin-right:30px; |
8 |
margin-top:7px; |
9 |
border:none; |
10 |
}
|
Untuk status hover dan drop down, saya telah memilih skema warna abu-abu untuk latar belakang.
Warna fallback akan menjadi abu-abu terang (#F4F4F4) dan gradien akan diterapkan dari atas (#F4F4F4) ke bawah (#EEEEEE). Sudut membulat akan diterapkan hanya di sudut atas karena kita akan memiliki drop down menempel tepat di bawah item menu.
1 |
background: #F4F4F4; |
2 |
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE); |
3 |
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE)); |
Padding kiri dan kanan sedikit lebih kecil di sini karena kita memiliki border 1 piksel yang muncul pada hover. Jika kita terus dengan padding yang sama, item menu akan didorong dua piksel di sebelah kanan karena border kiri dan kanan ditambahkan pada hover mouse. Untuk menghindarinya, kita akan menghapus 1 piksel dari padding di kedua sisi, jadi kita memiliki 9 piksel dan bukan 10.
1 |
border: 1px solid #777777; |
2 |
padding: 4px 9px 4px 9px; |
Kemudian, kita menambahkan sudut membulat ke atas sehingga drop down akan tetap sempurna di bawah item menu induk:
1 |
-moz-border-radius: 5px 5px 0px 0px; |
2 |
-webkit-border-radius: 5px 5px 0px 0px; |
3 |
border-radius: 5px 5px 0px 0px; |
Berikut adalah CSS terakhir untuk item menu pada hover:
1 |
#menu li:hover { |
2 |
border: 1px solid #777777; |
3 |
padding: 4px 9px 4px 9px; |
4 |
|
5 |
/* Background color and gradients */
|
6 |
|
7 |
background: #F4F4F4; |
8 |
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE); |
9 |
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE)); |
10 |
|
11 |
/* Rounded corners */
|
12 |
|
13 |
-moz-border-radius: 5px 5px 0px 0px; |
14 |
-webkit-border-radius: 5px 5px 0px 0px; |
15 |
border-radius: 5px 5px 0px 0px; |
16 |
}
|
Untuk tautan, kita akan menerapkan bayangan teks yang bagus dengan menggunakan sintaks sederhana: nilai pertama dan kedua adalah offset horisontal dan vertikal untuk bayangan (1 pixel pada contoh kita), yang ketiga adalah blur (1 pixel juga) dan maka kita memiliki warna (hitam):
1 |
text-shadow: 1px 1px 1px #000; |
Berikut adalah CSS terakhir untuk tautannya:
1 |
#menu li a { |
2 |
font-family:Arial, Helvetica, sans-serif; |
3 |
font-size:14px; |
4 |
color: #EEEEEE; |
5 |
display:block; |
6 |
outline:0; |
7 |
text-decoration:none; |
8 |
text-shadow: 1px 1px 1px #000; |
9 |
}
|
Pada hover mouse, karena latar belakangnya berwarna abu-abu, kita akan menggunakan warna yang lebih gelap (#161616) untuk tautan dan warna putih untuk bayangan teks :
1 |
#menu li:hover a { |
2 |
color:#161616; |
3 |
text-shadow: 1px 1px 1px #FFFFFF; |
4 |
}
|
Akhirnya, kita membutuhkan sebuah cara untuk menunjukkan apakah ada drop down atau tidak dengan menggunakan gambar panah sederhana sebagai latar belakang, ia akan diposisikan di sebelah kanan dengan menggunakan padding dan margin atas akan sesuai dengannya. Pada hover, margin atas ini akan ditetapkan menjadi 7 piksel, bukan 8 karena kita memiliki border tambahan yang muncul pada hover mouse (jika tidak, panahnya akan didorong 1 piksel ke bawah pada hover) :
1 |
#menu li .drop { |
2 |
padding-right:21px; |
3 |
background:url("img/drop.png") no-repeat right 8px; |
4 |
}
|
5 |
#menu li:hover .drop { |
6 |
background:url("img/drop.png") no-repeat right 7px; |
7 |
}
|
Berikut adalah kode terakhir kita untuk kontainer menu dan tautan; hanya item "home" yang tidak memiliki konten drop down untuk saat ini :
1 |
<ul id="menu"> |
2 |
<li><a href="#">Home</a></li> |
3 |
<li><a href="#" class="drop">About</a></li> |
4 |
<li><a href="#" class="drop">Services</a></li> |
5 |
<li><a href="#" class="drop">Portfolio</a></li> |
6 |
<li><a href="#" class="drop">Contact</a></li> |
7 |
</ul>
|
1 |
#menu { |
2 |
list-style:none; |
3 |
width:940px; |
4 |
margin:30px auto 0px auto; |
5 |
height:43px; |
6 |
padding:0px 20px 0px 20px; |
7 |
|
8 |
/* Rounded Corners */
|
9 |
|
10 |
-moz-border-radius: 10px; |
11 |
-webkit-border-radius: 10px; |
12 |
border-radius: 10px; |
13 |
|
14 |
/* Background color and gradients */
|
15 |
|
16 |
background: #014464; |
17 |
background: -moz-linear-gradient(top, #0272a7, #013953); |
18 |
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953)); |
19 |
|
20 |
/* Borders */
|
21 |
|
22 |
border: 1px solid #002232; |
23 |
|
24 |
-moz-box-shadow:inset 0px 0px 1px #edf9ff; |
25 |
-webkit-box-shadow:inset 0px 0px 1px #edf9ff; |
26 |
box-shadow:inset 0px 0px 1px #edf9ff; |
27 |
}
|
28 |
|
29 |
#menu li { |
30 |
float:left; |
31 |
display:block; |
32 |
text-align:center; |
33 |
position:relative; |
34 |
padding: 4px 10px 4px 10px; |
35 |
margin-right:30px; |
36 |
margin-top:7px; |
37 |
border:none; |
38 |
}
|
39 |
|
40 |
#menu li:hover { |
41 |
border: 1px solid #777777; |
42 |
padding: 4px 9px 4px 9px; |
43 |
|
44 |
/* Background color and gradients */
|
45 |
|
46 |
background: #F4F4F4; |
47 |
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE); |
48 |
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE)); |
49 |
|
50 |
/* Rounded corners */
|
51 |
|
52 |
-moz-border-radius: 5px 5px 0px 0px; |
53 |
-webkit-border-radius: 5px 5px 0px 0px; |
54 |
border-radius: 5px 5px 0px 0px; |
55 |
}
|
56 |
|
57 |
#menu li a { |
58 |
font-family:Arial, Helvetica, sans-serif; |
59 |
font-size:14px; |
60 |
color: #EEEEEE; |
61 |
display:block; |
62 |
outline:0; |
63 |
text-decoration:none; |
64 |
text-shadow: 1px 1px 1px #000; |
65 |
}
|
66 |
|
67 |
#menu li:hover a { |
68 |
color:#161616; |
69 |
text-shadow: 1px 1px 1px #FFFFFF; |
70 |
}
|
71 |
#menu li .drop { |
72 |
padding-right:21px; |
73 |
background:url("img/drop.png") no-repeat right 8px; |
74 |
}
|
75 |
#menu li:hover .drop { |
76 |
background:url("img/drop.png") no-repeat right 7px; |
77 |
}
|
Dan hasilnya adalah :
Langkah 2: Mengkodekan Drop Down
Menu drop down "klasik" biasanya berisi daftar yang terdapat dalam daftar item induk dan terlihat seperti:
1 |
<ul id="menu"> |
2 |
<li><a href="#">Item 1</a>< |
3 |
<ul> |
4 |
<li><a href="#">Subitem 1</a></li> |
5 |
<li><a href="#">Subitem 2</a></li> |
6 |
<li><a href="#">Subitem 3</a></li> |
7 |
</ul>
|
8 |
</li>
|
9 |
<li><a href="#">Item 2</a>< |
10 |
<ul> |
11 |
<li><a href="#">Subitem 1</a></li> |
12 |
<li><a href="#">Subitem 2</a></li> |
13 |
</ul>
|
14 |
</li>
|
15 |
</ul>
|
Struktur Umum
Untuk Menu Mega kita, bukannya daftar bersarang, kita hanya menggunakan DIV standar, yang akan bekerja seperti daftar bersarang :
1 |
<ul id="menu"> |
2 |
<li><a href="#">Item 1</a> |
3 |
<div>
|
4 |
Drop down Content |
5 |
<div>
|
6 |
</li>
|
7 |
<li><a href="#">Item 2</a> |
8 |
<div>
|
9 |
Drop down Content |
10 |
<div>
|
11 |
</li>
|
12 |
</ul>
|
Ini akan menjadi struktur dasar untuk drop down. Gagasan di baliknya adalah untuk dapat memasukkan jenis konten apa pun, seperti paragraf, gambar, daftar kustom atau form kontak, disusun dalam kolom-kolom.
Kontainer Drop Down
Kontainer dengan berbagai ukuran akan menampung seluruh konten drop down. Saya telah memilih nama tag yang sesuai dengan jumlah kolom yang akan mereka kandung.
Untuk menyembunyikan drop down, kita akan menggunakan posisi absolut dengan margin kiri negatif :
1 |
position:absolute; |
2 |
left:-999em; |
Latar belakang warna fallback sama dengan yang digunakan untuk item menu. Browser modern akan menampilkan gradien yang dimulai dengan #EEEEEE di bagian atas (untuk mencocokkan gradien item menu induk) dan diakhiri dengan #BBBBBB di bagian bawah:
1 |
background:#F4F4F4; |
2 |
background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB); |
3 |
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB)); |
Kita akan kembali menggunakan sudut membulat, kecuali yang kiri atas :
1 |
-moz-border-radius: 0px 5px 5px 5px; |
2 |
-webkit-border-radius: 0px 5px 5px 5px; |
3 |
border-radius: 0px 5px 5px 5px; |
1 |
.dropdown_1column, |
2 |
.dropdown_2columns, |
3 |
.dropdown_3columns, |
4 |
.dropdown_4columns, |
5 |
.dropdown_5columns { |
6 |
margin:4px auto; |
7 |
position:absolute; |
8 |
left:-999em; /* Hides the drop down */ |
9 |
text-align:left; |
10 |
padding:10px 5px 10px 5px; |
11 |
border:1px solid #777777; |
12 |
border-top:none; |
13 |
|
14 |
/* Gradient background */
|
15 |
background:#F4F4F4; |
16 |
background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB); |
17 |
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB)); |
18 |
|
19 |
/* Rounded Corners */
|
20 |
-moz-border-radius: 0px 5px 5px 5px; |
21 |
-webkit-border-radius: 0px 5px 5px 5px; |
22 |
border-radius: 0px 5px 5px 5px; |
23 |
}
|
Untuk menggambarkan hal ini, mari kita lihat bagaimana tampilannya jika kita tidak memperhatikan detailnya:
Sekarang inilah contoh kita:
Seperti yang bisa Anda lihat, drop down menempel dengan baik ke item menu induknya.
Agar memiliki kontainer drop down yang sempurna, kita perlu menentukan lebar masing-masing :
1 |
.dropdown_1column {width: 140px;} |
2 |
.dropdown_2columns {width: 280px;} |
3 |
.dropdown_3columns {width: 420px;} |
4 |
.dropdown_4columns {width: 560px;} |
5 |
.dropdown_5columns {width: 700px;} |
Dan untuk menunjukkan drop down pada hover mouse, kita hanya akan menggunakan :
1 |
#menu li:hover .dropdown_1column, |
2 |
#menu li:hover .dropdown_2columns, |
3 |
#menu li:hover .dropdown_3columns, |
4 |
#menu li:hover .dropdown_4columns, |
5 |
#menu li:hover .dropdown_5columns { |
6 |
left:-1px;top:auto; |
7 |
}
|
Menggunakan Kontainer Drop Down
Kelas kita siap untuk disertakan dalam menu kita. Kita akan menggunakan masing-masing dari mereka mulai dari 5 kolom, tata letak ke drop down kolom tunggal :
1 |
<ul id="menu"> |
2 |
<li><a href="#">Home</a></li> |
3 |
<li><a href="#" class="drop">5 Columns</a> |
4 |
<div class="dropdown_5columns"> |
5 |
<p>5 Columns content</p> |
6 |
</div>
|
7 |
</li>
|
8 |
<li><a href="#" class="drop">4 Columns</a> |
9 |
<div class="dropdown_4columns"> |
10 |
<p>4 Columns content</p> |
11 |
</div>
|
12 |
</li>
|
13 |
<li><a href="#" class="drop">3 Columns</a> |
14 |
<div class="dropdown_3columns"> |
15 |
<p>3 Columns content</p> |
16 |
</div>
|
17 |
</li>
|
18 |
<li><a href="#" class="drop">2 Columns</a> |
19 |
<div class="dropdown_2columns"> |
20 |
<p>2 Columns content</p> |
21 |
</div>
|
22 |
</li>
|
23 |
<li><a href="#" class="drop">1 Column</a> |
24 |
<div class="dropdown_1column"> |
25 |
<p>1 Column content</p> |
26 |
</div>
|
27 |
</li>
|
28 |
</ul>
|
Berikut adalah pratinjau dari kode diatas :
Langkah 3: Membuat Kolom-kolom Kontainer Drop Down
Setelah kita menyiapkan kontainer, kita akan membuat kolom dengan ukuran yang semakin meningkat, mengikuti prinsip-prinsip sistem grid 960.
1 |
.col_1, |
2 |
.col_2, |
3 |
.col_3, |
4 |
.col_4, |
5 |
.col_5 { |
6 |
display:inline; |
7 |
float: left; |
8 |
position: relative; |
9 |
margin-left: 5px; |
10 |
margin-right: 5px; |
11 |
}
|
12 |
.col_1 {width:130px;} |
13 |
.col_2 {width:270px;} |
14 |
.col_3 {width:410px;} |
15 |
.col_4 {width:550px;} |
16 |
.col_5 {width:690px;} |
Menggunakan Kolom
Berikut adalah contoh drop down yang berisi beberapa kolom. Dalam contoh ini, kita memiliki kombinasi yang berbeda dengan menggunakan semua jenis kolom :
1 |
<ul id="menu"> |
2 |
<li><a href="#" class="drop">5 Columns</a> |
3 |
<div class="dropdown_5columns"> |
4 |
<div class="col_5"> |
5 |
<p>This is a 5 Columns content</p> |
6 |
</div>
|
7 |
<div class="col_1"> |
8 |
<p>This is a 1 Column content</p> |
9 |
</div>
|
10 |
<div class="col_1"> |
11 |
<p>This is a 1 Column content</p> |
12 |
</div>
|
13 |
<div class="col_1"> |
14 |
<p>This is a 1 Column content</p> |
15 |
</div>
|
16 |
<div class="col_1"> |
17 |
<p>This is a 1 Column content</p> |
18 |
</div>
|
19 |
<div class="col_1"> |
20 |
<p>This is a 1 Column content</p> |
21 |
</div>
|
22 |
<div class="col_4"> |
23 |
<p>This is a 4 Columns content</p> |
24 |
</div>
|
25 |
<div class="col_1"> |
26 |
<p>This is a 1 Column content</p> |
27 |
</div>
|
28 |
<div class="col_3"> |
29 |
<p>This is a 3 Columns content</p> |
30 |
</div>
|
31 |
<div class="col_2"> |
32 |
<p>This is a 2 Columns content</p> |
33 |
</div>
|
34 |
</div>
|
35 |
</li>
|
36 |
</ul>
|
Pratinjau kode :
Langkah 4: Menjajarkan ke Kanan
Sekarang, mari kita lihat bagaimana kita bisa menjajarkan menu kita dan konten drop down ke tepi kanan panel navigasi; tidak hanya item menu, tapi kontainer drop down juga harus diganti.
Untuk mencapai hal ini, kita akan menambahkan kelas baru yang disebut .menu_right ke item daftar induk, sehingga kita mengatur ulang margin kanan dan memberikan float ke kanan :
1 |
#menu .menu_right { |
2 |
float:right; |
3 |
margin-right:0px; |
4 |
}
|
Selanjutnya, mari kita lihat drop down-nya. Dalam kode CSS sebelumnya, sudut membulat diterapkan ke semua sudut kecuali yang left-top, agar sesuai dengan latar belakang item menu induk. Sekarang kita ingin drop down ini untuk tetap berada di tepi kanan item menu induk. Jadi, kita akan menimpa nilai border-radius dengan kelas baru yang disebut .align_right, dan mengatur pojok top-right ke 0.
1 |
#menu li .align_right { |
2 |
/* Rounded Corners */
|
3 |
-moz-border-radius: 5px 0px 5px 5px; |
4 |
-webkit-border-radius: 5px 0px 5px 5px; |
5 |
border-radius: 5px 0px 5px 5px; |
6 |
}
|
Yang terakhir namun tidak kalah pentingnya, kita ingin membuat drop down tampil di sebelah kanan; jadi kita akan menggunakan kelas baru kita dan mengatur ulang nilai kiri, lalu membuatnya menempel di sebelah kanan :
1 |
#menu li:hover .align_right { |
2 |
left:auto; |
3 |
right:-1px; |
4 |
top:auto; |
5 |
}
|
Sekarang siap digunakan di menu :
1 |
<li class="menu_right"><a href="#" class="drop">Right</a> |
2 |
<div class="dropdown_1column align_right"> |
3 |
<div class="col_1"> |
4 |
<p>This is a 1 Column content</p> |
5 |
</div>
|
6 |
</div>
|
7 |
</li>
|
Dan pratinjau kecil dari kode diatas :
Langkah 5: Menambahkan dan Menata Konten
Setelah seluruh struktur kita siap, kita bisa menambahkan konten sebanyak yang kita inginkan: teks, daftar, gambar, dll.
Penataan Umum
Mari kita mulai dengan beberapa gaya dasar untuk paragraf dan judul :
1 |
#menu p, #menu h2, #menu h3, #menu ul li { |
2 |
font-family:Arial, Helvetica, sans-serif; |
3 |
line-height:21px; |
4 |
font-size:12px; |
5 |
text-align:left; |
6 |
text-shadow: 1px 1px 1px #FFFFFF; |
7 |
}
|
8 |
#menu h2 { |
9 |
font-size:21px; |
10 |
font-weight:400; |
11 |
letter-spacing:-1px; |
12 |
margin:7px 0 14px 0; |
13 |
padding-bottom:14px; |
14 |
border-bottom:1px solid #666666; |
15 |
}
|
16 |
#menu h3 { |
17 |
font-size:14px; |
18 |
margin:7px 0 14px 0; |
19 |
padding-bottom:7px; |
20 |
border-bottom:1px solid #888888; |
21 |
}
|
22 |
#menu p { |
23 |
line-height:18px; |
24 |
margin:0 0 10px 0; |
25 |
}
|
26 |
.strong { |
27 |
font-weight:bold; |
28 |
}
|
29 |
.italic { |
30 |
font-style:italic; |
31 |
}
|
Kita bisa menerapkan warna biru yang bagus ke tautan di dalam drop down:
1 |
#menu li:hover div a { |
2 |
font-size:12px; |
3 |
color:#015b86; |
4 |
}
|
5 |
#menu li:hover div a:hover { |
6 |
color:#029feb; |
7 |
}
|
Penataan Daftar
Mari kita ubah daftar kita; kita harus mengatur ulang beberapa penataan seperti warna latar belakang atau border yang digunakan pada bar navigasi :
1 |
#menu li ul { |
2 |
list-style:none; |
3 |
padding:0; |
4 |
margin:0 0 12px 0; |
5 |
}
|
6 |
#menu li ul li { |
7 |
font-size:12px; |
8 |
line-height:24px; |
9 |
position:relative; |
10 |
text-shadow: 1px 1px 1px #ffffff; |
11 |
padding:0; |
12 |
margin:0; |
13 |
float:none; |
14 |
text-align:left; |
15 |
width:130px; |
16 |
}
|
17 |
#menu li ul li:hover { |
18 |
background:none; |
19 |
border:none; |
20 |
padding:0; |
21 |
margin:0; |
22 |
}
|
Penataan Gambar
1 |
.imgshadow { |
2 |
background:#FFFFFF; |
3 |
padding:4px; |
4 |
border:1px solid #777777; |
5 |
margin-top:5px; |
6 |
-moz-box-shadow:0px 0px 5px #666666; |
7 |
-webkit-box-shadow:0px 0px 5px #666666; |
8 |
box-shadow:0px 0px 5px #666666; |
9 |
}
|
Dan untuk membuat paragraf dengan gambar di sebelah kiri :
1 |
.img_left { |
2 |
width:auto; |
3 |
float:left; |
4 |
margin:5px 15px 5px 5px; |
5 |
}
|
Kotak Teks
Untuk menyoroti beberapa konten, berikut adalah contoh kotak gelap dengan sudut membulat dan bayangan inset yang halus :
1 |
#menu li .black_box { |
2 |
background-color:#333333; |
3 |
color: #eeeeee; |
4 |
text-shadow: 1px 1px 1px #000; |
5 |
padding:4px 6px 4px 6px; |
6 |
|
7 |
/* Rounded Corners */
|
8 |
-moz-border-radius: 5px; |
9 |
-webkit-border-radius: 5px; |
10 |
border-radius: 5px; |
11 |
|
12 |
/* Shadow */
|
13 |
-webkit-box-shadow:inset 0 0 3px #000000; |
14 |
-moz-box-shadow:inset 0 0 3px #000000; |
15 |
box-shadow:inset 0 0 3px #000000; |
16 |
}
|
Penataan Ulang Daftar
Dan untuk menyelesaikannya, inilah cara lain untuk menata daftar menggunakan, lagi, beberapa CSS3:
1 |
#menu li .greybox li { |
2 |
background:#F4F4F4; |
3 |
border:1px solid #bbbbbb; |
4 |
margin:0px 0px 4px 0px; |
5 |
padding:4px 6px 4px 6px; |
6 |
width:116px; |
7 |
|
8 |
/* Rounded Corners */
|
9 |
-moz-border-radius: 5px; |
10 |
-webkit-border-radius: 5px; |
11 |
border-radius: 5px; |
12 |
}
|
13 |
#menu li .greybox li:hover { |
14 |
background:#ffffff; |
15 |
border:1px solid #aaaaaa; |
16 |
padding:4px 6px 4px 6px; |
17 |
margin:0px 0px 4px 0px; |
18 |
}
|
Langkah 6: Menangani Kompatibilitas Browser dan IE6
Semua browser menangani hover pada tag non-anchor . . . kecuali Internet Explorer 6; jadi Menu Mega kita masih belum bekerja dengan browser lawas ini. Kita bisa memperbaiki masalah ini berkat file perilaku yang akan menambahkan fungsionalitas ini. Anda bisa menemukannya di sini, dan gunakan komentar kondisional untuk menargetkan IE6 saja; penjelasan lebih bisa ditemukan melalui artikel ini dari CSS-Tricks.
Untuk menargetkan IE6, kita akan menggunakan kode berikut :
1 |
<!--[if IE 6]>
|
2 |
<style>
|
3 |
body {behavior: url("csshover3.htc");}
|
4 |
</style>
|
5 |
<![endif]-->
|
Saya telah menggunakan beberapa file PNG dalam tutorial ini, dan, seperti yang diketahui semuanya, IE6 tidak mendukung transparansi sehingga kita memiliki solusi yang berbeda :
- Mengkonversikannya ke format GIF atau PNG-8
- Menggunakan sebuah skrip
- Atur warna latar belakang selain abu-abu default dengan TweakPNG misalnya
Saya akan membiarkan Anda memilih yang sesuai dengan kebutuhan Anda. Sekarang, mari meninjau contoh yang bekerja penuh.
Contoh Akhir
Bagian HTML
1 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
2 |
<html xmlns="http://www.w3.org/1999/xhtml"> |
3 |
<head>
|
4 |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
5 |
|
6 |
<link rel="stylesheet" href="menu.css" type="text/css" media="screen" /> |
7 |
|
8 |
<title>Mega Drop Down Menu</title> |
9 |
<!--[if IE 6]>
|
10 |
<style>
|
11 |
body {behavior: url("csshover3.htc");}
|
12 |
#menu li .drop {background:url("img/drop.gif") no-repeat right 8px;
|
13 |
</style>
|
14 |
<![endif]-->
|
15 |
|
16 |
</head>
|
17 |
|
18 |
<body>
|
19 |
|
20 |
<ul id="menu"> |
21 |
|
22 |
<li><a href="#" class="drop">Home</a><!-- Begin Home Item --> |
23 |
|
24 |
<div class="dropdown_2columns"><!-- Begin 2 columns container --> |
25 |
|
26 |
<div class="col_2"> |
27 |
<h2>Welcome !</h2> |
28 |
</div>
|
29 |
|
30 |
<div class="col_2"> |
31 |
<p>Hi and welcome here ! This is a showcase of the possibilities of this awesome Mega Drop Down Menu.</p> |
32 |
<p>This item comes with a large range of prepared typographic stylings such as headings, lists, etc.</p> |
33 |
</div>
|
34 |
|
35 |
<div class="col_2"> |
36 |
<h2>Cross Browser Support</h2> |
37 |
</div>
|
38 |
|
39 |
<div class="col_1"> |
40 |
<img src="img/browsers.png" width="125" height="48" alt="" /> |
41 |
</div>
|
42 |
|
43 |
<div class="col_1"> |
44 |
<p>This mega menu has been tested in all major browsers.</p> |
45 |
</div>
|
46 |
|
47 |
</div><!-- End 2 columns container --> |
48 |
|
49 |
</li><!-- End Home Item --> |
50 |
|
51 |
<li><a href="#" class="drop">5 Columns</a><!-- Begin 5 columns Item --> |
52 |
|
53 |
<div class="dropdown_5columns"><!-- Begin 5 columns container --> |
54 |
|
55 |
<div class="col_5"> |
56 |
<h2>This is an example of a large container with 5 columns</h2> |
57 |
</div>
|
58 |
|
59 |
<div class="col_1"> |
60 |
<p class="black_box">This is a dark grey box text. Fusce in metus at enim porta lacinia vitae a arcu. Sed sed lacus nulla mollis porta quis.</p> |
61 |
</div>
|
62 |
|
63 |
<div class="col_1"> |
64 |
<p>Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Mauris hendrerit, metus cursus accumsan tincidunt.</p> |
65 |
</div>
|
66 |
|
67 |
<div class="col_1"> |
68 |
<p class="italic">This is a sample of an italic text. Consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi porta quis sit amet.</p> |
69 |
</div>
|
70 |
|
71 |
<div class="col_1"> |
72 |
<p>Curabitur euismod gravida ante nec commodo. Nunc dolor nulla, semper in ultricies vitae, vulputate porttitor neque.</p> |
73 |
</div>
|
74 |
|
75 |
<div class="col_1"> |
76 |
<p class="strong">This is a sample of a bold text. Aliquam sodales nisi nec felis hendrerit ac eleifend lectus feugiat scelerisque.</p> |
77 |
</div>
|
78 |
|
79 |
<div class="col_5"> |
80 |
<h2>Here is some content with side images</h2> |
81 |
</div>
|
82 |
|
83 |
<div class="col_3"> |
84 |
|
85 |
<img src="img/01.jpg" width="70" height="70" class="img_left imgshadow" alt="" /> |
86 |
<p>Maecenas eget eros lorem, nec pellentesque lacus. Aenean dui orci, rhoncus sit amet tristique eu, tristique sed odio. Praesent ut interdum elit. Sed in sem mauris. Aenean a commodo mi. Praesent augue lacus.<a href="#">Read more...</a></p> |
87 |
|
88 |
<img src="img/02.jpg" width="70" height="70" class="img_left imgshadow" alt="" /> |
89 |
<p>Aliquam elementum felis quis felis consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi. Aliquam pretium mollis fringilla. Nunc in leo urna, eget varius metus. Aliquam sodales nisi.<a href="#">Read more...</a></p> |
90 |
|
91 |
</div>
|
92 |
|
93 |
<div class="col_2"> |
94 |
|
95 |
<p class="black_box">This is a black box, you can use it to highligh some content. Sed sed lacus nulla, et lacinia risus. Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Mauris hendrerit, metus cursus accumsan tincidunt.Quisque vestibulum nisi non nunc blandit placerat. Mauris facilisis, risus ut lobortis posuere, diam lacus congue lorem, ut condimentum ligula est vel orci. Donec interdum lacus at velit varius gravida. Nulla ipsum risus.</p> |
96 |
|
97 |
</div>
|
98 |
|
99 |
</div><!-- End 5 columns container --> |
100 |
|
101 |
</li><!-- End 5 columns Item --> |
102 |
|
103 |
<li><a href="#" class="drop">4 Columns</a><!-- Begin 4 columns Item --> |
104 |
|
105 |
<div class="dropdown_4columns"><!-- Begin 4 columns container --> |
106 |
|
107 |
<div class="col_4"> |
108 |
<h2>This is a heading title</h2> |
109 |
</div>
|
110 |
|
111 |
<div class="col_1"> |
112 |
|
113 |
<h3>Some Links</h3> |
114 |
<ul>
|
115 |
<li><a href="#">ThemeForest</a></li> |
116 |
<li><a href="#">GraphicRiver</a></li> |
117 |
<li><a href="#">ActiveDen</a></li> |
118 |
<li><a href="#">VideoHive</a></li> |
119 |
<li><a href="#">3DOcean</a></li> |
120 |
</ul>
|
121 |
|
122 |
</div>
|
123 |
|
124 |
<div class="col_1"> |
125 |
|
126 |
<h3>Useful Links</h3> |
127 |
<ul>
|
128 |
<li><a href="#">NetTuts</a></li> |
129 |
<li><a href="#">VectorTuts</a></li> |
130 |
<li><a href="#">PsdTuts</a></li> |
131 |
<li><a href="#">PhotoTuts</a></li> |
132 |
<li><a href="#">ActiveTuts</a></li> |
133 |
</ul>
|
134 |
|
135 |
</div>
|
136 |
|
137 |
<div class="col_1"> |
138 |
|
139 |
<h3>Other Stuff</h3> |
140 |
<ul>
|
141 |
<li><a href="#">FreelanceSwitch</a></li> |
142 |
<li><a href="#">Creattica</a></li> |
143 |
<li><a href="#">WorkAwesome</a></li> |
144 |
<li><a href="#">Mac Apps</a></li> |
145 |
<li><a href="#">Web Apps</a></li> |
146 |
</ul>
|
147 |
|
148 |
</div>
|
149 |
|
150 |
<div class="col_1"> |
151 |
|
152 |
<h3>Misc</h3> |
153 |
<ul>
|
154 |
<li><a href="#">Design</a></li> |
155 |
<li><a href="#">Logo</a></li> |
156 |
<li><a href="#">Flash</a></li> |
157 |
<li><a href="#">Illustration</a></li> |
158 |
<li><a href="#">More...</a></li> |
159 |
</ul>
|
160 |
|
161 |
</div>
|
162 |
|
163 |
</div><!-- End 4 columns container --> |
164 |
|
165 |
</li><!-- End 4 columns Item --> |
166 |
|
167 |
<li class="menu_right"><a href="#" class="drop">1 Column</a> |
168 |
|
169 |
<div class="dropdown_1column align_right"> |
170 |
|
171 |
<div class="col_1"> |
172 |
|
173 |
<ul class="simple"> |
174 |
<li><a href="#">FreelanceSwitch</a></li> |
175 |
<li><a href="#">Creattica</a></li> |
176 |
<li><a href="#">WorkAwesome</a></li> |
177 |
<li><a href="#">Mac Apps</a></li> |
178 |
<li><a href="#">Web Apps</a></li> |
179 |
<li><a href="#">NetTuts</a></li> |
180 |
<li><a href="#">VectorTuts</a></li> |
181 |
<li><a href="#">PsdTuts</a></li> |
182 |
<li><a href="#">PhotoTuts</a></li> |
183 |
<li><a href="#">ActiveTuts</a></li> |
184 |
<li><a href="#">Design</a></li> |
185 |
<li><a href="#">Logo</a></li> |
186 |
<li><a href="#">Flash</a></li> |
187 |
<li><a href="#">Illustration</a></li> |
188 |
<li><a href="#">More...</a></li> |
189 |
</ul>
|
190 |
|
191 |
</div>
|
192 |
|
193 |
</div>
|
194 |
|
195 |
</li>
|
196 |
|
197 |
<li class="menu_right"><a href="#" class="drop">3 columns</a><!-- Begin 3 columns Item --> |
198 |
|
199 |
<div class="dropdown_3columns align_right"><!-- Begin 3 columns container --> |
200 |
|
201 |
<div class="col_3"> |
202 |
<h2>Lists in Boxes</h2> |
203 |
</div>
|
204 |
|
205 |
<div class="col_1"> |
206 |
|
207 |
<ul class="greybox"> |
208 |
<li><a href="#">FreelanceSwitch</a></li> |
209 |
<li><a href="#">Creattica</a></li> |
210 |
<li><a href="#">WorkAwesome</a></li> |
211 |
<li><a href="#">Mac Apps</a></li> |
212 |
<li><a href="#">Web Apps</a></li> |
213 |
</ul>
|
214 |
|
215 |
</div>
|
216 |
|
217 |
<div class="col_1"> |
218 |
|
219 |
<ul class="greybox"> |
220 |
<li><a href="#">ThemeForest</a></li> |
221 |
<li><a href="#">GraphicRiver</a></li> |
222 |
<li><a href="#">ActiveDen</a></li> |
223 |
<li><a href="#">VideoHive</a></li> |
224 |
<li><a href="#">3DOcean</a></li> |
225 |
</ul>
|
226 |
|
227 |
</div>
|
228 |
|
229 |
<div class="col_1"> |
230 |
|
231 |
<ul class="greybox"> |
232 |
<li><a href="#">Design</a></li> |
233 |
<li><a href="#">Logo</a></li> |
234 |
<li><a href="#">Flash</a></li> |
235 |
<li><a href="#">Illustration</a></li> |
236 |
<li><a href="#">More...</a></li> |
237 |
</ul>
|
238 |
|
239 |
</div>
|
240 |
|
241 |
<div class="col_3"> |
242 |
<h2>Here are some image examples</h2> |
243 |
</div>
|
244 |
|
245 |
<div class="col_3"> |
246 |
<img src="img/02.jpg" width="70" height="70" class="img_left imgshadow" alt="" /> |
247 |
<p>Maecenas eget eros lorem, nec pellentesque lacus. Aenean dui orci, rhoncus sit amet tristique eu, tristique sed odio. Praesent ut interdum elit. Maecenas imperdiet, nibh vitae rutrum vulputate, lorem sem condimentum.<a href="#">Read more...</a></p> |
248 |
|
249 |
<img src="img/01.jpg" width="70" height="70" class="img_left imgshadow" alt="" /> |
250 |
<p>Aliquam elementum felis quis felis consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi. Aliquam pretium mollis fringilla. Vestibulum tempor facilisis malesuada. <a href="#">Read more...</a></p> |
251 |
</div>
|
252 |
|
253 |
</div><!-- End 3 columns container --> |
254 |
|
255 |
</li><!-- End 3 columns Item --> |
256 |
|
257 |
|
258 |
</ul>
|
259 |
|
260 |
</body>
|
261 |
|
262 |
</html>
|
Bagian CSS
1 |
body, ul, li { |
2 |
font-size:14px; |
3 |
font-family:Arial, Helvetica, sans-serif; |
4 |
line-height:21px; |
5 |
text-align:left; |
6 |
}
|
7 |
|
8 |
/* Navigation Bar */
|
9 |
|
10 |
#menu { |
11 |
list-style:none; |
12 |
width:940px; |
13 |
margin:30px auto 0px auto; |
14 |
height:43px; |
15 |
padding:0px 20px 0px 20px; |
16 |
|
17 |
/* Rounded Corners */
|
18 |
|
19 |
-moz-border-radius: 10px; |
20 |
-webkit-border-radius: 10px; |
21 |
border-radius: 10px; |
22 |
|
23 |
/* Background color and gradients */
|
24 |
|
25 |
background: #014464; |
26 |
background: -moz-linear-gradient(top, #0272a7, #013953); |
27 |
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953)); |
28 |
|
29 |
/* Borders */
|
30 |
|
31 |
border: 1px solid #002232; |
32 |
|
33 |
-moz-box-shadow:inset 0px 0px 1px #edf9ff; |
34 |
-webkit-box-shadow:inset 0px 0px 1px #edf9ff; |
35 |
box-shadow:inset 0px 0px 1px #edf9ff; |
36 |
}
|
37 |
|
38 |
#menu li { |
39 |
float:left; |
40 |
text-align:center; |
41 |
position:relative; |
42 |
padding: 4px 10px 4px 10px; |
43 |
margin-right:30px; |
44 |
margin-top:7px; |
45 |
border:none; |
46 |
}
|
47 |
|
48 |
#menu li:hover { |
49 |
border: 1px solid #777777; |
50 |
padding: 4px 9px 4px 9px; |
51 |
|
52 |
/* Background color and gradients */
|
53 |
|
54 |
background: #F4F4F4; |
55 |
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE); |
56 |
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE)); |
57 |
|
58 |
/* Rounded corners */
|
59 |
|
60 |
-moz-border-radius: 5px 5px 0px 0px; |
61 |
-webkit-border-radius: 5px 5px 0px 0px; |
62 |
border-radius: 5px 5px 0px 0px; |
63 |
}
|
64 |
|
65 |
#menu li a { |
66 |
font-family:Arial, Helvetica, sans-serif; |
67 |
font-size:14px; |
68 |
color: #EEEEEE; |
69 |
display:block; |
70 |
outline:0; |
71 |
text-decoration:none; |
72 |
text-shadow: 1px 1px 1px #000; |
73 |
}
|
74 |
|
75 |
#menu li:hover a { |
76 |
color:#161616; |
77 |
text-shadow: 1px 1px 1px #FFFFFF; |
78 |
}
|
79 |
#menu li .drop { |
80 |
padding-right:21px; |
81 |
background:url("img/drop.png") no-repeat right 8px; |
82 |
}
|
83 |
#menu li:hover .drop { |
84 |
background:url("img/drop.png") no-repeat right 7px; |
85 |
}
|
86 |
|
87 |
/* Drop Down */
|
88 |
|
89 |
.dropdown_1column, |
90 |
.dropdown_2columns, |
91 |
.dropdown_3columns, |
92 |
.dropdown_4columns, |
93 |
.dropdown_5columns { |
94 |
margin:4px auto; |
95 |
float:left; |
96 |
position:absolute; |
97 |
left:-999em; /* Hides the drop down */ |
98 |
text-align:left; |
99 |
padding:10px 5px 10px 5px; |
100 |
border:1px solid #777777; |
101 |
border-top:none; |
102 |
|
103 |
/* Gradient background */
|
104 |
background:#F4F4F4; |
105 |
background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB); |
106 |
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB)); |
107 |
|
108 |
/* Rounded Corners */
|
109 |
-moz-border-radius: 0px 5px 5px 5px; |
110 |
-webkit-border-radius: 0px 5px 5px 5px; |
111 |
border-radius: 0px 5px 5px 5px; |
112 |
}
|
113 |
|
114 |
.dropdown_1column {width: 140px;} |
115 |
.dropdown_2columns {width: 280px;} |
116 |
.dropdown_3columns {width: 420px;} |
117 |
.dropdown_4columns {width: 560px;} |
118 |
.dropdown_5columns {width: 700px;} |
119 |
|
120 |
#menu li:hover .dropdown_1column, |
121 |
#menu li:hover .dropdown_2columns, |
122 |
#menu li:hover .dropdown_3columns, |
123 |
#menu li:hover .dropdown_4columns, |
124 |
#menu li:hover .dropdown_5columns { |
125 |
left:-1px; |
126 |
top:auto; |
127 |
}
|
128 |
|
129 |
/* Columns */
|
130 |
|
131 |
.col_1, |
132 |
.col_2, |
133 |
.col_3, |
134 |
.col_4, |
135 |
.col_5 { |
136 |
display:inline; |
137 |
float: left; |
138 |
position: relative; |
139 |
margin-left: 5px; |
140 |
margin-right: 5px; |
141 |
}
|
142 |
.col_1 {width:130px;} |
143 |
.col_2 {width:270px;} |
144 |
.col_3 {width:410px;} |
145 |
.col_4 {width:550px;} |
146 |
.col_5 {width:690px;} |
147 |
|
148 |
/* Right alignment */
|
149 |
|
150 |
#menu .menu_right { |
151 |
float:right; |
152 |
margin-right:0px; |
153 |
}
|
154 |
#menu li .align_right { |
155 |
/* Rounded Corners */
|
156 |
-moz-border-radius: 5px 0px 5px 5px; |
157 |
-webkit-border-radius: 5px 0px 5px 5px; |
158 |
border-radius: 5px 0px 5px 5px; |
159 |
}
|
160 |
#menu li:hover .align_right { |
161 |
left:auto; |
162 |
right:-1px; |
163 |
top:auto; |
164 |
}
|
165 |
|
166 |
/* Drop Down Content Stylings */
|
167 |
|
168 |
#menu p, #menu h2, #menu h3, #menu ul li { |
169 |
font-family:Arial, Helvetica, sans-serif; |
170 |
line-height:21px; |
171 |
font-size:12px; |
172 |
text-align:left; |
173 |
text-shadow: 1px 1px 1px #FFFFFF; |
174 |
}
|
175 |
#menu h2 { |
176 |
font-size:21px; |
177 |
font-weight:400; |
178 |
letter-spacing:-1px; |
179 |
margin:7px 0 14px 0; |
180 |
padding-bottom:14px; |
181 |
border-bottom:1px solid #666666; |
182 |
}
|
183 |
#menu h3 { |
184 |
font-size:14px; |
185 |
margin:7px 0 14px 0; |
186 |
padding-bottom:7px; |
187 |
border-bottom:1px solid #888888; |
188 |
}
|
189 |
#menu p { |
190 |
line-height:18px; |
191 |
margin:0 0 10px 0; |
192 |
}
|
193 |
|
194 |
#menu li:hover div a { |
195 |
font-size:12px; |
196 |
color:#015b86; |
197 |
}
|
198 |
#menu li:hover div a:hover { |
199 |
color:#029feb; |
200 |
}
|
201 |
.strong { |
202 |
font-weight:bold; |
203 |
}
|
204 |
.italic { |
205 |
font-style:italic; |
206 |
}
|
207 |
.imgshadow { |
208 |
background:#FFFFFF; |
209 |
padding:4px; |
210 |
border:1px solid #777777; |
211 |
margin-top:5px; |
212 |
-moz-box-shadow:0px 0px 5px #666666; |
213 |
-webkit-box-shadow:0px 0px 5px #666666; |
214 |
box-shadow:0px 0px 5px #666666; |
215 |
}
|
216 |
.img_left { /* Image sticks to the left */ |
217 |
width:auto; |
218 |
float:left; |
219 |
margin:5px 15px 5px 5px; |
220 |
}
|
221 |
#menu li .black_box { |
222 |
background-color:#333333; |
223 |
color: #eeeeee; |
224 |
text-shadow: 1px 1px 1px #000; |
225 |
padding:4px 6px 4px 6px; |
226 |
|
227 |
/* Rounded Corners */
|
228 |
-moz-border-radius: 5px; |
229 |
-webkit-border-radius: 5px; |
230 |
border-radius: 5px; |
231 |
|
232 |
/* Shadow */
|
233 |
-webkit-box-shadow:inset 0 0 3px #000000; |
234 |
-moz-box-shadow:inset 0 0 3px #000000; |
235 |
box-shadow:inset 0 0 3px #000000; |
236 |
}
|
237 |
#menu li ul { |
238 |
list-style:none; |
239 |
padding:0; |
240 |
margin:0 0 12px 0; |
241 |
}
|
242 |
#menu li ul li { |
243 |
font-size:12px; |
244 |
line-height:24px; |
245 |
position:relative; |
246 |
text-shadow: 1px 1px 1px #ffffff; |
247 |
padding:0; |
248 |
margin:0; |
249 |
float:none; |
250 |
text-align:left; |
251 |
width:130px; |
252 |
}
|
253 |
#menu li ul li:hover { |
254 |
background:none; |
255 |
border:none; |
256 |
padding:0; |
257 |
margin:0; |
258 |
}
|
259 |
#menu li .greybox li { |
260 |
background:#F4F4F4; |
261 |
border:1px solid #bbbbbb; |
262 |
margin:0px 0px 4px 0px; |
263 |
padding:4px 6px 4px 6px; |
264 |
width:116px; |
265 |
|
266 |
/* Rounded Corners */
|
267 |
-moz-border-radius: 5px; |
268 |
-webkit-border-radius: 5px; |
269 |
border-radius: 5px; |
270 |
}
|
271 |
#menu li .greybox li:hover { |
272 |
background:#ffffff; |
273 |
border:1px solid #aaaaaa; |
274 |
padding:4px 6px 4px 6px; |
275 |
margin:0px 0px 4px 0px; |
276 |
}
|
Tautan-tautan Menarik dan Relevan
- Merancang Menu Drop-Down: Contoh dan Praktik Terbaik
- Menu Mega Drop-Down, Nikmati Secara Bertanggung Jawab!
- Menu Mega: Trend Desain Web Berikutnya
- Menu Navigasi Mega Drop-Down Bekerja dengan Baik
- 25 Contoh Menu Mega dalam Desain Web
- Menu Mega Drop-Down (46 contoh)
Kesimpulan
Saya harap Anda menikmati tutorial ini pada pembuatan menu mega. Terima kasih telah mengikuti!
