Tạo menu 2 cấp bằng CSS - 16 August 2010 - All 4 You
Monday, 23-Jan-2017, 2:17 AM
Welcome Guest | RSS
Main » 2010 » August » 16 » Tạo menu 2 cấp bằng CSS
3:17 PM
Tạo menu 2 cấp bằng CSS

Với CSS, bạn có thể làm được nhiều thứ hơn là một trang web đẹp. Vũ vừa làm xong một đoạn menu 2 cấp bằng CSS để chia sẻ với anh em UNET VIỆT. 

Sau đây là các đoạn mã 

Đoạn mã CSS: 
Code

<style type="text/css" media="screen"> 
body{ behavior:url("csshover2.htc"); } 
.pd_menu_01 {float:left; padding:0; margin:0;color: #FFFFFF;background: #FF0000;width:100%; border:solid 1px #004080;clear:both;} /*Color navigation bar normal mode*/ 
.pd_menu_01  a, .pd_menu_01 a:visited { 
font-family:Arial, Helvetica, sans-serif; 
font-style:normal; 
font-weight:normal; 
font-size:14px; 
color: #FFFFFF; 
background-color: #FF0000; 
text-decoration: none; 

.pd_menu_01 ul {list-style-type:none;padding:0; margin:0;} 
.pd_menu_01 ul li {float:left; position:relative; z-index:auto !important ; z-index:1000 ; border-right:solid 1px #004080; border-left:solid 1px #004080;} 
.pd_menu_01 ul li a {color: #FFFFFF;background: #FF0000;float:none !important ; float:left ; display:block; height:30px; line-height:30px; padding:0 10px 0 10px; text-decoration:none; } 
.pd_menu_01 ul li ul {display:none; border:none;color: #FFFFFF;background: #FF0000; width:1px} 
.pd_menu_01 ul li:hover a {background-color:#BE4A05; text-decoration:none; color:#FFFF80;} /*Color main cells hovering mode*/ 
.pd_menu_01 ul li:hover ul {display:block;  position:absolute; z-index:999; top:29px; margin-top:1px; left:0;} 
.pd_menu_01 ul li:hover ul li a {display:block; width:200px; height:auto; line-height:1.3em; margin-left:-1px; padding:5px 10px 5px 10px; border-left:solid 1px #004080; border-bottom: solid 1px #004080; background-color:#FF0080;  color:#00FFFF;} /*Color subcells normal mode*/ 
.pd_menu_01 ul li:hover ul li a:hover {background-color:#B0330F; text-decoration:none;color:#FFFF00;} /*Color subcells hovering mode*/ 
.pd_menu_01 ul li a:hover {background-color:#BE4A05; text-decoration:none;color:#FFFF80;} /*Color main cells hovering mode*/ 
.pd_menu_01 ul li a:hover ul {display:block; width:200px; position:absolute; z-index:999; top:29px; left:0; } 
.pd_menu_01 ul li ul li a:visited { background-color:#FF0080;  color:#00FFFF;} /*Color subcells normal mode*/ 
.pd_menu_01 ul li a:hover ul li a {display:block; width:200px; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px #004080; border-bottom: solid 1px #004080; background-color:#FF0080;  color:#00FFFF;} 
.pd_menu_01 ul li a:hover ul li a:hover {background-color:#B0330F; text-decoration:none;color:#FFFF00;} /*Color subcells hovering mode*/ 
</style>

Bạn copy đoạn mã trên dán vào phía trên thẻ </head> nhé

Đoạn mã menu

Code
<div class="pd_menu_01 "> 
<ul><li><a href="#">Trang chủ</a> 
</li></ul> 

<ul><li><a href="#">Tin tức</a> 
<ul> 
<li><a href="#"  >Tin tổng hợp</a></li> 
<li><a href="#"  >Tin nóng</a></li> 
<li><a href="#"  >Tin chuối</a></li> 
</ul> 
</li></ul> 

<ul><li><a href="#">Phần mềm</a> 
<ul> 
<li><a href="#"  >Phần mềm văn phòng</a></li> 
<li><a href="#"  >Phần mềm đồ họa</a></li> 
<li><a href="#"  >Phần mềm bảo mật</a></li> 
<li><a href="#"  >Phần mềm online</a></li> 
</ul> 
</li></ul> 

<ul><li><a href="#">Thư viện E-book</a> 
<ul> 
<li><a href="#"  >E-book CNTT</a></li> 
<li><a href="#"  >E-book dành cho sinh viên</a></li> 
</ul> 
</li></ul> 

<ul><li><a href="#">Diễn đàn</a> 
</li></ul> 

<ul><li><a href="#">Blog</a> 
</li></ul> 
</div>

Đoạn mã menu bạn dán vào chỗ mà bạn muốn hiển thị trên trang web. Đối với trang UCOZ bạn có thể dáng váo phần top part of the website. Bạn có thể thay đổi tên menu trong đoạn mã trên cho phù hợp với site của bạn.


CHÚC BẠN THÀNH CÔNG!

Category: Menu | Views: 702 | Added by: all4u | Tags: menu | Rating: 0.0/0
Total comments: 2
2  
is apt to the few of occasions,<a href="http://lntzehvbv.com"> pptsidrosieion</a> arm in his hands look salt curtailed, caught in the armpit since it seems ritzy; carrying limerick corner, arms drooping as expected, is inwards handsome.Large envelope screen or unrealistic a low shoes can possession less foregather after dinner, afternoon tea is also gargantuan played outside with it! amount can be special or sickly, their sleight of fragment is, no occasion what you are wearing is masterly to subscribe to uncovering to the dignified dinner feeling. Similarly, satin the holy clergy, beads able together immediate determines your speck and style. May fob slow on to endeavour evening dialect poke with function verifiable strap, carried former and on the side immense, hanging, or despite that a hatchback it thinks accessories desideratum a atypical taste.

1  
Good to find an expert who knows what he's takinlg about!

Only registered users can add comments.
[ Registration | Login ]
Login Form
Nhận bài qua Email


Đăng ký để nhận thông tin
và bài post mới nhất qua email

Chuyên mục
Toàn tập Dmon/ Ucoz [22]
Hướng dẫn thiết kế website với dịch vụ của Dmon.com/ Ucoz.com,...
Code [18]
Các code giúp bạn cá nhân hóa trang web của bạn
Design [21]
Các công cụ web giúp thiết kế web....
Featured Post - Image Gallery [15]
Menu [5]
Các Menu đẹp cho web của bạn
Tab Content [6]
Templates [3]
Toàn bộ thiết kế Template
Khác [0]
Rearch
Thống kê

Total online: 1
Guests: 1
Users: 0
Bản đồ truy cập
Locations of visitors to this page