1

Các menu cố định là xu hướng thiết kế web dứt khoát của năm 2014. Chúng trông đẹp và chúng cũng siêu hữu ích cho khách truy cập. Hôm nay, tôi sẽ chỉ cho bạn cách bạn có thể tạo một menu cố định gọn nhẹ, chức năng và đẹp mắt cho trang web hoặc blog WordPress của bạn.

HTML

Hãy bắt đầu với cơ sở: HTML. Đặt mã này ngay sau <body>thẻ mở của tài liệu html của bạn. Nếu bạn đang áp dụng hướng dẫn này cho blog WordPress, mã này sẽ đi vào header.phptệp của bạn .

<div id="fixmenu">
	<a href="http://www.yoursite.com"><img src="path/to/yourlogo.png" alt="" /></a>
	<ul class="menu-fixed">
		<li><a href="http://www.yoursite.com">Home</a></li>
		<li><a href="#header" id="srolltotop">Top</a></li>
	</ul>
</div><!-- #fixmenu -->

Như bạn có thể thấy, chúng tôi đã tạo một container ( #fixmenu), logo và liên kết trang web, cũng như một <ul>danh sách chứa các mục menu của chúng tôi. Hãy thêm các mục menu để phù hợp với nhu cầu của bạn.

CSS

Bước thứ hai là CSS. Hãy làm một menu cố định đẹp! Dán mã dưới đây vào tập tin của bạn style.css(hoặc bất cứ tên nào).

#fixmenu{
	width: 1122px;
	height:30px;
	margin-left:-48px;
	padding:5px 48px;
	position:fixed;
	top:0;
	background:#7eb7d9;
	display:none;
}
	
.menu-fixed{
	width: 260px;
	float: right;
	text-align: right;
	padding:4px 0 5px 0;
	list-style-type:none;
}

.menu-fixed li{ display:inline; }

.menu-fixed a{
	ont-size:0.9em;
	color:#fff; 
	text-shadow:1px 1px #5E8BC5;
	padding:0 0 0 10px;
}

Đây là mã CSS chính xác mà tôi đã sử dụng trên CatsWhoCode , vì vậy có lẽ bạn sẽ phải điều chỉnh nó một chút. Nếu bạn có một cái nhìn vào tài liệu html của bạn ngay bây giờ, không có gì sẽ hiển thị. Tại sao? vì display:none;tài sản mà tôi thêm vào #fixmenucontainer. Điều này đơn giản là vì chúng tôi chỉ muốn menu cố định của chúng tôi hiển thị khi menu tiêu đề thông thường không thể nhìn thấy do cuộn.

JQuery

Vậy làm thế nào để chúng tôi phát hiện khi trang đã được cuộn đủ để tiêu đề của trang không còn hiển thị nữa? Tất nhiên chúng ta sẽ sử dụng jQuery. Dán mã này vào dưới cùng của tài liệu html của bạn; trong footer.phptệp nếu bạn đang áp dụng điều này cho blog WordPress. Tất nhiên, đảm bảo bạn đã bao gồm khung jQuery trước mã này.

$(document).ready(function() {
	$(window).scroll(function(){
		if(document.body.scrollTop > 300)
			$('#fixmenu').fadeIn( "slow", function() { });
		else	
			$('#fixmenu').fadeOut( "slow", function() { });
	});

	$('a#srolltotop').click(function(){
		$('html, body').animate({scrollTop:0}, 100);
		return false;
	});
});

Những gì mã này làm khá đơn giản: Trên dòng 3, chúng tôi phát hiện nếu tài liệu đã được cuộn hơn 300 pixel từ trên xuống. Nếu có, fadeIn()hàm jQuery được gọi để hiển thị menu cố định. Mặt khác, fadeOut()chức năng được sử dụng để ẩn menu khi phần trên cùng của tài liệu hiển thị.

Trên dòng 9, tôi đã thêm một chút mã để phát hiện khi #scrolltopliên kết được kích hoạt. Một nhấp chuột sẽ di chuyển trơn tru lên trên cùng của tài liệu.



|