Code thanh menu ngang cuoi trang kieu 6

Thầy cô VÀO ĐÂY và chọn kiểu chữ để tạo tên thư mục bằng logo và copy link nên chọn nền trong suốt: kích chuột vào Background rồi chọn Transparent.. Nếu muốn mở ở trang hiện tại, Thầy C[r]

Trang 1

Như các menu ngang cuối trang khác, ở kiểu 6 này có sự khác biệt so với kiểu 3 Khi thầy cô rê chuột vào thư mục nào đó thì nó sẽ hiện lên thanh menu chứa các thư mục con bên trong

Thầy cô có thể thay đổi màu sắc, khoảng cách thư mục sao cho phù hợp.

* Mô tả:

ul#topnav {

margin: 0; padding: 0;

float: left;

width: 100%;

list-style: none;

position: relative; /* Thiết lập vị trí của ul chứa menu */

font-family: Tahoma;

font-size: 12px;

color: #FFFFFF;

font-weight: Bold;

background-color: #33AA80; /* Màu nền trên menu 1*/

}

ul#topnav li {

float: left;

margin: 0; padding: 0;

Trang 2

border-rigth: 0px solid #555; /* các menu li */

}

ul#topnav li a {

padding: 9px 8.5px; /*Khoảng cách các nội dung */

display: block;

color: #FFFFFF; /*Màu chữ thư mục */

text-decoration: none;

}

#topnav li a:hover,

#topnav li a:active,

#topnav li a:focus {

color: #FF2E96; /* Màu chữ khi rê chuột vào 1*/

background-color:#EBFF38; /* Màu nền khi rê chuột vào 1*/

}

ul#topnav li:hover {background: #00A5F4; /* Màu nền trên menu cấp

1*/url(topnav_active.gif) repeat-x; }

ul#topnav li span {

float: left;

padding: 9px 0;

position: absolute;

left: 0; top:-32px; /* Di chuyển thanh menu cấp 2*/

Trang 3

display: none; /* mặc định menu cấp 2 là ẩn */

width: 100%;

background: #00A5F4;/* Màu nền trên menu cấp 2 */

color: #FF9999; /* Màu cách khoảng giữa các tab trên menu 2*/

}

ul#topnav li:hover span { display: block;

} /* hiển thị menu cấp 2 khi đưa chuột vào */

ul#topnav li span a { display: inline; } /* tất cả các menu câp 2 cùng nằm trên 1

dòng */

ul#topnav li span a:hover {text-decoration: none; background: #FFFF99;/* Màu nền khi

rê chuột vào 2*/

color:#F54E00;}/* Màu chữ khi rê chuột vào 2*/

</style>

<div style="position: fixed; width: 100%; height: 35px; left: 0px; bottom: 0px; "

id="itlagi-Toolbar">

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

<li><a href="#" >Thư mục chính </a> <!—Thư mục chính ở đây >

Trang 4

<span>

<!—Các thư mục con ở đây >

<a href="Địa chỉ liên kết" rel="follow" rel="nofollow" target="_blank"> Thư mục con 1</a> |

………

</span></li>

<!—Kết thúc liên kết : Thư mục chính và các thư mục con ở đây >

</ul>

</div>

*Mở rộng thêm:

 Muốn thêm nhiều thư mục chính cùng các thư mục con thầy cô copy dòng lệnh sau:

<li><a href="#" >Thư mục chính </a> <!—Thư mục chính ở đây >

Trang 5

<span>

<!—Các thư mục con ở đây >

………

</span></li>

- Rồi dán trên dòng </ul> Thầy cô thêm địa chỉ liên kết sau đó sửa tên menu cho phù hợp.

<a href="Địa chỉ liên kết" rel="follow" rel="nofollow" target="_blank">Thư mục con</a> |

Sau đó dán dưới dòng <span> và trên dòng </span></li>

Trang 6

 Nếu muốn thư mục chính hoặc thư mục con có gắn logo thầy cô thay dòng lệnh:

<a href="Địa chỉ liên kết" rel="follow" rel="nofollow" target="_blank"><img src="Link logo" align="absmiddle" border="0" hspace="5">Tên thư mục</a>

Hay thay dòng lệnh:

<a href="Địa chỉ liên kết " rel="nofollow" target="_blank"><img src=

"Link logo"

align="absmiddle" height="24" width="24" border="0" hspace="5">Tên

thư mục</a>

 Ngoài ra, để tạo tên thư mục bằng logo thầy cô thay dòng lệnh dưới đây và copy link của chúng dán vào tên thư mục

