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.

Trong bài này có

Để 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>
        </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 src="https://code.jquery.com/jquery-3.6.4.min.js" integrity="sha256-oP1xq2xWp2P4Mo5fiqPtzwvE2d8uQsdkgWclH9wQq4E=" crossorigin="anonymous"></script>

Và đoạn sau vào footer

<script>
	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.

Báo cáo
Shares: