Phương pháp 1: Menu Top of Content
Cách đầu tiên và đơn giản nhất để làm điều này là để chỉ cần đặt menu navigation của bạn ở phía trên cùng của trang và cho phép nó để ở trong một (nổi) vị trí cố định khi người dùng cuộn xuống. Giữ thực đơn của bạn ở phía trên cùng của trang của bạn sẽ tránh được việc phải thêm bất kỳ Javascript, vì vậy nếu bạn không thoải mái với việc chỉnh sửa mã của blog của bạn, thì đây là phương pháp cho bạn! Đây là một ví dụ:
Hãy chắc chắn rằng bạn đã thêm các Blogger "Pages" phụ tùng cho một trong những khu vực tiêu đề trong trang Layout của bạn (hoặc là Cross-cột hoặc các không gian phụ tùng Cross---COLUMN2). Sau đó, hãy làm theo các bước dưới đây:
1. Điều hướng qua các Template> Tùy chỉnh trang.
2. Chọn Advanced từ menu bên sau đó Thêm CSS
3. Nếu bạn đã chèn tùy chỉnh CSS trong hộp này, di chuyển xuống phía dưới cùng của mã của bạn
4. Thêm mã CSS sau vào hộp:
/* Blogger floating menu by icanbuildablog.com*/
#navbar {display:none}
#PageList1 ul {
position:fixed;
top:0px;
z-index:1000;
background-color:#ffffff;
width:100%;
max-width:1100px;
}
.content-inner {
margin-top:30px;
}
5. Thay đổi "max-width" biến với chiều rộng tổng thể của khu vực nội dung blog của riêng bạn. Bạn có thể tìm chiều rộng của blog của bạn bằng cách đi qua các "Điều chỉnh độ rộng" và xem các số trong khu vực "Toàn bộ Blog".
6. "margin-top" biến nên có chiều cao của menu điều hướng của bạn. Bạn có thể để nó như là nếu bạn chưa thay đổi menu trang Blogger của bạn .
7. Bạn cũng có thể thay đổi biến màu nền cho một hex mã màu của sự lựa chọn của bạn. Ngay bây giờ nó được thiết lập để trắng.
Cách 2: Menu Dưới tiêu đề
Phương pháp thứ hai là cho các menu được đặt dưới hình ảnh tiêu đề hoặc không nằm trực tiếp ở trên cùng của màn hình ( NHƯ NÀY ). Đối với các blog được thiết kế theo cách này, bạn sẽ muốn thực đơn ở lại vị trí mong muốn của nó lúc đầu, và sau đó nổi lên ở vị trí như những cuộn người truy cập quá khứ, nơi nó được giải quyết. Dưới đây là làm thế nào để đạt được điều đó:
1. Điều hướng qua các Template> Tùy chỉnh trang.
2. Chọn Advanced từ menu bên sau đó Thêm CSS
3. Nếu bạn đã chèn tùy chỉnh CSS trong hộp này, di chuyển xuống phía dưới cùng của mã của bạn
4. Thêm mã CSS sau vào hộp:
/* Blogger Floating Menu by icanbuildablog.com */
#navbar {display:none}
#PageList1 ul {
height:30px;
background-color:#ffffff;
width:100%;
max-width:1100px;
z-index:1000;
}
5. Xem các bước 5-7 trên
6. Lưu các thay đổi của bạn và điều hướng đến các Template> Chỉnh sửa HTML
7. Ngay trước </ head> trong mã, dán đoạn mã sau:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
<!--Blogger Floating Menu by I Can Build A Blog.com-->
<script type='text/javascript'>
//<![CDATA[
$(function() {
var nav = $('#PageList1 ul');
var navHomeY = nav.offset().top;
var isFixed = false;
var $w = $(window);
$w.scroll(function() {
var scrollTop = $w.scrollTop();
var shouldBeFixed = scrollTop > navHomeY;
if (shouldBeFixed && !isFixed) {
nav.css({
position: 'fixed',
top: 0,
});
isFixed = true;
}
else if (!shouldBeFixed && isFixed)
{
nav.css({
position: 'static'
});
isFixed = false;
}
});
});
//]]>
</script>
8. Lưu các thay đổi của bạn và xem trang của bạn!
Lưu ý: Nếu bạn có vấn đề với menu không làm những gì nó cần, nó có thể là một vấn đề của việc có trùng lặp kịch bản jQuery trong mã blog của bạn. Hãy thử gỡ bỏ những dòng đầu tiên của mã (lặp lại bên dưới) và tiết kiệm:
<Script src = 'http: //ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
Tôi hy vọng hướng dẫn này là hữu ích và rằng tất cả các câu hỏi của bạn được trả lời về việc tạo ra một menu Blogger nổi!
No comments:
Post a Comment