Tìm kiếm nhanh

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

Thảo luận trong 'Hỗ trợ giao diện, block' đăng bởi hoanglongvnpt, 04/08/2016 01:16.

  • hoanglongvnpt

    hoanglongvnpt Nguyễn Tất Thắng

    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

     
  • hoanglongvnpt

    hoanglongvnpt Nguyễn Tất Thắng

    Thử css này xem sao:

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

     

     
  • hoanglongvnpt

    hoanglongvnpt Nguyễn Tất Thắng

    Giao diện tự động:

    Gaio diện máy tính:

     

    Tệp đính kèm:

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

     

    Tệp đính kèm:

  • hoanglongvnpt

    hoanglongvnpt Nguyễn Tất Thắng

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

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

     

    Tệp đính kèm:

  • hoanglongvnpt

    hoanglongvnpt Nguyễn Tất Thắng

    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

     
  • khanhvtth

    khanhvtth Ma Khánh Hưng

    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 ạ.

     

Chia sẻ trang này

Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây