Hướng dẫn Menu Top hiển thị như của báo Tuoitre.vn

Theo nhu cầu của ai đó, khi kéo website xuống thì menu top sẽ bị dính lên trên...haaaa

1. Mở file: header_extended

tìm đến:

<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ộ đoạn code trên bằng đoạn code:

<nav class="stickymenu">
         <div class="container">
				<div class="row">
               [MENU_SITE]
            </div>
         </div>
      </nav>
      <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>

Tiếp đến coppy đoạn css sau vào cuối file style.css

.stickymenu {
    z-index: 1000;
    box-shadow: 0 10px 10px rgba(0,0,0,0.55);
    background: #428BCA;
    margin: 0 auto 0;
    width: 100%;
}

Nhấn em F5 xem sao à nha. Có gì pm ngay để khắc phục. Thank đã xem!

 

Chào anh Thắng cho em hỏi em cũng làm tương tự như anh cái đó áp dụng cho chế độ không ở repontive nếu chọn giao diện repontive (tự động) thì menu nằm lệch sang một bên trái không nằm ở giửa được.

Và cho em hỏi cách chỉnh chiều cao và màu nên của menu ở chổ nào em thử miết mà không được.

em thử sửa trong css như thế này mà không có hiệu lực

.stickymenu {
    z-index: 1000;
    /*box-shadow: 0 10px 10px rgba(0,0,0,0.55);*/
    background: #009900;
    margin: 0 auto 0;
    /*width: 100%;*/
    background-color: #34AC35;
    border-bottom-color: #ff0000;
    border-bottom-width: 2px;
    text-transform: uppercase;
    height: 40px;
}

chỉ có phần text-transform: uppercase; có hiệu lực thôi

 

Thử css này xem sao:

.stickymenu {
    position: relative;
    top: 0;
    left: 0;   
    width: 100%;  
    z-index: 9999;
    margin-right: 0px;
    margin-left: 0px;
}

 

 

Giao diện tự động:

Gaio diện máy tính:

 

Vẫn không được anh ạ như file đính kèm.

 

ý là không được cái gì?

 

menu vẫn bị lệch sang trái như hình đính kèm.

 

css lại cho nó

 

được rồi anh Thắng

do cái chổ này

 $('.stickymenu').css({ 'position': 'fixed', 'z-index': 1000,'top':0, 'left':0});

xoá bỏ'left':0 là OK

 

Anh hoanglongvnpt cho em hỏi là. Cái menu của themes defaul muốn kéo dài full web ngay từ đầu thì css sửa chỗ nào ạ. giống kiểu menu của tinmoitruong.vn ấy ạ.