Trở về

Hướng dẫn làm Menu cố định khi kéo trang

bởi Vi Nè

Menu là một bộ phận không thể thiếu trên các website, nhưng để làm nó theo trend hoặc trở thành điểm nhấn cho website thì có mấy ai làm được. Menu di chuyển theo màn hình khi kéo chuột theo web làm cho khách truy cập trở nên thích thú hơn và thấy tiện lợi hơn.

Xem DEMO

Để làm được việc này, hãy bảo đảm bạn đã hiểu về HTML và CSS.

1. Tạo menu tĩnh bằng HTML và CSS

Ví dụ đoạn CODE html menu như dưới đây:

<div class="wrapper-nav" id="main-menu-tto">
            <nav class="nav-main">
                <ul class="clearfix">
                    <li class="active"><a title="Home" href="#">Trang chủ</a></li>
                    <li><a title="Chính trị - Xã hội" href="#">Chính trị - Xã hội</a>
                    </li>
                    <li><a title="Thế giới" href="#">Thế giới</a>
                    </li>
                    <li><a title="Pháp luật" href="#">Pháp luật</a>
                    </li>
                    <li><a title="Kinh tế" href="#">Kinh tế</a>
                    </li>
                    <li><a title="Sống khỏe" href="#">Sống khỏe</a>
                    </li>
                    <li><a title="Giáo dục" href="#">Giáo dục</a>
                    </li>
                    <li><a title="iTuyển sinh" href="#">Tuyển sinh</a>
                    </li>
                    <li><a title="Thể thao" href="#">Thể thao</a>
                    </li>
                    <li><a title="Văn hóa - Giải trí" href="#">Văn hóa - Giải trí</a>
                    </li>
                    <li><a title="Nhịp sống trẻ" href="#">Nhịp sống trẻ</a>
                    </li>
                    <li><a title="Nhịp sống số" href="#">Nhịp sống số</a>
                    </li>
                    <li><a title="Bạn đọc" href="#">Bạn đọc</a>
                    </li>
                </ul>
            </nav>
        </div>

và kèm theo đoạn CSS sau

.wrapper {
    width: 980px;
    margin: 0 auto;
}
.wrapper-nav{
	background: #fff;
}
    
.wrapper-nav.fixed {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 7000;
    box-shadow: 0 0 5px 2px #ccc;
}

.wrapper-nav.fixed .nav-main {
    width: 980px;
    margin: 0 auto;
}

.nav-main {
    height: 36px;
}

.nav-main>ul {
    position: relative;
    width: 100%;
    max-width: 980px;
    padding: 0px;
    margin: 0px;
}
.nav-main>ul>li {
    list-style: none;
    float: left;
    padding: 12px 0 10px;
    border-bottom: solid 1px #ccc;
}
.nav-main>ul>li>a {
    color: #333;
    font-weight: 700;
    float: left;
    font-size: 14px;
    padding: 1px 3.6px;
    border-left: solid 1px #ccc;
}

Lưu ý: Hãy thay đổi tên các thẻ, website của bạn có thể đã có tên thẻ như ví dụ, khi thay CSS trực tiếp có thể ảnh hưởng bố cục hiện tại.

2. Dùng JS để cố định Menu

Ta chèn đoạn JS sau vào phần head của website.

<script type="text/javascript" src="https://cunghocweb.com/data-out/js/jquery.js"></script>

Và đoạn sau vào footer

<script type="text/javascript">
	jQuery(document).ready(function($) {
		$(window).load(function() {
			if ($('.wrapper-nav').length > 0) {
				var _top = $('.wrapper-nav').offset().top - parseFloat($('.wrapper-nav').css('marginTop').replace(/auto/, 0));
				$(window).scroll(function(evt) {
					var _y = $(this).scrollTop();
					if (_y > _top) {
						$('.wrapper-nav').addClass('fixed');
						$('.main-1').css("margin-top", "30px")
					} else {
						$('.wrapper-nav').removeClass('fixed');
						$('.main-1').css("margin-top", "0")
					}
				})
			}
		});
	});
	</script>

Lưu ý: Nếu đổi tên các thẻ DIV ở mục (1) thì đoạn Javascript này cũng phải đổi.

Chúng tôi tạm dừng chức năng bình luận, mọi thắc mắc vui lòng gửi thông qua mục liên hệ. Xin cám ơn!

Bài 5: Cách tạo comment trong Python

Bài 4: Cách khai báo biến trong Python

Bài 3: Cài đặt Intellij IDEA và chạy Hello World trong Python

Bài 2: Hướng dẫn download và cài đặt python trên Windows

Bài 5: Tìm hiểu về Props trong ReactJS

Bài 4: Components trong ReactJS

Bài 3: Giới thiệu JSX trong ReactJS

Bài 2: Cài đặt môi trường chạy ReactJS

Bài 18: Thuộc tính icon trong CSS

Các biểu tượng có thể dễ dàng được thêm vào trang HTML của b...

Bài 17: Thuộc tính box model trong CSS

Bài 16: Thuộc tính outline trong CSS

Bài 15: Thuộc tính Height/Width trong CSS

Chat Icon Close Icon