Tạo menu với CSS

khăn gì. 
bài tập: 
hãy tạo ra các menu bar như sau : 
Thực ra thì việc tạo ra những menu không khó là mấy nếu như các bạn đã tìm hiểu bài trên,sau 
đây là đoạn mã tham khảo về menu bar dạng đứng: 
Untitled Document 
 ul 
 { 
 list-style-type:none; 
 } 
 a 
 { 
 display:block; 
 width:100px; 
 text-align:center; 
 padding-bottom:5px; 
 background-color:#339966; 
 text-decoration:none; 
 text-transform:uppercase; 
 color:#FFFFFF; 
 font-weight:bold 
 } 
 a:hover 
 { 
 background-color:#999966 
 } 
 home 
 news 
 contact 
 about 
Thuộc tính display:block đã thể hiện được vai trò của nó việc hiện thị thanh menu bar của chúng 
ta. 
Bây giờ để chuyển menu trên thành menu dạng nằm ngang thì chúng ta không cần phải chỉnh 
sửa lại toàn bộ mã làm gì cho mệt,chỉ cần thêm thuộc tính float:left vào thẻ a là được mà thôi. 
a 
 { 
 display:block; 
 width:100px; 
 text-align:center; 
 padding-bottom:5px; 
 background-color:#339966; 
 text-decoration:none; 
 text-transform:uppercase; 
 color:#FFFFFF; 
 font-weight:bold; 
 float:left 
 } 
Chú ý : một số bạn hiểu nhầm về thuộc tính width ở trên,thực ra khi các bạn qui định giá trị 
block cho thuộc tính display của thẻ a, nghĩa là các thẻ a sẽ tạo thành những khối nằm chồng lên 
nhau,và chiều rộng cho mỗi khối ấy là 100px. 
Bây giờ tôi sẽ yêu cầu các bạn thực hiện tạo ra một menu bar nằm ngang như trên, nhưng khi 
hover thì các menu sẽ hiện thị như sau 
Để khi hover các bạn thấy có một mũi tên hiện ra thì chỉ cần tạo background là được mà thôi, 
trước hết hãy tạo ra một ảnh nền như sau: 
Sau đó tạo hiệu ứng hover như sau : 
a:hover 
 { 
 background-image:url(Untitled-1.gif) 
 } 
Mọi chuyện thật đơn giản phải không ? đến bây giờ hãy sử dụng kĩ năng photoshop của bạn để 
tạo nên những menu bar tuyệt vời. 
Tiếp theo chúng ta sẽ thực hành tạo ra một menu bar như sau : 
Để làm được menu này trước hết chúng ta phải tạo ra 3 bức hình như sau : 
3 bức hình này sẽ là backround của các menu trong các trường hợp hover,link,active thẻ ,giải 
thuật cũng chỉ có thế thôi,nhiệm vụ bây giờ chỉ còn là dựng CSS tạo dáng đẹp đẽ cho menu mà 
thôi. 
Bước 1 : chúng ta sẽ tạo dáng cho đối tượng đã 
ul 
 { 
 list-style-type:none; 
 padding:0; 
 margin:0; 
 } 
Mã CSS này sẽ làm mất các dấu đầu dòng ở mỗi thẻ trong . 
Bước 2: chúng ta muốn các nhãn của menu phải nằm chính giữa menu để trông cho nó đẹp,vậy 
thì phải qui định thuộc tính cho thẻ 
li 
 { 
 text-align:center; 
 width:200px 
 } 
Thực ra thì trong trường hợp này thuộc tính width có hay không cũng chẳng sao. 
Bước 3: đây là bước quan trọng nhất,chúng ta sẽ dùng CSS để qui định tính chất cho mỗi thẻ 
a 
 { 
 display:block; 
 width:200px; 
 height:25px; 
 padding-top:7px; 
 color:#00A4A4; 
 text-decoration:none; 
 text-transform:uppercase; 
 font-weight:bold; 
 background-image:url(menu1.gif); 
 font-family:"Courier New", Courier, monospace 
 } 
 a:hover 
 { 
 background-image:url(menu2.gif); 
 background-repeat:no-repeat 
 } 
 a:active 
 { 
 background-image:url(menu3.gif); 
 background-repeat:no-repeat 
 } 
