Có một số bạn thắc mắc về menu hiện tại mình đang dùng cho Duylong.info. Đây là một hiệu ứng thiết kế khá đơn giản của Sutanaryan. Trong bài viết này mình sẽ hướng dẫn bạn tạo một menu cố định khi cuốn trang áp dụng cho WordPress.
1. Thư viện Jquery
Trước hết hãy check jquery của website của bạn xem đã có hay chưa? Đa số các website đều đã có jquery khi cài plugin hay themes. Trường hợp chưa có, bạn có thể download
tại đây để cài đặt cho website.
2. Nội dung html menu
Đây là một đoạn mã html mẫu để bạn dễ hình dung hơn các class, cấu hình menu chính xác hơn.
<div class="nav-container">
<div class="nav">
<ul>
<li><a href="">Home</a></li>
<li><a href="">CSS</a></li>
<li><a href="">PHP</a></li>
<li><a href="">SEO</a></li>
<li><a href="">jQuery</a></li>
<li><a href="">Wordpress</a></li>
<li><a href="">Services</a></li>
</ul>
<div class="clear"></div> /*clear floating div*/
</div>
</div>
Có 2 class bạn cần chú ý để thay đổi phù hợp với class trang website của bạn
- “nav-container”
- “nav”
3. Nội dung Css của menu cố định
Bạn hãy thêm đoạn css sau vào file style.css của theme đang sử dụng, nhớ thay 2 class “nav-container”, “nav” bằng class trong theme của bạn.
.nav-container{ background: #fff;}
.f-nav{ z-index: 9999; position: fixed; left: 0; top: 0; width: 100%;} /* this make our menu fixed top */
.nav { height: 42px;}
.nav ul { list-style: none; }
.nav ul li{float: left; margin-top: 6px; padding: 6px; border-right: 1px solid #ACACAC;}
.nav ul li:first-child{ padding-left: 0;}
.nav ul li a { }
.nav ul li a:hover{ text-decoration: underline;}
4. Nội dung Javascript cố định menu
Đây chính là đoạn nội dung Javascript tạo menu fixed khi cuộn trang
jQuery("document").ready(function($){
var nav = $('.nav-container');
$(window).scroll(function () {
if ($(this).scrollTop() > 136) {
nav.addClass("f-nav");
} else {
nav.removeClass("f-nav");
}
});
});
136 là giá trị khoảng cách tính từ vị trí của menu đến top website. Khi cuộn trang qua vị trí này, menu sẽ nhận class “f-nav”, cố định vị trí top của mình theo class “f-nav”.
Trường hợp bạn sử dụng wordpress, bạn có thể thêm đoạn javascript vào website mình bằng cách.
- Sửa đổi tên các class, thông số vị trí cố định (136), sau đó lưu lại dưới dạng file : fixed-menu.js
- Upload lên
Hosting của mình – Folder theme đang sử dụng.
- Thêm đoạn code sau vào functions.php & save lại
/** Add link script menu keep top**/
add_action( 'wp_enqueue_scripts', 'fixed_menu_top' );
function fixed_menu_top () {
wp_enqueue_script( 'custom-script-menu', get_stylesheet_directory_uri() . '/fixed-menu.js', array( 'jquery' ) );
}
Hoàn thành – F5 trang chủ để xem kết quả.
Nguồn: Duy long blog
