Code thanh menu ngang cuoi trang co menu con xo doc len 1cap Kieu 8

ul#mn{top:566px;/*Di chuyển toàn bộ menu*/ float:left;width:100%;/*Độ rộng nền chứa các menu chính*/ text-transform:uppercase;white-space:nowrap;font-family:sans-serif;font-weight:0;font[r]

Trang 1

Code thanh menu ngang cuối trang có menu con xổ dọc

lên 1 cấp (kiểu 8)

Như các menu ngang cuối trang khác, ở kiểu 8 có phần khác so với kiểu 6 và kiểu

7 ( thư mục con xổ ngang lên trên) Khi thầy cô rê chuột vào thư mục nào đó thì nó

sẽ hiện lên các thư mục con xổ dọc lên trên.

* Mô tả: Thầy cô có thể thay đổi địa chỉ (liên kết, logo), màu sắc, các thông số được tô đậm sao cho phù hợp.

ul#mn{top:566px;/*Di chuyển toàn bộ menu*/

float:left;width:100%;/*Độ rộng nền chứa các menu chính*/

text-transform:uppercase;white-space:nowrap;font-family:sans-serif;font-weight:0;font-size:13px;/* Size chữ thư mục chính*/

text-decoration:none;height:38px;/*Độ cao nền chứa các thư mục chính*/

line-height:35px;/*Di chuyển nội dung thư mục chính*/

position:relative;

padding-left:4px;/*Di chuyển các thư mục chính sang một bên*/

/*Màu nền chứa các thư mục chính*/

background-image: -webkit-linear-gradient(bottom, #FFFFFF, #FFFFFF, #FFFFFF); background-image: -moz-linear-gradient(bottom, #FFFFFF, #FFFFFF, #FFFFFF); background-image: -ms-linear-gradient(bottom, #FFFFFF, #FFFFFF, #FFFFFF); background-image: -o-linear-gradient(bottom, #FFFFFF, #FFFFFF, #FFFFFF);

/*Bo tròn chứa toàn bộ thư mục chính*/

border-bottom-right-radius:0px;

border-bottom-left-radius:0px;

border-top-right-radius:0px;

border-top-left-radius:0px;

}

ul#mn li ul.mn_con li {margin-top:0px!important;padding-top:0px!important;height:0px! important;width:0px;

background:transparent;border:none;border-bottom:1px solid ;

text-align:left;

}

ul#mn li{float:left;

height:35px;/*Độ cao thư mục chính*/

padding:0px 0px 0px 0px;border:0px;margin-top:2px;/*Di chuyển thư mục chính*/

Trang 2

border-right:1px solid #FFFFFF;/*Khoảng cách các thư mục chính và màu khoảng

cách*/

/*Màu nền thư mục chính khi chưa rê chuột vào*/

