Thông tin tài liệu
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 : <ul> <li> menu1 </li> <li> menu2 </li> … <li> menun</li> </ul> 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: <html> <body> <ul> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul> <p>Note: We use href="#" for test links. In a real web site this would be URLs.</p> </body> </html> 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 : <style> ul { list-style-type:none; margin:0; padding:0; } </style> 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ẻ <a> </a> 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 : <html> <head> <style type="text/css"> ul { list-style-type:none; margin:0; padding:0; } li { display:inline; } </style> </head> <body> <ul> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul> </body> </html> 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 sao. 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: <html> <head> <title>Untitled Document</title> <style type="text/css"> 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 } </style> </head> <body> <ul> <li><a href="#"> home</a> </li> <li><a href="#"> news </a> </li> <li><a href="#"> contact </a> </li> <li><a href="#"> about </a> </li> </ul> </body> </html> 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ẻ <a>,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> đã 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ẻ <li> trong <ul>. 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> 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> 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 : <ul> <li><a> menu1</a> <ul> <li><a> menu11</a></li> </ul> </li> </ul> Nghĩa là chúng ta đặt thêm menu cấp 2 <ul> vào trong thẻ <li> 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 : <body> <ul id="menu"> <li><a href="#">menu cha</a> <ul> <li><a href="#"> menu con 1 </a></li> <li><a href="#"> menu con 2 </a></li> <li><a href="#"> menu con 3 </a></li> </ul> </li> </ul> </body> 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 [...]... 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ế ... 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...} 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ủ 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... Đ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;... 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 { . 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. 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 : <body> <ul id=" ;menu& quot;> <li><a href="#"> ;menu cha</a>. 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
Ngày đăng: 13/07/2014, 15:20
Xem thêm: Tạo menu với CSS potx
