Tạo menu với CSS

Chia sẻ: Pham Jngocj Hiếu Hieu | Ngày: | Loại File: PDF | Số trang:18

Thêm vào BST

Báo xấu

409
lượt xem 130
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Các bạn có thể tải các file demo ở link sau : http://www.mediafire.com/?o4c8upd8pmlys7p Trong các web site các thanh menu đã trở thành quen thuộc và đóng một vai trò rất quan trọng.Trong bài học này chúng ta sẽ học cách sử dụng CSS để tạo nên các menu cho trang web. Trước khi đi vào vấn đề cụ thể các bạn cần chú ý rằng, thực ra menu bar của trang web cũng chỉ là một danh sách các link mà thôi.Chính vì vậy mà khi làm các menu này các bạn có thể thấy rằng các nhà phát...

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Tạo menu với CSS

Tạo menu với CSS Các bạn có thể tải các file demo ở link sau : http://www.mediafire.com/?o4c8upd8pmlys7p Trong các web site các thanh menu đã trở thành quen thuộc và đóng một vai trò rất quan trọng.Trong bài học này chúng ta sẽ học cách sử dụng CSS để tạo nên các menu cho trang web. Trước khi đi vào vấn đề cụ thể các bạn cần chú ý rằng, thực ra menu bar của trang web cũng chỉ là một danh sách các link mà thôi.Chính vì vậy mà khi làm các menu này các bạn có thể thấy rằng các nhà phát triển web họ hay sử dụng cấu trúc : menu1 menu2 ….. menun Và quả thật lời khuyên của tôi dành cho các bạn là hãy sử dụng cấu trúc này để thực hiện việc xây dựng các thanh menu cho website của bạn. Và tất nhiên nếu như chỉ nói đến đây một số bạn sẽ thắc mắc rằng nếu như sử dụng cấu trúc trên thì chúng ta đang tạo ra một list HTML hay sao,chẳng thấy dáng dấp gì của một menu bar của website cả.Để trả lời cho câu hỏi này thì trước hết tôi cũng rất thông cảm cho người đã đưa ra câu hỏi,bởi vì chỉ những người mới bắt đầu tìm hiểu về CSS thì mới hỏi như vậy thôi,và để cho nó dáng dấp của một menu bar thì bạn phải sử dụng CSS để tạo dáng cho nó,chẳng phải cuốn sách này của chúng ta đang tìm hiểu về CSS hay sao ?. Bây giờ chúng ta sẽ thử tìm hiểu qua ví dụ cụ thể sau : Code: Home News
Contact About Note: We use href="#" for test links. In a real web site this would be URLs. Ví dụ này chúng ta chỉ tạo ra một list các link bằng HTML đơn giản mà thôi,các bạn sẽ thấy ngay kết quả hiện thị như sau : Tôi không nói nhiều về đoạn mã này nữa. Bây giờ tiếp theo cũng là đoạn mã trên nhưng chúng ta tạo dáng cho nó bằng chèn thêm đoạn CSS như sau : ul { list-style-type:none; margin:0; padding:0; } Kết quả hiện thị như sau: Đoạn CSS đã phát huy tác dụng của nó,thuộc tính list -style-type nếu như các bạn chưa biết thì có thể tìm hiểu các chỉ dẫn trên các phương tiện tìm kiếm. Tiếp theo chúng ta sẽ thực hiện việc liên kết các link này thành một khối,chúng ta có thể hiểu rằng các link này sẽ tạo thành một khối menu có quan hệ với nhau. Chúng ta sẽ thêm đoạn CSS này như sau : a {
display:block; width:60px; background-color:#dddddd; } đoạn CSS này có nghĩa là : các đối tượng nằm trong thẻ sẽ liên kết với nhau tạo thành một khối,và khối đó sẽ có chiều rộng bằng 60px,màu nền là màu xám. Kết quả hiện thị sẽ như sau: Tất nhiên nếu như một thanh menu bar của trang web như thế này thì theo tôi đúng là xấu thật,xấu hết chỗ nói.Nhưng ở đây chỉ là đơn giản hóa vấn đề để cho bạn dễ hiểu thôi,nếu như các bạn muốn trông nó dễ nhìn hơn thì chỉ cần thêm vào một và i đoạn mã CSS là được thôi mà,sau bài này chúng ta sẽ có một vài bài thực hành tạo menu và tất nhiên những yêu cầu về thẩm mỹ của những menu đó sẽ cao hơn. Tiếp theo chúng ta sẽ học cách tạo ra những thanh menu ngang,như thế thì việc đầu tiên chúng cần làm là phải hiện thị các link trong list ul trên cùng một dòng,để thực hiện điều này các bạn có hai cách: hoặc là các bạn sử dụng thuộc tính display với giá trị là inline, hoặc là sử dụng thuộc tính float với giá trị left hay right thì tùy( tuy rằng trong nhiều trường hợp sử dụng float vẫn tốt hơn). Ví dụ dưới đây chúng ta sẽ hiện thị các liên kết trên cùng một dòng : ul { list-style-type:none; margin:0; padding:0; } li { display:inline; }
Home News Contact About Kết quả hiện thị như sau: Nếu như chúng ta sử dụng đoạn mã CSS sau với thuộc tính float thì kết quả hiện thị cũng như trên : li { float:left; } a { display:block; width:60px; } thực ra để thuần thục các kĩ năng này các bạn chỉ có một cách là thực hành thật nhiều,các trang web trên mạng có vô số kiểu khác nhau,hãy tham khảo và tập làm theo xem sa o. Chú ý : thật tuyệt vời khi trên mạng có những tài nguyên vô giá mà các bạn có tham khảo hoàn toàn miễn phí,chẳng hạn như ngay vấn đề về menu bar này thôi các bạn có thể tham khảo tại trang http://www.cssmenumaker.com một trang web cung cấp rất nhiều mẫu menu đẹp,đơn giản và thậm chí là còn có cả mã nguồn nữa. Sau đây là một số bài thực hành bắt buộc các bạn phải làm,hãy luyện tập kĩ năng của bạn,dù sao thì những bài này cũng không phải là khó 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 t rong 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 me nu 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 đó.