background-image: -webkit-linear-gradient(bottom, #111, #222, #111);

background-image: -moz-linear-gradient(bottom, #111, #222, #111);

background-image: -ms-linear-gradient(bottom, #111, #222, #111);

background-image: -o-linear-gradient(bottom, #111, #222, #111);

/*Bo tròn thư mục chính khi chưa rê chuột vào*/

}

ul#mn li a{

padding:1px 20px;/*Di chuyển nội dung và độ rộng thư mục chính*/

display:block;

color:#FFCC00;/*Màu chữ thư mục chính khi chưa rê chuột vào*/

text-decoration:none;}

ul#mn li:hover {

url(http://)no-repeat center top;border-right: 1px solid #999999;

/*Màu thư mục chính khi rê chuột vào*/

background-image: -webkit-linear-gradient(bottom, #0033FF, #1A47FF, #335CFF); background-image: -moz-linear-gradient(bottom, #0033FF, #1A47FF, #335CFF); background-image: -ms-linear-gradient(bottom, #0033FF, #1A47FF, #335CFF); background-image: -o-linear-gradient(bottom, #0033FF, #1A47FF, #335CFF);

/*Bo tròn thư mục chính khi rê chuột vào*/

}

ul#mn li:hover a{color:#FFFFFF;/*Màu chữ khi rê chuột vào thư mục chính*/

}

ul#mn li ul.mn_con {text-transform:capitalize;

font-size:13px;/* Size chữ thư mục con*/

padding:0px;display:none;height:auto;

line-height:30px;/*Di chuyển nội dung thư mục con*/

width:176px;/*Độ rộng nền chứa các thư mục con, có thể đổi 176px thành 100% để

thành menu con xổ ngang lên*/

padding:0px;position:absolute;left:auto;

Trang 3

bottom:26px;/*Di chuyển thu mục con lên xuống*/

border:none;margin-top: 0px!important;

}

ul#mn li ul.mn_con li {margin-top:0px!important;padding-top:0px!

important;height:29px!important;/*Độ cao thư mục con*/

width:220px;/*Độ rộng thư mục con*/

/*Màu nền thư mục con khi chưa rê chuột vào*/

background:transparent;border:none;

border-bottom:1px solid #FFFFFF;/*Khoảng cách các thư mục con và màu của nó*/

text-align:left;

/*Màu thư mục con khi chưa rê chuột vào*/

background-image: -webkit-linear-gradient(bottom, #111, #333, #666);

background-image: -moz-linear-gradient(bottom, #111, #333, #666);

background-image: -ms-linear-gradient(bottom, #111, #333, #666);

background-image: -o-linear-gradient(bottom, #111, #333, #666);

/*Bo tròn thư mục con khi chưa rê chuột vào*/

}

ul#mn li:hover ul{display:block;}

ul#mn li ul a {display:inline;}

ul#mn li ul mn_con li a{display:block!important;

}

ul#mn li ul li { list-style:inside;list-style-type:circle;

padding-left: 25px;

background:#FFFFFF;

color:#FFFFFF;

}

ul#mn li ul li:hover{

/*Màu thư mục con khi rê chuột vào*/

background-image: -webkit-linear-gradient(bottom, #FF00FF, #FFFFFF, #FF00FF); background-image: -moz-linear-gradient(bottom, #FF00FF, #FFFFFF, #FF00FF); background-image: -ms-linear-gradient(bottom, #FF00FF, #FFFFFF, #FF00FF); background-image: -o-linear-gradient(bottom, #FF00FF, #FFFFFF, #FF00FF);

/*Bo tròn thư mục con khi rê chuột vào*/

Trang 4

ul#mn li ul li a{padding-left: 1px!important;/* Di chuyển nội dung thư mục con*/

}

ul#mn li ul li:hover a{color:#0033FF;/*Màu chữ khi rê chuột vào thư mục con*/

}

</style>

<div style=

"position: fixed; width: 100%; height: 0px; z-index: 0; left: -22px;top: 0px;

border-bottom:0px; padding: 0px 0px;"

id="itlagi-Toolbar">

<!—Bắt đầu liên kết các menu >

<li><a href="#" rel="nofollow" target="_blank"><img src=

"http://t1.gstatic.com/images?

q=tbn:ANd9GcT0y6ftJX6lEeIoEqYwQqlIi9CdlBxyKpS0aImtirV2bBkYOsVDCw" align="absmiddle" height="24" width="24" border="0" hspace=

"5">Violet</a>

<li><a href="http://violet.vn/main/" rel="nofollow" target=

"_blank"><img src=

q=tbn:ANd9GcRRAuF5UWAl4Jb00Eofsehy5A7As18XXO5wWc4xwxznNEYSiSTS" align="absmiddle" height="24" width="24" border="0" hspace="5">Thư

viện trực tuyến</a></li>

<li><a href="http://giaoan.violet.vn/" rel="nofollow" target=

"_blank"><img src=

q=tbn:ANd9GcTXrMWJzVYyMig9oO8yresM86iFLkxbSVN_C_p1jy9fU8GmEhyCfg" align="absmiddle" height="24" width="24" border="0" hspace="5">Thư

viện giáo án</a></li>

<li><a href="http://dethi.violet.vn/" rel="nofollow" target=

"_blank"><img src=

"http://icons.iconarchive.com/icons/harwen/pleasant/32/Default-Icon-icon.png"

align="absmiddle" height="24" width="24" border="0" hspace="5">Thư

viện đề thi</a></li>

<li><a href="http://baigiang.violet.vn/" rel="nofollow" target=

"_blank"><img src=

Trang 5

%20Violet_080215233923.jpg"

align="absmiddle" height="24" width="24" border="0" hspace="5">Thư

viện bài giảng</a></li>

<li><a href="http://tulieu.violet.vn/" rel="nofollow" target=

"_blank"><img src=

q=tbn:ANd9GcSyO9sGFbDX_GgnK50Hyu_dBhjTIBpmW0CCV0Si2pbs0cNCwdRv" align="absmiddle" height="24" width="24" border="0" hspace="5">Thư

viện tư liệu</a></li>

<li><a href="http://bachkim.violet.vn/" rel="nofollow" target=

"_blank"><img src=

" http://icons.iconarchive.com/icons/mcdo-design/cats-2/32/Blue-Library-icon.png" align="absmiddle" height="24" width="24" border="0" hspace=

"5">Bạch Kim Violet</a></li>

<li><a href="http://lophoc.violet.vn/" rel="nofollow" target=

"_blank"><img src=

"http://icons.iconarchive.com/icons/rade8/snow-e2-aqua/32/Online-iTools-icon.png" align="absmiddle" height="24" width="24" border="0" hspace=

"5">Lớp học trực tuyến</a></li>

<li><a href="http://daotao.violet.vn/" rel="nofollow" target=

"_blank"><img src=

"http://icons.iconarchive.com/icons/icons-land/vista-hardware-devices/32/Portable-Computer-icon.png"

align="absmiddle" height="24" width="24" border="0" hspace=

"5">Đào tạo kĩ năng vi tính</a></li>

<li><a href="http://blog.violet.vn/" rel="nofollow" target=

"_blank"><img src=

"http://icons.iconarchive.com/icons/mattahan/buuf/32/Task-List-icon.png"

align="absmiddle" height="24" width="24" border="0" hspace="5">Danh

sách trang riêng</a></li>

</ul>

</li>

<li><a href="#" rel="nofollow" target="_blank"><img src=

"http://icons.iconarchive.com/icons/artua/mac/32/Network-Utility-icon.png"

"5">Tiện ích</a>

<li><a href="Link liên kết" rel=

"nofollow" target="_blank"><img src="Link logo" align="absmiddle"

height="24" width="24" border="0" hspace="5"> Thư mục 1</a></li>

<li><a href="Link liên kết" rel=

"nofollow" target="_blank"><img src="Link logo" align="absmiddle"

Trang 6

</ul>

</li>

<li><a href="#" rel="nofollow" target="_blank"><img src=

"http://icons.iconarchive.com/icons/aha-soft/security/32/login-icon.png"

"5">Đăng nhập</a>

</ul>

</li>

"http://icons.iconarchive.com/icons/itzikgur/my-seven/32/Newspapers-1-icon.png" align="absmiddle" height="24" width="24" border="0" hspace="5"> Tin

tức</a>

Trang 7

</ul>

</li>

"http://icons.iconarchive.com/icons/uriy1966/steel-system/32/Library-Windows-icon.png"

"5">Giải trí</a>

height="24" width="24" border="0" hspace="5"> Thư mục 1</a></li>

</ul>

</li>

</ul>

</div>

* Mở rộng thêm:

1 Nếu liên kết ở trang hiện tại thì thầy cô bỏ dòng lệnh: rel="nofollow" target=" _blank"

Trang 8

2 Nếu muốn thêm thư mục chính và các thư mục con xổ dọc lên thì copy dòng lệnh:

"Link logo"

"5">Tên thư mục chính</a>

<ul class="mn_con">

height="24" width="24" border="0" hspace="5"> Thư mục con 1</a></li>

</ul>

</li>

3 Nếu muốn thêm thư mục con thì copy dòng lệnh:

height="24" width="24" border="0" hspace="5"> Thư mục con </a></li>

Rồi dán:

+ Dưới dòng lệnh: <ul class="mn_con">

+ Trên dòng lệnh: </ul> </li>

Chúc thầy cô và các bạn thành công!!!

Định dạng
Số trang	9
Dung lượng	8,89 KB