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...u9s8ksqhjhkhfk1
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>
<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>
<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!
Nguồn: http://2mit.org/foru...ep-cho-website-
2 comments:
bài viết rất hay bạn à.cám ơn bạn nhiều
Không có chi cả, trong blog của mình còn có nhiều bài viết về menu lắm bạn có thể tham khảo nhé.
Post a Comment