Tìm kiếm nhanh

Hướng dẫn tạo menu top giống menu http://tiepsucmuathi.edu.vn/

Thảo luận trong 'Hỗ trợ giao diện, block' đăng bởi hpleduit, 28/06/2016 23:10.

  • Chào mọi người ai biết cách css menu top giống menu trang http://tiepsucmuathi.edu.vn/ này không ạ. Khi cuộn trang web nó tự động nằm phía trên.

    cảm ơn.

     
  • huongpro_love

    huongpro_love Nguyễn Văn Hưởng

    [QUOTE="hpleduit, post: 337, member: 62"]

    Chào mọi người ai biết cách css menu top giống menu trang http://tiepsucmuathi.edu.vn/ này không ạ. Khi cuộn trang web nó tự động nằm phía trên.

    cảm ơn.

    [/QUOTE]

    Cái này là menu default mà, bạn sửa trong style.css đoạn này
     

    .navbar-default .navbar-nav>li>a{color:#fff;font-weight:bold;text-transform:uppercase}
    .navbar-nav>li>a{white-space:nowrap}

     

     
  • [QUOTE="huongpro_love, post: 338, member: 10"]

    Cái này là menu default mà, bạn sửa trong style.css đoạn này
     

    .navbar-default .navbar-nav>li>a{color:#fff;font-weight:bold;text-transform:uppercase}
    .navbar-nav>li>a{white-space:nowrap}

     

    [/QUOTE]

     

    css của mình cũng có đoạn đó rồi mà bạn

    #menusite .navbar-default .navbar-nav > li > a {
        color:#fff !important;
    }

    #menusite .navbar-nav > li > a {
        white-space:nowrap;
    }

     
  • cái menu kiểu đó bạn phải viết 1 đoạn script sử dụng hàm scroll nhé

     
  • Đông Gioăng

    Đông Gioăng Chung Bảo Ngọc

    [QUOTE="huongpro_love, post: 338, member: 10"]

    Cái này là menu default mà, bạn sửa trong style.css đoạn này
     

    .navbar-default .navbar-nav>li>a{color:#fff;font-weight:bold;text-transform:uppercase}
    .navbar-nav>li>a{white-space:nowrap}

     

    [/QUOTE]

    E làm theo bác rồi mà chỉ có cái font chữ to lên. còn lại chả có gì khác biệt

     
  • saigonvn

    saigonvn Lê Kim Sơn

    [QUOTE="Đông Gioăng, post: 360, member: 5"]

    E làm theo bác rồi mà chỉ có cái font chữ to lên. còn lại chả có gì khác biệt

    [/QUOTE]

    Không biết ý của bạn có phải như thế này không ?

    Bạn mở file layout/header_extended.tpl tìm đoạn:

    <nav class="second-nav" id="menusite">
                <div class="container">
                    <div class="row">
                        <div class="bg box-shadow">

                        </div>
                    </div>
                </div>
            </nav>

    Thay thế thành:

    <nav class="second-nav" id="menusite">
                <div class="stickymenu">
                    <div class="row">
                        <div class="bg box-shadow">

                        </div>
                    </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': 990,'top':0, 'left':0 });
            } else {
                $('.stickymenu').css({ 'position': 'relative' }); 
            }   
        };
        sticky_navigation();
        $(window).scroll(function() {
             sticky_navigation();
        });
    });
       </script>

    ---> Mở file default\css\style.css

    thêm dưới cùng:

    .stickymenu {
    margin: 0 auto 0;
    width: 100%;
    }

     

     
    Đông Gioăng thích điều này.
  • Đông Gioăng

    Đông Gioăng Chung Bảo Ngọc

    [QUOTE="saigonvn, post: 371, member: 69"]

    Không biết ý của bạn có phải như thế này không ?

    Bạn mở file layout/header_extended.tpl tìm đoạn:

    <nav class="second-nav" id="menusite">
                <div class="container">
                    <div class="row">
                        <div class="bg box-shadow">

                        </div>
                    </div>
                </div>
            </nav>

    Thay thế thành:

    <nav class="second-nav" id="menusite">
                <div class="stickymenu">
                    <div class="row">
                        <div class="bg box-shadow">

                        </div>
                    </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': 990,'top':0, 'left':0 });
            } else {
                $('.stickymenu').css({ 'position': 'relative' }); 
            }   
        };
        sticky_navigation();
        $(window).scroll(function() {
             sticky_navigation();
        });
    });
       </script>

    ---> Mở file default\css\style.css

    thêm dưới cùng:

    .stickymenu {
    margin: 0 auto 0;
    width: 100%;
    }

     

    [/QUOTE]

    Làm theo bác thì sticky bị lệch rồi bác

     

     

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