Cấp bậc tác giả:

HTML

Hướng dẫn làm Menu Ngang ẩn hiện và lên xuống được

Được viết bởi webmaster ngày 19/08/2013 lúc 09:35 PM
Khi người dùng kéo xuống xem nội dung, menu tự ẩn để tăng không gian cho người dùng đang hướng tới nội dung khi người dùng kéo lên, nhiều khả năng là muốn sang trang khác thì menu hiện ra phục vụ người dùng.
  • 0
  • 2807
Tải tệp tin: Click ở đây

Hướng dẫn làm Menu Ngang ẩn hiện và lên xuống được


Khi người dùng kéo xuống xem nội dung, menu tự ẩn để tăng không gian cho người dùng đang hướng tới nội dung
khi người dùng kéo lên, nhiều khả năng là muốn sang trang khác thì menu hiện ra phục vụ người dùng. 


menu-ngang-thong-minh.png

HTML

<header class="an">menu</header>

CSS

header {
position:fixed;
width:100%;
top:0px;
left:0;
background:#f2f2f2;
height:80px;
z-index:99;
width:100%;
}

JS – jquery
.an {
-webkit-transition: all .6s ease;
-moz-transition: all .6s ease;
-o-transition: all .6s ease;
transition: all .6s ease;
}

$(window).scroll(function () {
var winscoll = curwinscoll-$(window).scrollTop();
curwinscoll = $(window).scrollTop();
if (curwinscoll > 350) {
if (winscoll < 0) {
var headertop = parseInt($('header').css('top'));
//alert(headertop);
//maxx = -100;
$('header').css("top","-100px");
}
else if (winscoll > 0) {
$('header').css("top","0px");
//alert(curwinscoll);
}
}
Thư viện
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

Nguồn bài viết: DOTNET.VN

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML