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.