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.

  • sutiqa85

    sutiqa85 Tăng Thanh Suti

    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="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}

     

     
  • sutiqa85

    sutiqa85 Tăng Thanh Suti

    [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;
    }

     
  • Proxxxing

    Proxxxing ProxxxingNF ProxxxingNF

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

     
  • trungnghiack

    trungnghiack trung nghia

    [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

     
  • tkntartbox

    tkntartbox ARTBOX ARTBOX

    [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.
  • trungnghiack

    trungnghiack trung nghia

    [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