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.

Page 1 of 2
  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!
    hongoctrien, 24 Tháng mười 2011
    #1
    Pooh, Nguyễn Ngọc Huy, Sharing và 6 người khác thích bài này.
  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é
    bin_kute, 24 Tháng mười 2011
    #2
  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]
    kiler08n, 13 Tháng tư 2012
    #3
  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é!!!
    thienthancotuong, 13 Tháng tư 2012
    #4
  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
    kiler08n, 13 Tháng tư 2012
    #5
  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!
    alt+F4, 13 Tháng tư 2012
    #6
    Pooh và kiler08n 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
    hongoctrien, 13 Tháng tư 2012
    #7
    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
    kiler08n, 14 Tháng tư 2012
    #8
  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 ;))
    Sharing, 14 Tháng tư 2012
    #9
  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ế?
    hongoctrien, 14 Tháng tư 2012
    #10
    Nguyễn Ngọc Huy và kiler08n 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
    kiler08n, 14 Tháng tư 2012
    #11
  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
    kiler08n, 14 Tháng tư 2012
    #12
  13. Offline

    bb112

    • Windows 2.0

    Số bài viết:
    42
    Đã được thích:
    20
    Điểm thành tích:
    20
    bb112, 14 Tháng tư 2012
    #13
    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]
    hongoctrien, 15 Tháng tư 2012
    #14
    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 :))
    namtaynguyen, 15 Tháng tư 2012
    #15
  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
    vntcvietnam, 25 Tháng tư 2012
    #16
  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 ?????
    anhbin39, 3 Tháng bảy 2012
    #17
  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.
    hongoctrien, 3 Tháng bảy 2012
    #18
    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ả :(
    tplink, 6 Tháng hai 2013
    #19
  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
    ngokkaka, 18 Tháng tư 2013
    #20
    hongoctrien thích bài này.
Page 1 of 2

Chia sẻ trang này

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