Bây giờ chúng ta không tạo ra những menu đơn như thế nữa, mà nhiệm vụ bây giờ sẽ cao hơn là 
tạo ra những menu đa cấp, nó còn được gọi là DropDow Menu 
Vâng tất nhiên thì cũng chẳng có gì là cao siêu cả khi tạo ra một menu như thế,quả đúng là như 
vậy các bạn hãy nghĩ mà xem bất kì một kĩ thuật viên về web nào đều cũng phải biết làm cái này 
chứ,và nó là cái cơ bản thì đúng hơn,vậy thì chúng ta sẽ bắt đầu ngay vấn đề này. 
Trước hết tôi xin nói với các bạn rằng cấu trúc chung về HTML của các DropDow Menu như sau 
: 
 menu1 
 menu11 
 Nghĩa là chúng ta đặt thêm menu cấp 2 vào trong thẻ của các menu cấp 1. 
Nói như trên có thể các bạn vẫn chưa hiểu, ok tôi sẽ đưa ra một ví dụ ở đây menu như hình : 
Trên đây là một menu đa cấp mà tôi đã tạo ra,có lẽ là nên làm đơn giản như vậy thôi,sẽ dễ dàng 
hơn cho các bạn tìm hiểu về kĩ thuật tạo ra menu đa cấp.Ở menu trên khi các bạn di chuột vào 
button menu cha thì ngay lập tức một danh sách các menu khác sổ xuống bao gồm menu con 1, 
menu con 2. Menu con 3. 
Đoạn mã HTML như sau : 
menu cha 
 menu con 1 
 menu con 2 
 menu con 3 
Tiếp theo là tạo dáng CSS cho nó: 
ul 
{ 
list-style:none 
} 
a 
{ 
display:block; 
width:140px; 
height:30px; 
background-color:#CC9900; 
text-decoration:none; 
text-align:center; 
padding-top:10px 
} 
ul li 
{ 
width:140px; 
height:40px 
} 
a:hover 
{ 
background-color:#666699 
} 
Đoạn mã CSS trên chắc tôi không cần phải giả thích nữa,bởi vì tôi đã nói về nó quán hiều trong 
trường hợp tạo các menu đơn ở trên.Nhưng chưa hết đâu nhé,vẫn còn một đoạn CSS nữa và nó 
mới là quan trọng nhất : 
ul#menu li ul 
{ 
display:none; 
padding-left:0px; 
} 
ul#menu li:hover ul 
{ 
display:block 
} 
Display : none là mấu chốt,nó sẽ làm cho thanh menu con chưa hiển thị ra khi các bạn chưa 
hover vào menu cha. 
Qua những lời giaỉ thích trên tôi nghĩ rằng không quá khó ( nếu như không muốn nói là dễ) để 
tạo ra một DropDown menu phải không ? 
Bây giờ chúng ta sẽ tạo ra một thanh menu đa cấp như sau : 
Sau đây là mã HTML của menu trên : 
 trang chủ 
 tim game 
 khủng bố 
 tin tức 
 kinh doanh 
 tim game 
 khủng bố 
 tim game 
 khủng bố 
 tim game 
 khủng bố 
Còn dưới đây là toàn bộ mã CSS của trang: 
 * 
 { 
 padding:0px; 
 margin:inherit 
 } 
 ul#menu 
 { 
 list-style:none; 
 } 
 ul#menu li 
 { 
 float:left; 
 text-align:center 
 } 
 ul#menu li a 
 { 
 text-decoration:none; 
 color:#FFFFFF; 
 display:block; 
 width:100px; 
 background-color:#006699 
 } 
 ul#menu li ul li 
 { 
 float:none 
 } 
 ul#menu li ul 
 { 
 display:none 
 } 
 ul#menu li:hover ul 
 { 
 display:block; 
 list-style:none 
 } 
 ul#menu li a:hover 
 { 
 background-color:#996600 
 } 
Tiếp theo chúng ta sẽ thực hiện việc tạo ra menu đa cấp nhưng các menu cấp cao luôn hiện bên 
cạnh menu cha như hình dưới đây: 
,Nếu như các bạn đã thực hiện được các menu đa cấp ở trên thì làm menu này cũng chẳng khó 
khăn gì là mấy,chẳng qua chúng ta chỉ cần đưa menu con sang bên phải một chút là được mà 
thôi.Sau đấy là code HTML của menu 
 kinh tế 
 chứng khoán 
 bất động sản 
 vàng 999 
 thể thao 
 ngoại hạng anh 
 cúp quốc gia 
 cúp C1 
 cúp liên đoàn 
 Lịch thi đấu 
 Bảng xếp hạng 
 tình yêu 
 bạn trẻ 
 thư tình 
 tâm sự 
 hình sự 
 vụ án 
 cảnh giác 
 tệ nạn 
 trinh thám 
 thuê thám tử 
 bảo vệ 
Còn đây là đoạn mã CSS của menu : 
Đoạn 1: 
* 
 { 
 padding:0; 
 margin:0; 
 border:0; 
 } 
 ul 
 { 
 list-style:none 
 } 
