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

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}

 

 

[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é

 

[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

 

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

 

 

[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