hôm nay mình tình cờ vào một số website thấy họ tạo được cái menu đa cấp bằng css kiểu kiểu như thế này:
cảm ơn các bạn rất nhiều!
đâu tiên bạn tạo 1 file html:
và có nội dung như sau :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>me nu da cap</title>
</head>
chào mọi người !
mình là sơn hiện đang là học viên công ty An Tâm Đức môt công ty phần mềm.
và đến hôn nay là mình đã học được 5 buổi dồi. được sự hướng dẫn nhiệt tình của thầy giáo Thắng <-- một chuyên gia lập trình viên php - css - html -->
hôm nay mình tình cờ vào một số website thấy họ tạo được cái menu đa cấp bằng css kiểu kiểu như thế này:
cảm ơn các bạn rất nhiều!
đâu tiên bạn tạo 1 file html:
và có nội dung như sau :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>me nu da cap</title>
</head>
<link type="text/css" href="menu1.css" rel="stylesheet" />
<body>
<div id="wrapper">
<marquee> chương trình được thực hiện bởi <b><font color="#FF0000" size="+2">chu ngọc sơn </font></b>cảm ơn các bạn đã quan tâm.moi thắc mắc xin gửi về địa chỉ maik:chungocson89@gmail.com</marquee>
<div id="menu">
<ul id="cap1">
<li id="cap2"><a href="" class="a1">san pham 1</a>
<ul id="cap3">
<li id="cap4"><a href="" class="a2">ban hàng</a>
<ul id="cap5">
<li id="cap6"><a href="">san pham 1</a></li>
<li id="cap6"><a href="">san pham 1</a></li>
<li id="cap6"><a href="">san pham 1</a></li>
</ul>
</li>
<li id="cap4"><a href="" class="a2">mua sam</a>
<ul id="cap5">
<li id="cap6"><a href="">san pham 2</a></li>
<li id="cap6"><a href="">san pham 2</a></li>
<li id="cap6"><a href="">san pham 2</a></li>
</ul>
</li>
<li id="cap4"><a href="" class="a2">thuc don</a>
<ul id="cap5">
<li id="cap6"><a href="">san pham 3</a></li>
<li id="cap6"><a href="">san pham 3</a></li>
<li id="cap6"><a href="">san pham 3</a></li>
</ul>
</li>
</ul>
</li>
<li id="cap2"><a href="" class="a1">san pham 2</a>
<ul id="cap3">
<li id="cap4"><a href="" class="a2">tro choi</a>
<ul id="cap5">
<li id="cap6"><a href="">san pham 1</a></li>
<li id="cap6"><a href="">san pham 1</a></li>
<li id="cap6"><a href="">san pham 1</a></li>
</ul>
</li>
<li id="cap4"><a href="" class="a2">phong tuc</a>
<ul id="cap5">
<li id="cap6"><a href="">san pham 2</a></li>
<li id="cap6"><a href="">san pham 2</a></li>
<li id="cap6"><a href="">san pham 2</a></li>
</ul>
</li>
<li id="cap4"><a href="" class="a2">truyen thong</a>
<ul id="cap5">
<li id="cap6"><a href="">san pham 3</a></li>
<li id="cap6"><a href="">san pham 3</a></li>
<li id="cap6"><a href="">san pham 3</a></li>
</ul>
</li>
</ul>
</li>
<li id="cap2"><a href="" class="a1">san pham 3</a>
<ul id="cap3">
<li id="cap4"><a href="" class="a2">co tuong</a>
<ul id="cap5">
<li id="cap6"><a href="">san pham 1</a></li>
<li id="cap6"><a href="">san pham 1</a></li>
<li id="cap6"><a href="">san pham 1</a></li>
</ul>
</li>
<li id="cap4"><a href="" class="a2">co vua</a>
<ul id="cap5">
<li id="cap6"><a href="">san pham 2</a></li>
<li id="cap6"><a href="">san pham 2</a></li>
<li id="cap6"><a href="">san pham 2</a></li>
</ul>
</li>
<li id="cap4"><a href="" class="a2">co nguoi</a>
<ul id="cap5">
<li id="cap6"><a href="">san pham 3</a></li>
<li id="cap6"><a href="">san pham 3</a></li>
<li id="cap6"><a href="">san pham 3</a></li>
</ul>
</li>
</ul>
</li>
<li id="cap2"><a href="" class="a1">san pham 4</a>
<ul id="cap3">
<li id="cap4"><a href="" class="a2">ban hàng</a>
<ul id="cap5">
<li id="cap6"><a href="">san pham 1</a></li>
<li id="cap6"><a href="">san pham 1</a></li>
<li id="cap6"><a href="">san pham 1</a></li>
</ul>
</li>
<li id="cap4"><a href="" class="a2">mua sam</a>
<ul id="cap5">
<li id="cap6"><a href="">san pham 2</a></li>
<li id="cap6"><a href="">san pham 2</a></li>
<li id="cap6"><a href="">san pham 2</a></li>
</ul>
</li>
<li id="cap4"><a href="" class="a2">thuc don</a>
<ul id="cap5">
<li id="cap6"><a href="">san pham 3</a></li>
<li id="cap6"><a href="">san pham 3</a></li>
<li id="cap6"><a href="">san pham 3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
tiêp đến bạn tạo 1 file css có tên là :menu1.css
chú ý: bạn phải tạo đúng file này nhé không là file html không liên kêt được với file css là không ra đâu bạn nhé.
nội dung css như sau :
@charset "utf-8";
/* CSS Document */
*{
padding:0px;
margin:0px;
}
#wrapper{
width:1000px;
margin:auto;
background:#399;
}
/* phan lam viec*/
#menu #cap1{
margin-left:230px;
padding-top:50px;
width:510px;
height:400px;
background:url(img/me-nu-da-cap.jpg);
border-radius:15px;
}
#menu #cap1 li{
list-style:none;
}
#menu #cap1 #cap2 a{
text-decoration:none;
color:#FFF;
}
#menu #cap1 #cap2 a:hover{
color:#C00;
}
#menu #cap1 #cap2:hover #cap3 {
display:block;
}
#menu #cap1 #cap2{
position:relative;
}
#menu #cap1 #cap2 #cap3 #cap4 a{
padding-top:20px;
}
#menu #cap1 #cap2 #cap3 #cap4{
margin-bottom:3px;
float:left;
width:140px;
height:50px;
}
#menu #cap1 #cap2 #cap3{
float:left;
height:200px;;
margin-left:85px;
background:#CCC;
display:none;
position:absolute;
border-radius:10px;
}
#menu #cap1 .a1{
text-align:center;
background:#999;
margin-left:10px;
}
#menu #cap1 .a2{
text-align:center;
padding-left:10px;
}
#menu #cap1 #cap2 #cap3 #cap4 #cap5{
padding-left:25px;
float:left;
background:#693;
}
#menu #cap1 #cap2 #cap3 #cap4 #cap5 #cap6 a{
float:left;
width:60px;
width:100px;
}
còn đây là sản phẩm các bạn dowlaod về xem thử nhé:
các bạn dowload : http://www.mediafire.com/download/yvnrfm0plhbn43l/css-menu-da-cap.rar
Không có nhận xét nào:
Đăng nhận xét