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]
(1)Như các menu ngang cuối trang khác, kiểu này có khác biệt so với kiểu Khi thầy cô rê chuột vào thư mục nào đó thì nó lên menu chứa các thư mục bên Thầy cô có thể thay đổi màu sắc, khoảng cách thư mục cho phù hợp * Mô tả: <style type="text/css"> ul#topnav { margin: 0; padding: 0; float: left; width: 100%; list-style: none; position: relative; /* Thiết lập vị trí ul chứa menu */ font-family: Tahoma; font-size: 12px; color: #FFFFFF; font-weight: Bold; background-color: #33AA80; /* Màu trên menu 1*/ } ul#topnav li { float: left; margin: 0; padding: 0; (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ữ rê chuột vào 1*/ background-color:#EBFF38; /* Màu rê chuột vào 1*/ } ul#topnav li:hover {background: #00A5F4; /* Màu 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 menu cấp 2*/ (3) display: none; /* mặc định menu cấp là ẩn */ width: 100%; background: #00A5F4;/* Màu trên menu cấp */ color: #FF9999; /* Màu cách khoảng các tab trên menu 2*/ } ul#topnav li:hover span { display: block; } /* hiển thị menu cấp đưa chuột vào */ ul#topnav li span a { display: inline; } /* tất các menu câp cùng nằm trên dòng-*/ ul#topnav li span a:hover {text-decoration: none; background: #FFFF99;/* Màu rê chuột vào 2*/ color:#F54E00;}/* Màu chữ rê chuột vào 2*/ </style> <div style="position: fixed; width: 100%; height: 35px; left: 0px; bottom: 0px; " id="itlagi-Toolbar"> <ul id="topnav"> <!—Bắt đầu liên kết > <li><a href="#" >Thư mục chính </a> <!—Thư mục chính đây > (4) <span> <!—Các thư mục đây > <a href="Địa liên kết" rel="follow" rel="nofollow" target="_blank"> Thư mục 1</a> | <a href="Địa liên kết" rel="follow" rel="nofollow" target="_blank"> Thư mục 2</a> | <a href="Địa liên kết" rel="follow" rel="nofollow" target="_blank"> Thư mục 3</a> | ………………………………… </span></li> <!—Kết thúc liên kết : Thư mục chính và các thư mục đâ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 thầy cô copy dòng lệnh sau: <li><a href="#" >Thư mục chính </a> <!—Thư mục chính đây > (5) <span> <!—Các thư mục đây > <a href="Địa liên kết" rel="follow" rel="nofollow" target="_blank"> Thư mục 1</a> | <a href="Địa liên kết" rel="follow" rel="nofollow" target="_blank"> Thư mục 2</a> | <a href="Địa liên kết" rel="follow" rel="nofollow" target="_blank"> Thư mục 3</a> | ………………………………… </span></li> - Rồi dán trên dòng </ul> Thầy cô thêm địa liên kết sau đó sửa tên menu cho phù hợp Muốn thêm thư mục thầy cô copy dòng lệnh sau: <a href="Địa liên kết" rel="follow" rel="nofollow" target="_blank">Thư mục con</a> | Sau đó dán dòng <span> và trên dòng </span></li> (6) Nếu muốn thư mục chính thư mục có gắn logo thầy cô thay dòng lệnh: <a href="Địa 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 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 logo thầy cô thay dòng lệnh đây và copy link 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 logo"></a> Thầy cô VÀO ĐÂY và chọn kiểu chữ để tạo tên thư mục logo và copy link ( nên chọn suốt: kích chuột vào Background chọn Transparent) Lưu ý: Nếu muốn mở trang tại, Thầy Cô xóa rel="follow" rel="nofollow" target="_blank" link thư mục - Nếu muốn cho thư mục nhấp nhái thầy cô copy dòng lệnh: (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 logo, Thầy Cô hãy xem thử: <style type="text/css"> ul#topnav { margin: 0px; padding: 0px 0px; float: left; width: 100%; list-style: none; position: relative; /* Thiết lập vị trí ul chứa menu */ font-family: Tahoma; font-size: 13px; color: #FFFFFF; font-weight: Bold; background-color: #00D6D6; /* Màu trên menu 1*/ } ul#topnav li { float: left; margin: 0px; padding: 0px 0px ; border-rigth: 0px solid #555; /* các menu li */ (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 rê chuột vào 1*/ color: #FF2E96; /* Màu chữ rê chuột vào 1*/ } ul#topnav li:hover {background: #00A5F4; /* Màu 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 menu cấp 2*/ display: none; /* mặc định menu cấp là ẩn */ width: 100%; (9) background: #3D8BFF;/* Màu trên menu cấp */ color: #FFFFFF; /* Màu cách khoảng các tab trên menu 2*/ } ul#topnav li:hover span { display: block; } /* hiển thị menu cấp đưa chuột vào */ ul#topnav li span a { display: inline; } /* tất các menu câp cùng nằm trên dòng-*/ ul#topnav li span a:hover {text-decoration: none; background: #FFFF99;/* Màu rê chuột vào 2*/ color:#F54E00;}/* Màu chữ 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"> <ul id="topnav"> <li><a href="#" target="_blank"><img height="14" width="64" border= "0" alt="Violet Song Kim" src= "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= (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= "0" alt="Violet Song Kim" src= "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<mpl=default<mplcache=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= "https://accounts.google.com/ServiceLogin? 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<mpl=sso/" rel="nofollow" target="_blank">You Tube</a> | <a href= "https://accounts.google.com/ServiceLogin? service=blogger<mpl=start&hl=vi&passive=86400&continue=http://www.blogger.com /home#s01/" (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= "https://accounts.google.com/ServiceLogin? service=writely&passive=1209600&continue=https://docs.google.com/?tab%3Dwo %23&followup=https://docs.google.com/?tab%3Dwo<mpl=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= (12) "http://vtc.vn/default.aspx" rel="nofollow" target="_blank">Báo VTC News</a></span></li> <li><a href="#" target="_blank"><img height="14" width="74" alt= "Violet Song Kim" src= "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> <li><a href="#" target="_blank"><img height="14" width="64" alt= (13) "Violet Song Kim" src= "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> (14)