Bài viết Code menu ngang đẹp cho website, blog,...

Thảo luận trong 'Source code' bắt đầu bởi hongoctrien, 24 Tháng mười 2011.

  1. Offline

    hongoctrien

    • Friends

    Số bài viết:
    2.449
    Đã được thích:
    2.464
    Điểm thành tích:
    2.431
    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

    [IMG]

    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!
  2. Offline

    bin_kute

    • Thành Viên Mới

    Số bài viết:
    14
    Đã được thích:
    4
    Điểm thành tích:
    0
    Mới làm như theo hướng dẫn của bạn, mọi thứ đều ổn :)
    Menu đẹp lắm bạn ơi, cảm ơn nhiều nhé
  3. Offline

    kiler08n

    • Thành Viên Mới

    Số bài viết:
    9
    Đã được thích:
    1
    Điểm thành tích:
    0
    [IMG]

    Menu đẹp lắm anh ơi. Anh giúp em chỉnh chổ này tý. Em muốn nó nằm dịch ra tý thì chỉnh chổ nào vậy anh. Thanks anh trước.
    Giống như vậy nè

    [IMG]
  4. Offline

    thienthancotuong

    • Banned

    Số bài viết:
    2
    Đã được thích:
    0
    Điểm thành tích:
    0
    cám ơn bài viết nhé!!!
  5. Offline

    kiler08n

    • Thành Viên Mới

    Số bài viết:
    9
    Đã được thích:
    1
    Điểm thành tích:
    0
    Up cho chủ top vào giúp với
  6. Offline

    alt+F4

    • Core i3

    Số bài viết:
    596
    Đã được thích:
    423
    Điểm thành tích:
    450

    Bạn đặt code trên vào file header.tpl trong layout ấy!
    Poohkiler08n thích bài này.
  7. Offline

    hongoctrien

    • Friends

    Số bài viết:
    2.449
    Đã được thích:
    2.464
    Điểm thành tích:
    2.431
    Bạn đặt đoạn code của menu trong div wrapper
    Hoặc gửi code file header.tpl lên mình sửa cho
    kiler08n thích bài này.
  8. Offline

    kiler08n

    • Thành Viên Mới

    Số bài viết:
    9
    Đã được thích:
    1
    Điểm thành tích:
    0
  9. Offline

    Sharing

    • Thành Viên Mới

    Số bài viết:
    15
    Đã được thích:
    3
    Điểm thành tích:
    0
    Cũng được, tuy chưa thử nhưng thấy mấy bạn kia test thấy cũng được ;))
  10. Offline

    hongoctrien

    • Friends

    Số bài viết:
    2.449
    Đã được thích:
    2.464
    Điểm thành tích:
    2.431
    Nhìn vào code bạn mình chẳng lần ra tý "manh mối" nào cả, nó khác với themes mặc định quá.
    Vui lòng gửi cho mình cả gói themes luôn nhé :D
    Bạn đang dùng phiên bản bao nhiêu thế?
    Nguyễn Ngọc Huykiler08n thích bài này.
  11. Offline

    kiler08n

    • Thành Viên Mới

    Số bài viết:
    9
    Đã được thích:
    1
    Điểm thành tích:
    0
  12. Offline

    kiler08n

    • Thành Viên Mới

    Số bài viết:
    9
    Đã được thích:
    1
    Điểm thành tích:
    0
    Chủ top giúp mình được chưa vậy
  13. Offline

    bb112

    • Windows 2.0

    Số bài viết:
    42
    Đã được thích:
    20
    Điểm thành tích:
    20
    kiler08n thích bài này.
  14. Offline

    hongoctrien

    • Friends

    Số bài viết:
    2.449
    Đã được thích:
    2.464
    Điểm thành tích:
    2.431
    Bạn download file này nhé http://www.mediafire.com/?biouixq2yxs52x2
    Giải nén và :

    Copy file Default.css vào themes/spam/css/
    Copy ddtabmenu.js vào themes/spam/js
    Copy header.tpl vào themes/spam/layout/
    Copy images vào themes/spam/

    F5 phát xem kết quả :)


    [IMG]
    kiler08n thích bài này.
  15. Offline

    namtaynguyen

    • Friends

    • ABABABABABABABABABABABABABABABABABABABABABABABABABABABABABABABABABABABABABABABABABABABABABABABABABABABABABABABABABABABABABABABABABABABABABAB
    Số bài viết:
    359
    Đã được thích:
    200
    Điểm thành tích:
    240
    Có cho VBB không anh :))
  16. Offline

    vntcvietnam

    • Thành Viên Mới

    Số bài viết:
    2
    Đã được thích:
    0
    Điểm thành tích:
    0
    Cái menu này đẹp Dùng cho theme nukeviet nhưng mà làm sao làm tự động trong mudule menu được thì tốt đỡ phải vào code sửa
  17. Offline

    anhbin39

    • Thành Viên Mới

    Số bài viết:
    1
    Đã được thích:
    0
    Điểm thành tích:
    0
    Cho hỏi tại sao khi nào cũng là chọn "Trang Chủ" t di chuyển con trỏ sang chỗ khác trên thanh menu rồi bỏ con trỏ khỏ thanh menu thì outo chọn trang chủ: Làm sao bỏ cái chon Trang chủ vậy ?????
  18. Offline

    hongoctrien

    • Friends

    Số bài viết:
    2.449
    Đã được thích:
    2.464
    Điểm thành tích:
    2.431
    Hiệu ứng ative này mình chưa làm được.
    Tức là nó vẫn cứ mặc định là về trang chủ, chứ không giữ nguyên khi click vào menu khác được.
    kiler08n thích bài này.
  19. Offline

    tplink

    • Thành Viên Mới

    Số bài viết:
    34
    Đã được thích:
    0
    Điểm thành tích:
    0
    ko xài đc cho vbb hả :(
  20. Offline

    ngokkaka

    • Thành Viên Mới

    Số bài viết:
    1
    Đã được thích:
    1
    Điểm thành tích:
    0
    link die với ảnh không thấy chi chi
    --- Nhập chung bài viết, 18 Tháng tư 2013 ---
    link die với ảnh không thấy chi chi
    hongoctrien thích bài này.

Chia sẻ trang này

Advertising: Linux system admin | nukeviet | nukeviet 4 | Upload ảnh miễn phí