<a href="#" rel="nofollow" target="_blank "><img height="14" width="64" border=

"0" alt="Violet Song Kim" src=

"Tên thư mục bằng logo"></a>

Thầy cô VÀO ĐÂY và chọn kiểu chữ để tạo tên thư mục bằng logo và copy link ( nên chọn nền trong suốt: kích chuột vào Background rồi chọn Transparent)

 Lưu ý:

- Nếu muốn mở ở trang hiện tại, Thầy Cô xóa rel="follow"

rel="nofollow" target="_blank" ở mỗi link của thư mục

- Nếu muốn cho thư mục nhấp nhái thầy cô copy dòng lệnh:

Trang 7

<blink>Tên thư mục ở đây</blink>

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

* Sau đây là code có cấu trúc liên kết thư mục chính có tên bằng logo, Thầy Cô hãy xem thử:

ul#topnav {

margin: 0px; padding: 0px 0px;

float: left;

width: 100%;

list-style: none;

position: relative; /* Thiết lập vị trí của ul chứa menu */

font-family: Tahoma;

font-size: 13px;

color: #FFFFFF;

font-weight: Bold;

background-color: #00D6D6; /* Màu nền trên menu 1*/

}

ul#topnav li {

float: left;

margin: 0px; padding: 0px 0px ;

border-rigth: 0px solid #555; /* các menu li */

Trang 8

ul#topnav li a {

padding: 9px 4px; /*Khoảng cách các nội dung */

display: block;

color: #FFFFFF; /*Màu chữ thư mục */

text-decoration: none;

}

background-color:#EBFF38; /* Màu nền khi rê chuột vào 1*/

color: #FF2E96; /* Màu chữ khi rê chuột vào 1*/

}

ul#topnav li:hover {background: #00A5F4; /* Màu nền trên menu cấp 1*/url(topnav_active.gif) repeat-x; }

ul#topnav li span {

float: left;

padding: 9px 0;

position: absolute;

left: 0; top:-34px; /* Di chuyển thanh menu cấp 2*/

display: none; /* mặc định menu cấp 2 là ẩn */

width: 100%;

Trang 9

background: #3D8BFF;/* Màu nền trên menu cấp 2 */

color: #FFFFFF; /* Màu cách khoảng giữa các tab trên menu 2*/

}

ul#topnav li:hover span { display: block;

} /* hiển thị menu cấp 2 khi đưa chuột vào */

ul#topnav li span a { display: inline; } /* tất cả các menu câp 2 cùng nằm trên 1

dòng */

ul#topnav li span a:hover {text-decoration: none; background: #FFFF99;/* Màu nền khi

rê chuột vào 2*/

color:#F54E00;}/* Màu chữ khi rê chuột vào 2*/

</style>

<div style=

"position: fixed; width: 100%; height: 32px; z-index: 0; left: 0pt; bottom: 0pt; border-top: 0px solid rgb(255, 61, 110);padding: 0px 0px;"

id="itlagi-Toolbar">

<li><a href="#" target="_blank"><img height="14" width="64" border=

"http://d4.violet.vn/uploads/blogs/754645/1_02.gif"><blink>|</blink></a>

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

"_blank">Thư viện Violet</a> | <a href=

"http://giaoan.violet.vn/" rel="nofollow" target="_blank">Thư

viên giáo án</a> | <a href="http://dethi.violet.vn/" rel=

"nofollow" target="_blank">Thư viện đề thi</a> | <a href=

Trang 10

"http://baigiang.violet.vn/" rel="nofollow" target="_blank">Thư

viện bài giảng</a> | <a href="http://tulieu.violet.vn/" rel=

"nofollow" target="_blank">Thư viện tư liệu</a> | <a href=

"http://bachkim.violet.vn/" rel="nofollow" target="_blank">Nhóm

phát triển Violet</a> | <a href="http://lophoc.violet.vn/" rel=

"nofollow" target="_blank">Lớp học trực tuyến</a>

|</span></li>

<li><a href="#" target="_blank"><img height="14" width="64" border=

"http://d4.violet.vn/uploads/blogs/754645/2_02.png"><blink>|</blink></a>

<span><a href="http://www.google.com.vn/webhp?hl=vi/" rel=

"nofollow" target="_blank">Google</a> | <a href=

"https://accounts.google.com/ServiceLogin?

service=mail&passive=true&rm=false&continue=http://mail.google.com/mail/?hl

