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

Độ rộng khung (px):

Mở rộng

<script src="https://code.jquery.com/jquery-3.6.4.min.js" integrity="sha256-oP1xq2xWp2P4Mo5fiqPtzwvE2d8uQsdkgWclH9wQq4E=" crossorigin="anonymous"></script>
<style>
body {
height: 1000px;
}
.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;
}
</style>
<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>
        <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>

Kết quả