Hướng dẫn Hướng dẫn cố định Menu ngang khi trượt site

Thành viên năng động
B1: Mở file header_extended cúa theme/default tìm đoạn
Code:
<nav class="second-nav" id="menusite">
            <div class="container">
                <div class="row">
                    <div class="bg box-shadow">
                    [MENU_SITE]
                    </div>
                </div>
            </div>
        </nav>
Thay toàn bộ doạn code trên bằng đoạn:
Code:
<nav class="stickymenu">
         <div class="container">
                <div class="row">
               [MENU_SITE]
            </div>
         </div>
      </nav>
B2: Thêm vào dưới
Code:
</nav>
đoạn code js như sau:
Code:
<script type="text/javascript">
   $(function() {
    var sticky_navigation_offset_top = $('.stickymenu').offset().top;
    var sticky_navigation = function(){
        var scroll_top = $(window).scrollTop();
        if (scroll_top > sticky_navigation_offset_top) {
            $('.stickymenu').css({ 'position': 'fixed', 'z-index': 1000,'top':0, 'left':0});
        } else {
            $('.stickymenu').css({ 'position': 'relative' });
        }   
    };
    sticky_navigation();
    $(window).scroll(function() {
         sticky_navigation();
    });
});
   </script>
B3: Thêm css sau vào cuối file style.css
Code:
.stickymenu {   
    z-index: 1000;
    background-color: #aa913f;
    margin: 0 auto 0;
    width: 100%;
}
Xong nhấn f5 xem thành quả lao động!
 
Thành viên quá tích cực
Quản trị viên
Thích: nvnghiem
Thành viên năng động
Cái này đơn giản, dễ hiểu, nhanh, chính xác...:laluot-22:
 
Thích: David An
Thành viên quá tích cực
Quản trị viên
Cái này đơn giản, dễ hiểu, nhanh, chính xác...:laluot-22:
thế chuyển về cùng 1 chuyên mục nhé bác
 
Thành viên quá tích cực
OK bác. Cảm ơn bác nhé :D heheeee. Tối em test xem
 
Thành viên năng động
Làm cho menu luôn nằm trên và full dài ra chiều ngan theo màng hình máy tính hoặc điện thoại thì sao nhỉ? giống như menu của forum này đó!
 
Thích: David An
Thành viên quá tích cực
Quản trị viên
Làm cho menu luôn nằm trên và full dài ra chiều ngan theo màng hình máy tính hoặc điện thoại thì sao nhỉ? giống như menu của forum này đó!
bạn có demo web ko - gởi mình xem giúp cho
 
Thành viên năng động
bạn có demo web ko - gởi mình xem giúp cho
gatasonca.com đây bạn
 
Thích: David An
Thành viên quá tích cực
Quản trị viên
gatasonca.com đây bạn
thế viết lại menu nà
 
Thành viên năng động
B1: Mở file header_extended cúa theme/default tìm đoạn
Code:
<nav class="second-nav" id="menusite">
            <div class="container">
                <div class="row">
                    <div class="bg box-shadow">
                    [MENU_SITE]
                    </div>
                </div>
            </div>
        </nav>
Thay toàn bộ doạn code trên bằng đoạn:
Code:
<nav class="stickymenu">
         <div class="container">
                <div class="row">
               [MENU_SITE]
            </div>
         </div>
      </nav>
B2: Thêm vào dưới
Code:
</nav>
đoạn code js như sau:
Code:
<script type="text/javascript">
   $(function() {
    var sticky_navigation_offset_top = $('.stickymenu').offset().top;
    var sticky_navigation = function(){
        var scroll_top = $(window).scrollTop();
        if (scroll_top > sticky_navigation_offset_top) {
            $('.stickymenu').css({ 'position': 'fixed', 'z-index': 1000,'top':0, 'left':0});
        } else {
            $('.stickymenu').css({ 'position': 'relative' });
        }  
    };
    sticky_navigation();
    $(window).scroll(function() {
         sticky_navigation();
    });
});
   </script>
B3: Thêm css sau vào cuối file style.css
Code:
.stickymenu {  
    z-index: 1000;
    background-color: #aa913f;
    margin: 0 auto 0;
    width: 100%;
}
Xong nhấn f5 xem thành quả lao động!
Nó bị lệch sang bên trái. Mình có thể cho nó full width được không nhỉ.
 
Thành viên năng động
thêm code css này vào style.css của bạn
Code:
ul.nav.navbar-nav {
        display: block;
        width: 85%;
        margin: 0 auto!important;
        float: none;
}
điều chỉnh số % để phù hợp với menu