Đoạn mã CSS này thực ra không có vai trò quan trọng lắm để tạo nên một menu bar đa 
cấp,nhưng sự có mặt của nó sẽ làm cho menu trông đẹp mắt hơn. 
Đoạn 2: 
li,a 
 { 
 display:block; 
 width:100px; 
 height:20px; 
 background-color:#999933; 
 text-align:center; 
 text-decoration:none 
 } 
Đoạn mã này quan trọng nhất là thuộc tính display và thuộc tính width. 
Đoạn 3: 
ul#menucon 
 { 
 margin-left:100px; 
 display:none; 
 margin-top:-20px; 
 } 
Đoạn mã này nhiệm vụ của nó là gì chắc các bạn cũng biết,nó sẽ làm cho menu con dịch sang 
phải 100px so với menu cha,và không cho nó hiện thị ra khi chưa hover vào menu cha. 
Đoạn 4: 
ul#menucon li a 
 { 
 background-color:#009999 
 } 
 ul#menucha li:hover ul 
 { 
 display:block 
 } 
Có lẽ tôi sẽ không giải thích gì đoạn mã này bởi vì nó không có gì khó khăn đối với các bạn. 
Sau khi đã hoàn thành bài thực hành này tại sao các bạn lại không thử làm một menu bar như của 
website 24h.com.vn nhỉ ? 
Sau khi thực hiện tất cả các bài thực hành trên tôi nghĩ chắc các bạn cũng đã có thể thấy rằng 
việc tạo các menu bar cũng không có gì khó khăn,bây giờ tôi sẽ hướng dẫn các bạn làm loại 
menu bar cuối cùng,hình thức của loại menu đó như sau : 
Khi các bạn nhấn vào các menu cha thì các menu con sẽ hiện phía bên dưới như ở hình trên. 
Bây giờ tất nhiên tôi sẽ không hướng dẫn các bạn làm ra một cái y xỳ như cái menu bar trên bởi 
vì thật là rắc rối nếu như đưa code của nó cho các bạn,những đoạn code phụ lằng nhằng với mục 
đích làm đẹp sẽ làm cho các bạn rối mắt,khó nhận biết đâu là cái cốt lõi của loại menu trên.Chính 
vì vậy tôi xin đưa ra menu như hình dưới đây : 
Đúng thật là menu này xấu không thể chấp nhận được,nhưng các bạn yên tâm đi tuy nó xấu 
nhưng “kết cấu” của nó đẹp lắm,nhìn vào các bạn sẽ thấy ngay kĩ thuật để tạo ra loại menu này. 
Code HTML của “cô gái xấu xí” này như sau : 
 trang chủ 
 sitemap 
 sitemap 
 sitemap 
 kinh tế 
 tài chính 
 vàng 
 cổ phiếu 
 thể thao 
 bóng đá 
 quần vợt 
 tenis 
Không có vấn đề gì về code HTML 
Sau đây là đoạn mã CSS: 
Đoạn 1: 
* 
{ 
padding:0; 
margin:0 
} 
ul 
{ 
list-style:none 
} 
Đoạn này thì có hay không cũng chẳng sao,mục đích của nó là làm đẹp mà thôi,chưa phải cốt lõi 
của thanh menu này. 
Đoạn 2: 
ul#menucha 
{ 
position:relative 
} 
Tôi xin lưu ý với các bạn rằng đoạn mã CSS này rất quan trọng,nó là một trong 2 điều cốt lõi của 
menu này.Nghĩa là chúng ta phải cài đặt vị trí cho thẻ ngoài cùng là relative,mà khi đã cài 
đặt relative cho nó nghĩa là nó sẽ bao bọc toàn bộ các đối tượng nằm trong đó ( các bạn có thể 
hiểu là các đối tượng nằm trong thẻ to này sẽ không thể chạy ra khỏi nó.) 
Đoạn 3: 
ul#menucha li ul 
{ 
position:absolute 
} 
Đây là đoạn mã cốt lõi thứ 2 mà các bạn đang cần tìm,nghĩa là đối tượng con sẽ được định 
vị trí là absolute. 
Mấu chốt của menu này là hai đoạn code trên đó bạn. 
Đoạn 4 : 
li a 
{ 
display:block; 
width:100px; 
height:20px; 
background-color:#CCCCCC; 
text-decoration:none; 
text-align:center 
} 
ul#menucha li ul li 
{ 
float:left; 
display:none 
} 
ul#menucha li 
{ 
float:left; 
} 
ul#menucha li:hover ul li 
{ 
display:block 
} 
Đoạn code thứ 4 này cũng không phải là khó khăn gì bởi chúng ta đã quá quen với nó trong 
những menu bar trước đó.