Ngày 12 tháng 08 năm 2018, sharecodeweb chia sẻ với các bạn một code tạo fixed navigation bar cực đẹp chỉ với một vài đoạn HTML, CSS và Jquery đơn giản.
Demo ảnh
Nguyên liệu trong bài
Tập tin HTML index.html
Trong tập tin này, ta tạo 2 section:
- section
landing-page: Dùng hiển thị cover ảnh của trang - section
content: Dùng để hiển thị nội dung của trang
Trong đó, landing-page sẽ gồm một thẻ h1 và một tổ hợp thẻ ul để tạo menu. Tham khảo code bên dưới:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<section id="landing-page"> <h1>Fixed when scroll</h1> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Service</a></li> <li><a href="#">Team</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </section> |
Section content các bạn có thể điền bất cứ nội dung gì các bạn muốn. Có thể lấy mã nhúng Youtube, mã nhúng Facebook như bài share code web game Gta 5 chả hạn..
Tập tin fixed.css
Đầu tiên là thiết lập một số thông tin cơ bản về font cho các thẻ body và thẻ a
|
1 2 3 4 5 6 7 8 9 10 11 12 |
*{ margin: 0px; padding:0px; } body{ font-family: Poppins; text-align: center; font-size: 18px; } a{ text-decoration: none; } |
Thêm một class .fixed. Đây là class khi scroll chuột ta sẽ dùng jquery để thêm vào thẻ nav bên trên.
Ở class này ta sử dụng thuộc tính position:fixed để gắn cố định khi cuộn chuột xuống.
|
1 2 3 4 5 6 |
.fixed{ position: fixed; top:0; height: 70px; z-index: 1; } |
Một vài dòng CSS cho phần menu navigation của chúng ta. Ta sử dụng thuộc tính position:absolute cho phần tử nav. Thuộc tính display:inline-block cho phần tử li nhằm dàn hàng ngang thanh navigation.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
nav{ position: absolute; bottom: 0; width: 100%; height: 70px; background: #000; } nav li{ display:inline-block; padding: 24px 40px; font-size: 12px; font-weight: 400; } nav li a{ color:#fff; text-transform: uppercase; } |
Tiếp theo là làm phần cover ảnh cho trang web. Xem lại thuộc tính background-size: cover; đã được dùng nhiều cho bài share code game GTA 5 trên nhé.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
#landing-page{ background: url(https://images.unsplash.com/photo-1533979258785-50a59d53d03d) 50% 50% no-repeat; background-size: cover; } #landing-page h1{ position: absolute; top:40%; left: 50%; transform: translate(-50%,-50%); text-transform: uppercase; letter-spacing: 20px; color: #fff; font-size: 18px; font-weight: 700; } |
Tham khảo lại thuộc tính transform tại đây.
Cuối cùng là đoạn resize theo kích thước màn hình nếu cần
|
1 2 3 4 5 6 7 8 |
@media only screen and (max-width: 520px){ nav li{ padding:24px 24px; } nav li a{ font-size: 14px; } } |
Cần thêm đoạn Jquery để chạy tốt
Đoạn jQuery đơn giản kiểm tra nếu scroll chuột vượt qua độ cao màn hình thì sẽ gán class fixed, ngược lại sẽ remove class fixed. Trong đó, dòng số 3 phải trừ đi 70 đơn vị vì chiều cao của menu chúng ta set bên trên là 70. Do đó, tùy vào trang của bạn thì thay đổi số này cho hợp lý nhé.
|
1 2 3 4 5 6 7 8 9 10 11 |
$(document).ready(function(){ $(window).bind('scroll',function(){ var navHeight = $(window).height() - 70; if($(window).scrollTop()>navHeight){ $('nav').addClass('fixed'); } else{ $('nav').removeClass('fixed'); } }) }); |
Dưới đây là code hoàn chỉnh. Chỉ có 2 tập tin thôi nên mình ngại nén và chia sẻ file, các bạn tham khảo luôn nhé.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<!DOCTYPE html> <html> <head> <title>Fixed Navigation Bar</title> <link rel="stylesheet" href="css/fixed.css"> <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet"> </head> <body> <section id="landing-page"> <h1>Fixed when scroll</h1> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Service</a></li> <li><a href="#">Team</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </section> <section id="content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, tempora sunt dolore saepe doloremque porro nisi praesentium suscipit ducimus eius, consequuntur, ullam mollitia in delectus est, beatae recusandae hic blanditiis.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis maiores dolorem et consequatur quam ipsam deserunt molestiae consectetur sint excepturi eveniet expedita magni soluta sed repellendus velit blanditiis nisi magnam rerum, commodi alias modi saepe non similique. Recusandae, ab ducimus error incidunt numquam quisquam unde hic repudiandae, rerum cum magnam fugiat, veniam iusto qui optio natus blanditiis mollitia asperiores, voluptas quas libero inventore! Numquam quos, necessitatibus autem consectetur, recusandae voluptate magni assumenda, molestiae similique, ullam doloribus. Saepe quasi aut maiores qui facilis neque maxime vitae, quis. Voluptatum odit et fuga sint sed iusto dolorem a. Quibusdam quia accusamus, natus commodi libero odio repellendus minima officiis, repudiandae, quo nihil. Neque corrupti, illo minima facere soluta earum quo suscipit quis alias iure facilis? Suscipit optio non modi laudantium officiis eaque neque tempora perspiciatis consectetur sit rem voluptates odit quibusdam nulla porro fugiat, corrupti est, at nobis delectus fugit excepturi expedita ipsum error ea. Cumque perferendis, eos incidunt aliquid vel quo praesentium esse nam est quibusdam non beatae ab necessitatibus nostrum, illum maiores! Itaque ab, architecto sit voluptas praesentium porro est dolore aliquam natus, accusamus voluptates totam aut explicabo id cum quas error tempora, commodi. Facilis aliquam, ipsum mollitia, ex error debitis doloribus.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat voluptatem debitis, quos ut ipsam numquam doloremque assumenda ea officiis labore neque quisquam. Voluptatum sapiente deleniti, nesciunt consectetur rerum in incidunt necessitatibus quibusdam iusto, tempora minus neque libero a repudiandae obcaecati dolore facilis illo eos aliquid maiores quae eaque doloremque fugiat aut quia. Voluptates incidunt in unde ducimus quaerat dolor quidem ullam, aperiam quia temporibus a, nulla natus adipisci tempora dolorem culpa esse quam dolores voluptate odit pariatur eligendi. Quia sequi dolores maxime laudantium ipsa velit veniam nesciunt facilis iusto ad ab reiciendis a in, quas saepe voluptatibus eaque. Similique provident possimus unde numquam quae est eligendi esse vel nobis modi vero reiciendis voluptatibus deleniti temporibus debitis tempora iure, placeat maiores quas libero, facilis laudantium cupiditate! Voluptates laborum accusamus iste quisquam dolorum quo ipsa consequuntur ullam sit provident! Harum facere quidem eius magni esse praesentium amet officiis, dignissimos aut aspernatur repellendus in asperiores culpa sint porro, est ullam ipsa nisi quam quod eum incidunt. Distinctio reprehenderit laborum voluptates, voluptas amet quo necessitatibus qui. Nemo praesentium veritatis fuga, autem dicta, maxime, ipsam temporibus distinctio, ut neque amet voluptates. Omnis placeat inventore molestiae, at officia! Eveniet quos dolorem, eos laboriosam. Magni tempora porro facere quam accusamus veritatis consectetur vel saepe explicabo, quibusdam repellendus deleniti harum quia, ex sapiente? Odio neque molestiae odit eum, tempore natus inventore deleniti possimus praesentium, sint voluptatibus sequi non aut temporibus maiores, ducimus debitis alias. Voluptatem aliquam ratione possimus aliquid tempore explicabo, sint deserunt itaque at quod, doloremque, dignissimos deleniti eveniet. Debitis, non possimus, tenetur enim eveniet, voluptates sapiente ipsa suscipit laudantium aut sequi atque doloremque illo. Officiis esse similique et sapiente debitis nisi neque nihil quam asperiores, provident tenetur numquam nulla doloribus quia veniam voluptates blanditiis vel nobis at? Rerum cum in ad, sed laboriosam, doloremque corporis. Sequi laboriosam soluta commodi, sapiente adipisci placeat aliquam delectus quisquam. Rerum, unde sit ipsa similique molestias itaque laborum saepe error voluptatum, a optio pariatur enim quas deserunt veritatis laudantium consectetur veniam dolorum asperiores. Odio laudantium deserunt adipisci ipsam itaque ad mollitia doloribus corporis suscipit at a sapiente iure veniam expedita placeat quaerat praesentium facilis laborum, beatae illo natus commodi. Illo similique magni unde veritatis, deleniti nesciunt voluptates, asperiores cum officia possimus, quae tempore rem atque, dignissimos consequuntur adipisci nobis voluptatem doloribus eveniet minima delectus est voluptatum! Quas optio, nisi facere doloribus aspernatur fugiat deserunt praesentium vitae, debitis in mollitia sint modi temporibus libero, a officia! Explicabo ex quae hic rem fuga, aut impedit vel neque exercitationem delectus rerum cumque doloremque possimus incidunt earum optio blanditiis laboriosam, eaque sapiente ducimus. Quod voluptatibus expedita accusamus minima ab illo ut id at sit, harum eveniet, inventore, nesciunt tenetur beatae, optio ipsa. Architecto, ratione vitae. Inventore nostrum vel sequi. Temporibus corrupti perspiciatis, quisquam doloremque sed nam omnis earum dicta odio vitae quasi beatae iure aliquam officia fugiat, rem dolore! Magni recusandae inventore earum maxime necessitatibus, repellendus praesentium modi tempora facere, qui laboriosam iusto assumenda a eum placeat repellat. Reiciendis, facere eveniet velit placeat consequatur doloremque.</p> </section> <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(window).bind('scroll',function(){ var navHeight = $(window).height() - 70; if($(window).scrollTop()>navHeight){ $('nav').addClass('fixed'); } else{ $('nav').removeClass('fixed'); } }) }); </script> </body> </html> |
Và…..
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
*{ margin: 0px; padding:0px; } body{ font-family: Poppins; text-align: center; font-size: 18px; } a{ text-decoration: none; } .fixed{ position: fixed; top:0; height: 70px; z-index: 1; } nav{ position: absolute; bottom: 0; width: 100%; height: 70px; background: #000; } nav li{ display:inline-block; padding: 24px 40px; font-size: 12px; font-weight: 400; } nav li a{ color:#fff; text-transform: uppercase; } section{ height: 100vh; } #landing-page{ background: url(https://images.unsplash.com/photo-1533979258785-50a59d53d03d) 50% 50% no-repeat; background-size: cover; } #landing-page h1{ position: absolute; top:40%; left: 50%; transform: translate(-50%,-50%); text-transform: uppercase; letter-spacing: 20px; color: #fff; font-size: 18px; font-weight: 700; } #content{ background: #fff; } p{ width:80%; margin:40px auto; text-align: justify; color:grey; line-height: 30px; font-size: 16px; } @media only screen and (max-width: 520px){ nav li{ padding:24px 24px; } nav li a{ font-size: 14px; } } |
Chúc các bạn thành công!
