Sticky navigation cố định thanh navigation Xenforo

Thảo luận trong 'Thủ thuật Xenforo' bắt đầu bởi Admin, 2/2/15.

Đọc: 2,142

  1. Admin Administrator

    Sticky navigation (hay Floating Navigation) tức là cố định thanh navigation vào một chổ trên trang web của bạn. Khi kéo trang web xuống dưới, thì thanh navigation vẫn nổi lên trên và cố định ở vị trí trên cùng, giúp người dùng thao tác dễ dàng mà không cần phải kéo trang web lên lại. Có nhiều addon giúp thực hiện việc này, có cả những addon Premium với nhiều chức năng hơn nhưng mình thấy không cần, trong bài này mình sẻ hướng dẫn các bạn tạo Sticky navigation (Floating Navigation) bằng cách chỉnh sửa các template, rất đơn giản, không cần dùng addon gì cả.
    Demo là trang Kỷ Niệm nhé.

    [​IMG]

    Bắt đầu thôi:
    - Thêm vào template navigation.css đoạn css sau:
    PHP:
    /*Sticky nav by KyNiem.org*/
    #navigation { -webkit-transition: opacity 1s ease; -moz-transition: opacity 1s ease; -ms-transition: opacity 1s ease; -o-transition: opacity 1s ease; transition: opacity 1s ease;}
    #navigation.sticky { position:fixed; top:0px; left:0px; right: 0; z-index:7499;}
    #navigation.sticky:hover { opacity: 1;}
    #navigation.sticky  .navTabs { -webkit-border-radius: 0px; border-radius: 0px; }
    #navigation.sticky .navTabs .navTab.selected .tabLinks { -webkit-border-radius: 0px 0px 10px 10px;
    border-radius0px 0px 10px 10px; -webkit-box-shadow:  0px 6px 2px -4px rgba(0000.4); box-shadow:  0px 6px 2px -4px rgba(0000.4)  }
    #navigation.sticky .navTabs .navLink .itemCount {top: auto; bottom: -12px;}
    #navigation.sticky .navTabs .navLink .itemCount .arrow { bottom: auto; top: -3px; border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #FF0000; border-width: 3px; border-style: none solid solid;}
    #navigation.sticky .navTabs .Popup.PopupContainerControl.PopupOpen .navLink .itemCount {position: inherit; padding: 2px 4px;}
    #navigation.sticky .navTabs .Popup.PopupContainerControl.PopupOpen .navLink .itemCount .arrow {display: none;}
    .footerLinks a.topLink {
    displaynone;
    }
    /* End sticky nav by KyNiem.org*/
    - Sau đó thêm vào template page_container_js_head đoạn js sau:

    Lưu lại vào hưởng thành quả thôi.
    bibiduy, gamoit, lamhieu00937 người khác thích bài này.
  2. thaisonxz

    thaisonxz New Member

    Cảm ơn chia sẽ
  3. binhenviro

    binhenviro New Member

    Khong thay gi la sao ta
  4. kakaassss

    kakaassss New Member

    có thấy cái j đâu ta
  5. vytieubao

    vytieubao New Member

    chả nhìn thấy cái gì cả @@
  6. Lê Thanh Giảng

    Lê Thanh Giảng New Member

    có thể cho lại link được không
    chúng em chả thấy link đâu cả
  7. Admin

    Admin Administrator Thành viên BQT

    Có link gì đâu @Lê Thanh Giảng
    Bấm F5 load lại trang để thấy nội dung ẩn nhé.
    Lê Thanh Giảng thích bài này.
  8. Lê Thanh Giảng

    Lê Thanh Giảng New Member

    em thấy rồi anh thanks anh nhé
    lamhieu009 thích bài này.
  9. bumbum12

    bumbum12 New Member

    Cám ơn bạn nhé
  10. moitruongdgp

    moitruongdgp New Member

    Bấm like là có link tải ngay mà các bạn

Chia sẻ trang này