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.
Thảo luận trong 'Hỗ trợ giao diện, block' đăng bởi hpleduit, 29/06/2016 10: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.
[QUOTE="hpleduit, post: 337, member: 62"]
[/QUOTE]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.
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"]
[/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}
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"]
[/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}
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"]
[/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
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"]
[/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%;
}
Làm theo bác thì sticky bị lệch rồi bác