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

<span class='text_page_counter'>(1)</span>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. <style type="text/css"> 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;fontsize: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*/.

<span class='text_page_counter'>(2)</span> width:auto;text-align:center;font-weight:bold; 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*/ border-bottom-right-radius:0px; border-bottom-left-radius:0px; border-top-right-radius:20px; border-top-left-radius:20px; } 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*/ border-bottom-right-radius:30px; border-bottom-left-radius:30px; border-top-right-radius:30px; border-top-left-radius:30px; } 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;.

<span class='text_page_counter'>(3)</span> 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*/ border-bottom-right-radius:0px; border-bottom-left-radius:0px; border-top-right-radius:0px; border-top-left-radius:0px; } 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*/ border-bottom-right-radius:30px; border-bottom-left-radius:0px; border-top-right-radius:0px; border-top-left-radius:8px;.

<span class='text_page_counter'>(4)</span> } 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; borderbottom:0px; padding: 0px 0px;" id="itlagi-Toolbar"> <div id="kotaru"> <div id="menu"><!-- Menu --> <ul id="mn"> <!—Bắt đầu liên kết các menu --> <li><a href="#" rel="nofollow" target="_blank"><img src= " q=tbn:ANd9GcT0y6ftJX6lEeIoEqYwQqlIi9CdlBxyKpS0aImtirV2bBkYOsVDCw" align="absmiddle" height="24" width="24" border="0" hspace= "5">Violet</a> <ul class="mn_con"> <li><a href=" 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=" 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=" rel="nofollow" target= "_blank"><img src= " align="absmiddle" height="24" width="24" border="0" hspace="5">Thư viện đề thi</a></li> <li><a href=" rel="nofollow" target= "_blank"><img src=.

<span class='text_page_counter'>(5)</span> " %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=" 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=" rel="nofollow" target= "_blank"><img src= " align="absmiddle" height="24" width="24" border="0" hspace= "5">Bạch Kim Violet</a></li> <li><a href=" rel="nofollow" target= "_blank"><img src= " align="absmiddle" height="24" width="24" border="0" hspace= "5">Lớp học trực tuyến</a></li> <li><a href=" rel="nofollow" target= "_blank"><img src= " align="absmiddle" height="24" width="24" border="0" hspace= "5">Đào tạo kĩ năng vi tính</a></li> <li><a href=" rel="nofollow" target= "_blank"><img src= " 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= " align="absmiddle" height="24" width="24" border="0" hspace= "5">Tiện ích</a> <ul class="mn_con"> <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" height="24" width="24" border="0" hspace="5"> Thư mục 2</a></li> <li><a href="Link liên kết" rel=.

<span class='text_page_counter'>(6)</span> "nofollow" target="_blank"><img src="Link logo" align="absmiddle" height="24" width="24" border="0" hspace="5"> Thư mục 3</a></li> <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 4</a></li> <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 5</a></li> </ul> </li> <li><a href="#" rel="nofollow" target="_blank"><img src= " align="absmiddle" height="24" width="24" border="0" hspace= "5">Đăng nhập</a> <ul class="mn_con"> <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" height="24" width="24" border="0" hspace="5"> Thư mục 2</a></li> <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 3</a></li> <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 4</a></li> <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 5</a></li> </ul> </li> <li><a href="#" rel="nofollow" target="_blank"><img src= " align="absmiddle" height="24" width="24" border="0" hspace="5"> Tin tức</a> <ul class="mn_con"> <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" height="24" width="24" border="0" hspace="5"> Thư mục 2</a></li> <li><a href="Link liên kết" rel=.

<span class='text_page_counter'>(7)</span> "nofollow" target="_blank"><img src="Link logo" align="absmiddle" height="24" width="24" border="0" hspace="5"> Thư mục 3</a></li> <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 4</a></li> <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 5</a></li> </ul> </li> <li><a href="#" rel="nofollow" target="_blank"><img src= " align="absmiddle" height="24" width="24" border="0" hspace= "5">Giải trí</a> <ul class="mn_con"> <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" height="24" width="24" border="0" hspace="5"> Thư mục 2</a></li> <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 3</a></li> <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 4</a></li> <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 5</a></li> </ul> </li> </ul> </div> </div> </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".

<span class='text_page_counter'>(8)</span> 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: <li><a href="#" rel="nofollow" target="_blank"><img src= "Link logo" align="absmiddle" height="24" width="24" border="0" hspace= "5">Tên thư mục chính</a> <ul class="mn_con"> <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 con 1</a></li> <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 con 2</a></li> <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 con 3</a></li> <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 con 4</a></li> <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 con 5</a></li> </ul> </li> 3. Nếu muốn thêm thư mục con thì copy dòng lệnh: <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 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!!!.

<span class='text_page_counter'>(9)</span>

<span class='text_page_counter'>(10)</span>