%3Dvi&scc=1&ltmpl=default&ltmplcache=2&hl=vi"

rel="nofollow" target="_blank">Gmail</a> | <a href=

"https://login.yahoo.com/config/mail?.intl=vn" rel="nofollow"

target="_blank">Yahoo</a> | <a href=

uilel=3&service=youtube&passive=true&continue=http%3A%2F%2Fwww.youtube.com

%2Fsignin%3Faction_handle_signin%3Dtrue%26feature%3D FEATURE

%26nomobiletemp%3D1%26hl%3Dvi_VN%26next%3D%252Ffinish_link_upgrade

%253Fhl%253Dvi&hl=vi_VN&ltmpl=sso/"

rel="nofollow" target="_blank">You Tube</a> | <a href=

service=blogger&ltmpl=start&hl=vi&passive=86400&continue=http://www.blogger.com /home#s01/"

Trang 11

rel="nofollow" target="_blank">Blogger</a> | <a href=

"https://vi-vn.facebook.com/" rel="nofollow" target=

"_blank">Facebook</a> | <a href="http://twitter.com/sessions/new/"

rel="nofollow" target="_blank">Twitter</a> | <a href=

service=writely&passive=1209600&continue=https://docs.google.com/?tab%3Dwo

%23&followup=https://docs.google.com/?tab%3Dwo&ltmpl=homepage/"

rel="nofollow" target="_blank">Docs</a> |</span></li>

<li><a href="#" target="_blank"><img height="14" width="64" alt=

"Violet Song Kim" src=

"http://d4.violet.vn/uploads/blogs/754645/3.gif"><blink>|</blink></a>

<span><a href="http://chamhoc.vn/" rel="nofollow" target=

"_blank">Chăm học</a> | <a href="http://www.baomoi.com/" rel=

"nofollow" target="_blank">Báo Mới</a> | <a href=

"http://baodatviet.vn/" rel="nofollow" target="_blank">Báo Đất

Việt</a> | <a href="http://www.khoahoc.com.vn/" rel="nofollow"

target="_blank">Báo Khoa Học</a> | <a href="http://www.gdtd.vn/"

rel="nofollow" target="_blank">Báo Giáo Dục</a> | <a href=

"http://antg.cand.com.vn/" rel="nofollow" target="_blank">Báo

CAND</a> | <a href="http://www.nhandan.org.vn/" rel="nofollow"

target="_blank">Báo Nhân Dân</a> | <a href=

"http://www.nhandan.org.vn/" rel="nofollow" target="_blank">Báo

Nhân Dân</a> | <a href="http://laodong.com.vn/" rel="nofollow"

target="_blank">Báo Lao Động</a> | <a href=

Trang 12

"http://vtc.vn/default.aspx" rel="nofollow" target="_blank">Báo

VTC News</a></span></li>

"http://d4.violet.vn/uploads/blogs/754645/4_04.png"><blink>|</blink></a>

<span><a href="http://trangnhat.net/tienich/tiengviet.htm" rel=

"nofollow" target="_blank">Xử lí văn bản</a> | <a href=

"http://translate.google.com.vn/?hl=vi&tab=wT" rel="nofollow"

target="_blank">Google dịch</a> | <a href=

"http://chinhsuaanh.com/" rel="nofollow" target=

"_blank">Photoshop</a> | <a href=

"http://ngainguyen.110mb.com/thumavanngai.html" rel="nofollow"

target="_blank">Thử HTML</a> | <a href=

"http://haylem.net/lay-ma-mau-online/" rel="nofollow" target=

"_blank">Mã màu</a> | <a href="http://www.iconarchive.com/" rel=

"nofollow" target="_blank">Trang Icon</a> | <a href=

"http://www.clocklink.com/" rel="nofollow" target="_blank">Tạo

đồng hồ</a> | <a href="http://nct.y1n9.com/" rel="nofollow"

target="_blank">Tạo nhạc</a> | <a href=

"http://www.flamingtext.com/" rel="nofollow" target="_blank">Tạo

logo</a> | <a href="http://www.loogix.com/" rel="nofollow" target=

"_blank">Tạo ảnh động</a> |</span></li>

Trang 13

"http://d4.violet.vn/uploads/blogs/754645/5.gif"><blink>|</blink></a>

<span><a href="http://ziczac.vn/karaoke.html" rel="nofollow"

target="_blank">Karaoke</a>| <a href="http://www.tivi24h.com/" rel=

"nofollow" target="_blank">Tivi 24h</a>|</span></li>

</ul>

</div>

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