Bài viết này hướng dẫn cách làm giao diện Navbar và Header của dự án Landing Page “Intense”.
Chúng ta sử dụng Fixed navbar cho phần Navbar.
HTML
<nav class="navbar navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="#"><img id="logo" src="img/logo-light.png" alt="Intense"></a> </div> <div id="navbar" class="navbar-collapse collapse"> <div class="nav navbar-nav socials text-center"> <a href="#"><span class="fa fa-facebook"></span></a> <a href="#"><span class="fa fa-twitter"></span></a> <a href="#"><span class="fa fa-google-plus"></span></a> <a href="#"><span class="fa fa-linkedin"></span></a> </div> <div class="nav navbar-nav navbar-right text-center"> <a class="nav-btn" href="#">Get Started</a> </div> </div> </div> </nav> <!-- /nav --> <header class="header-container" data-parallax="scroll" data-image-src="img/bg-01.jpg"> <div class="container"> <div class="row"> <div class="col-lg-7"> <h1 class="hero-heading">Ultimate Solutions for Your Digital Needs</h1> <p class="hero-desc">Intense provides a variety of services and products for successful development of your business. Promote your company with us in just a few clicks!</p> <a class="main-btn" href="#">Get Started</a> </div> </div> </div> </header> <!-- /header -->
CSS
/* Cơ bản */ body { font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #9b9b9b; line-height: 1.6; font-size: 15px; } /* Nav */ .navbar { padding-top: 12px; padding-bottom: 12px; background: transparent; border-bottom: 1px solid rgba(255, 255, 255, 0.22); transition: 0.35s all ease; } .navbar .navbar-right { padding-top: 3px; } .socials { margin-left: 15px; font-size: 16px; padding-top: 5px; } @media (min-width: 1200px) { .socials { margin-left: 300px; } } .socials a { color: #fff; margin-right: 20px; transition: .3s all ease; } .socials a:hover, .socials a:focus { color: #ff1654; } @media (max-width: 768px) { .icon-bar { background: #fff; } .navbar-header { padding-left: 0; margin-left: 0 !important; } .navbar { padding-top: 5px; padding-bottom: 0; } .navbar-toggle { margin-top: 5px; } .navbar-right { margin-top: 10px; margin-bottom: 20px; } } /* Header */ .header-container { background: transparent; padding-top: 150px; padding-bottom: 200px; color: #fff; } .header-container .hero-heading { line-height: 1.2; font-size: 60px; font-weight: 700; margin-bottom: 30px; } .header-container .hero-desc { margin-bottom: 50px; } .main-btn, .nav-btn { color: #fff; background-color: #ff1654; border-color: #ff1654; text-transform: uppercase; font-size: 13px; line-height: 23px; border-radius: 3px; border-width: 2px; padding: 13px 35px 13px; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.03em; transition: .3s; font-weight: 600; text-align: center; vertical-align: middle; } .nav-btn { font-size: 12px; padding: 9px 18px; } .main-btn:hover, .main-btn:focus, .nav-btn:hover, .nav-btn:focus { color: #fff; background-color: #e2003c; border-color: #e2003c; text-decoration: none; }
Đổi màu Navbar khi cuộn
Để đổi màu nền của Navbar, ta thêm class .moving
như sau vào main.css
.
.navbar.moving { background: #212121; border-bottom-color: #212121; box-shadow: 0 3px 11px 0 rgba(0, 0, 0, 0.15); }
Sau đó sử dụng sự kiện $(window).scroll();
của jQuery để nhận biết. Khi cuộn được 50px, ta sẽ thêm class moving
vào Navbar đồng thời đổi Logo sang màu tối và ngược lại.
$(document).ready(function() { $(window).scroll(function() { if ($(this).scrollTop() > 50) { $('.navbar').addClass('moving'); $('#logo').attr('src', 'img/logo-dark.png'); } else { $('.navbar').removeClass('moving'); $('#logo').attr('src', 'img/logo-light.png'); } }); });
Vậy là chúng ta đã hoàn thành xong phần đầu trang.