Code menu ngang nhẹ nhàng, dễ sử dụng.
Bạn chỉ cần am hiểu cấu trúc thẻ html tạo danh sách <ul> là có thể tùy biến dễ dàng menu này.
Demo (Ảnh), các bạn có thể tải file đính kèm và xem demo tại file index.html
Cài đặt:
1. Tải file đính kèm, copy thư mục images, file ddtabmenu.js, Default.css vào riêng một thư mục (trong VD mình đặt vào thư mục file)
Download: http://www.mediafire.com/?31b35dvyoc1i8k0
Pass giải nén: 2mit.org
2. Tạo file index.html
- Copy đoạn dưới đặt trong cặp thẻ <head></head>
Mã:
<link href="file/Default.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="file/ddtabmenu.js"></script>
<span id="ctl00_TopMenuInfo_lbScriptMEnu"><script type="text/javascript"> ddtabmenu.definemenu("ddtabs2",0);</script></span>
Sửa lại đường dẫn đến file Default.css và ddtabmenu.js
- Copy đoạn dưới đây đặt vào trong cặp thẻ <body></body>
Mã:
<div id="topmenu">
<div id="ddtabs2" class="glowingtabs">
<ul>
<li>
<a href="{NV_BASE_SITEURL}" rel="mnu0"><span>
TRANG CHỦ</span>
</a>
</li>
<li>
<a id="ctl00_TopMenuInfo_rptParentMenu_ctl00_hplParentMenu" rel="mnu9" href="#"><span>GIỚI THIỆU</span></a>
</li>
<li>
<a id="ctl00_TopMenuInfo_rptParentMenu_ctl00_hplParentMenu" rel="mnu1" href="{NV_BASE_SITEURL}news/Tin-tuc-Su-kien.html"><span>TIN TỨC - SỰ KIỆN</span></a>
</li>
<li>
<a id="ctl00_TopMenuInfo_rptParentMenu_ctl01_hplParentMenu" rel="mnu2" href="{NV_BASE_SITEURL}news/Hoc-duong.html"><span>HỌC ĐƯỜNG</span></a>
</li>
<li>
<a id="ctl00_TopMenuInfo_rptParentMenu_ctl02_hplParentMenu" rel="mnu3" href="#"><span>ĐỜI SỐNG SINH VIÊN</span></a>
</li>
<li>
<a id="ctl00_TopMenuInfo_rptParentMenu_ctl03_hplParentMenu" rel="mnu5" href="#"><span>CỘNG TÁC VIÊN</span></a>
</li>
<li>
<a id="ctl00_TopMenuInfo_rptParentMenu_ctl04_hplParentMenu" rel="mnu6" href="#"><span>BẠN ĐỌC</span></a>
</li>
<li>
<a id="ctl00_TopMenuInfo_rptParentMenu_ctl05_hplParentMenu" rel="mnu7" href="#"><span>THƯ VIỆN</span></a>
</li>
<li>
<a id="ctl00_TopMenuInfo_rptParentMenu_ctl06_hplParentMenu" rel="mnu8" href="{NV_BASE_SITEURL}search.html"><span>TÌM KIẾM</span></a>
<li>
<a id="ctl00_TopMenuInfo_rptParentMenu_ctl06_hplParentMenu" rel="mnu8" href="{NV_BASE_SITEURL}contact.html"><span>LIÊN HỆ</span></a>
</li>
</ul>
</div>
<div class="tabcontainer">
<div id="mnu0" class="tabcontent mnu0">
<div style="float:left">
<ul>
<li>
<a href="#">
<img src="file/images/rss.png" />
</a></li>
</ul>
</div>
</div>
<div id="mnu1" class="tabcontent mnu1">
<ul>
</ul>
</div>
<div id="mnu2" class="tabcontent mnu2">
<ul>
<li>
<a id="ctl00_TopMenuInfo_rptTabContent_ctl01_rptSubMenu_ctl00_hplSubtMenu" rel="mnu0" href="{NV_BASE_SITEURL}news/Khoa-khoa-hoc-may-tinh.html"><span>KHOA KHOA HỌC MÁY TÍNH</span></a></li>
<li>
<a id="ctl00_TopMenuInfo_rptTabContent_ctl01_rptSubMenu_ctl01_hplSubtMenu" rel="mnu0" href="{NV_BASE_SITEURL}news/Khoa-cNTT-ung-dung.html"><span>KHOA TIN HỌC ỨNG DỤNG</span></a></li>
<li>
<a id="ctl00_TopMenuInfo_rptTabContent_ctl01_rptSubMenu_ctl02_hplSubtMenu" rel="mnu0" href="{NV_BASE_SITEURL}news/Khoa-thuong-mai-dien-tu.html"><span>KHOA THƯƠNG MẠI ĐIỆN TỬ</span></a></li>
<li>
<a id="ctl00_TopMenuInfo_rptTabContent_ctl01_rptSubMenu_ctl03_hplSubtMenu" rel="mnu0" href="{NV_BASE_SITEURL}news/Nghien-cuu-khoa-hoc.html"><span>NGHIÊN CỨU KHOA HỌC</span></a></li>
</ul>
</div>
<div id="mnu3" class="tabcontent mnu3">
<ul>
<li>
<a id="ctl00_TopMenuInfo_rptTabContent_ctl02_rptSubMenu_ctl00_hplSubtMenu" rel="mnu0" href="{NV_BASE_SITEURL}news/Tam-su-Chia-se.html"><span>TÂM SỰ - CHIA SẼ</span></a></li>
<li>
<a id="ctl00_TopMenuInfo_rptTabContent_ctl02_rptSubMenu_ctl01_hplSubtMenu" rel="mnu0" href="{NV_BASE_SITEURL}news/Tinh-ban-Tinh-yeu.html"><span>TÌNH BẠN - TÌNH YÊU</span></a></li>
<li>
<a id="ctl00_TopMenuInfo_rptTabContent_ctl02_rptSubMenu_ctl02_hplSubtMenu" rel="mnu0" href="{NV_BASE_SITEURL}news/Viet-lam.html"><span>VIỆC LÀM</span></a></li>
<li>
<a id="ctl00_TopMenuInfo_rptTabContent_ctl02_rptSubMenu_ctl02_hplSubtMenu" rel="mnu0" href="{NV_BASE_SITEURL}news/Giao-luu-Ket-ban.html"><span>GIA0 LƯU - KẾT BẠN</span></a></li>
</ul>
</div>
<div id="mnu4" class="tabcontent mnu4">
<ul>
</ul>
</div>
<div id="mnu5" class="tabcontent mnu5">
<ul>
<li>
<a id="ctl00_TopMenuInfo_rptTabContent_ctl01_rptSubMenu_ctl00_hplSubtMenu" rel="mnu0" href="{NV_BASE_SITEURL}forum/forumdisplay.php?2-Th%C3%B4ng-b%C3%A1o" target="_blank"><span>XEM THÔNG BÁO</span></a></li>
<li>
<a id="ctl00_TopMenuInfo_rptTabContent_ctl01_rptSubMenu_ctl01_hplSubtMenu" rel="mnu0" href="{NV_BASE_SITEURL}news/content.html"><span>GỬI BÀI MỚI</span></a></li>
<li>
<a id="ctl00_TopMenuInfo_rptTabContent_ctl01_rptSubMenu_ctl02_hplSubtMenu" rel="mnu0" href="{NV_BASE_SITEURL}index.php?language=vi&nv=news&op=content&contentid=0&checkss=ee12c27d67ebe13b4c6d964486b9eb2f"><span>QUẢN LÝ BÀI VIẾT</span></a></li>
<li>
<a id="ctl00_TopMenuInfo_rptTabContent_ctl01_rptSubMenu_ctl02_hplSubtMenu" rel="mnu0" href="{NV_BASE_SITEURL}faq/Huong-dan-cho-cong-tac-vien.html"><span>HƯỚNG DẪN CHỨC NĂNG</span></a></li>
</ul>
</div>
<div id="mnu6" class="tabcontent mnu6">
<ul>
<li>
<a id="ctl00_TopMenuInfo_rptTabContent_ctl01_rptSubMenu_ctl02_hplSubtMenu" rel="mnu0" href="{NV_BASE_SITEURL}users/login.html"><span>ĐĂNG NHẬP</span></a></li>
<li>
<a id="ctl00_TopMenuInfo_rptTabContent_ctl01_rptSubMenu_ctl02_hplSubtMenu" rel="mnu0" href="{NV_BASE_SITEURL}users/lostpass.html"><span>QUÊN MẬT KHẨU</span></a></li>
<li>
<a id="ctl00_TopMenuInfo_rptTabContent_ctl01_rptSubMenu_ctl02_hplSubtMenu" rel="mnu0" href="{NV_BASE_SITEURL}users.html"><span>TÀI KHOẢN</span></a></li>
<li>
<a id="ctl00_TopMenuInfo_rptTabContent_ctl01_rptSubMenu_ctl02_hplSubtMenu" rel="mnu0" href="{NV_BASE_SITEURL}faq/Huong-dan-cho-thanh-vien.html"><span>HƯỚNG DẪN CĂN BẢN</span></a></li>
</ul>
</div>
<div id="mnu7" class="tabcontent mnu7">
<ul>
<li>
<a id="ctl00_TopMenuInfo_rptTabContent_ctl01_rptSubMenu_ctl02_hplSubtMenu" rel="mnu0" href="{NV_BASE_SITEURL}albums.html"><span>HÌNH ẢNH</span></a></li>
<li>
<a id="ctl00_TopMenuInfo_rptTabContent_ctl01_rptSubMenu_ctl02_hplSubtMenu" rel="mnu0" href="{NV_BASE_SITEURL}videonline.html"><span>VIDEO CLIP</span></a></li>
<li>
<a id="ctl00_TopMenuInfo_rptTabContent_ctl01_rptSubMenu_ctl02_hplSubtMenu" rel="mnu0" href="{NV_BASE_SITEURL}weblinks.html"><span>DANH BẠ WEBSITE</span></a></li>
<li>
<a id="ctl00_TopMenuInfo_rptTabContent_ctl01_rptSubMenu_ctl02_hplSubtMenu" rel="mnu0" href="{NV_BASE_SITEURL}faq.html"><span>CÂU HỎI THƯỜNG GẶP</span></a></li>
</ul>
</div>
<div id="mnu8" class="tabcontent mnu8">
<ul>
</ul>
</div>
<div id="mnu9" class="tabcontent mnu9">
<ul>
<li>
<a id="ctl00_TopMenuInfo_rptTabContent_ctl01_rptSubMenu_ctl03_hplSubtMenu" rel="mnu0" href="{NV_BASE_SITEURL}about/Truong-CD-CNTT-HUU-NGHI-VIET-HAN.html"><span>TRƯỜNG CĐ CNTT HỮU NGHỊ VIỆT HÀN</span></a></li>
<li>
<a id="ctl00_TopMenuInfo_rptTabContent_ctl01_rptSubMenu_ctl03_hplSubtMenu" rel="mnu0" href="{NV_BASE_SITEURL}about/Muc-tieu-Phuong-huong-hoat-dong.html"><span>MỤC ĐÍCH - PHƯƠNG HƯỚNG HOẠT ĐỘNG NHÓM PHÓNG VIÊN</span></a></li>
<li>
<a id="ctl00_TopMenuInfo_rptTabContent_ctl01_rptSubMenu_ctl03_hplSubtMenu" rel="mnu0" href="{NV_BASE_SITEURL}dscb.html"><span>THÔNG TIN THÀNH VIÊN NHÓM</span></a></li>
</ul>
</div>
<div id="mnu10" class="tabcontent mnu10">
<ul>
</ul>
</div>
<div id="mnu11" class="tabcontent mnu11">
<ul>
</ul>
</div>
</div>
<div id="searchID">
<table width="155" cellpadding="0" cellspacing="1">
<tr>
<td>
</td>
<td>
<div class="search-btn">
</div>
</td>
</tr>
</table>
</div>
</div>
Tùy chỉnh nội dung bạn muốn hiển thị trên menu
Thế là xong, mọi thắc mắc gửi bên dưới, mình sẽ giúp!
