This content originally appeared on DEV Community and was authored by Himanshu
Websites! We all love making websites that are built from small components and sections. One such component is Navbar. Making a Navbar is easy but making a responsive Navbar can be trouble for some of the newcomers.
In this project, we will be building a cool responsive Navbar along with learning some of the ADVANCED CSS PROPERTIES. The project. The project will nail down the fundamentals of making a RESPONSIVE NAVBAR
Live Demo:
Setting Up The Files
In the project, folders make these three files accordingly.
- Index.html
- Styles.css
- App.js
Linking the Files
Your stater index.html should be similar to the one shown Below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<title>Navigation Bar</title>
</head>
<body>
<script src="./app.js"></script>
</body>
</html>
Clearing the Predefined Browser Styles
Every Browser has its own predefined CSS styles such as margin, padding, and many more which may interrupt our design. So to get rid of it configure the CSS FILE as shown below.
*,
*::after,
*::before {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
/* This Converts 1rem = 16px from 1rem = 10px */
font-size: 62.5%;
}
Now we have linked the CSS and JS files with your HTML and ready to go.
Writing the Markup
We will be using BEM Notation to name our CSS classes. You can read more about Here.
<nav class="nav">
<!-- Main Container -->
<div class="logo">
<!-- Logo -->
<img
src="https://raw.githubusercontent.com/himakhaitan/Natours/main/img/logo-white.png"
alt="Logo"
class="logo-img"
/>
</div>
<div class="hamburger">
<!-- Mobile Hamburger -->
<div class="line"></div>
</div>
<div class="nav-items">
<!-- Desktop Menu Bar -->
<ul class="navigation__list">
<li class="navigation__item">
<a href="" class="navigation__link"><span>01</span>About Me</a>
</li>
<li class="navigation__item">
<a href="" class="navigation__link"><span>02</span>Popular Repos</a>
</li>
<li class="navigation__item">
<a href="" class="navigation__link"><span>03</span>Contact Me</a>
</li>
<li class="navigation__item">
<a href="" class="navigation__link"><span>04</span>Github</a>
</li>
<li class="navigation__item">
<a href="" class="navigation__link"><span>05</span>Hire Me</a>
</li>
</ul>
</div>
</nav>
Styling
Basic CSS
You can use any background image you want. You can find the image used by me here.
body {
margin: 1rem;
height: 100vh;
font-family: "Lato", sans-serif;
background-repeat: no-repeat;
background-image: linear-gradient(
to left,
rgba(40, 180, 133, 0.8),
rgba(85, 197, 122, 0.8),
rgba(126, 213, 111, 0.8)
),
url("https://raw.githubusercontent.com/himakhaitan/Natours/main/img/hero.jpg");
background-size: cover;
}
Styling the nav container
We have used grid to get the required structure.
.nav {
margin-top: 1rem;
width: 100%;
padding: 1rem 2rem;
display: grid;
grid-template-columns: 1fr max-content;
}
Styling the child containers
.logo-img {
width: 5rem;
}
.nav-items {
margin-left: auto;
}
.hamburger {
display: none;
}
Styling the Nav Items
.navigation__list {
display: flex;
list-style: none;
align-items: center;
height: 100%;
}
.navigation__item {
font-size: 1rem;
letter-spacing: 0.3rem;
font-weight: 500;
}
.navigation__link {
color: #fff;
}
.navigation__link > span {
display: none;
}
Styling the Hover Effect
The main purpose of the styles is to increase the background area and on hover decrease it. Alongside it had styled background which when animated gives the desired results.
.navigation__item {
transition: all 0.4s;
}
.navigation__link {
background-image: linear-gradient(
120deg,
transparent 0%,
transparent 50%,
#fff 50%
);
background-size: 250%;
padding: 1rem 1.5rem;
transition: all 0.4s;
position: relative;
}
.navigation__link:hover,
.navigation__link:active {
background-position: 100%;
color: rgba(85, 197, 122, 1);
transform: translateX(1rem);
}
Styling the Hamburger
For the style of Hamburger, we will be using pseudo-elements. ::after and ::before are the required pseudo-elements.
.line {
position: relative;
}
.line,
.line::after,
.line::before {
content: "";
background-color: #fff;
width: 2rem;
display: inline-block;
height: 0.2rem;
border-radius: 12px;
left: 0;
transition: all 0.3s;
}
.line::after {
top: -0.8rem;
position: absolute;
}
.line::before {
top: 0.8rem;
position: absolute;
}
.checked > .line::after {
top: 0;
transform: rotate(135deg);
}
.checked > .line::before {
top: 0;
transform: rotate(-135deg);
}
.checked > .line {
background-color: transparent;
}
.checked CSS class is applied to the Hamburger when it is clicked and the navbar is opened. The class helps the Hamburger to convert its shape into a X.
Making the Navbar Responsive
Further CSS code will be written under a Media Query which will be from max-width: 1000px.
@media screen and (max-width: 1000px) {
.nav-items {
position: fixed;
top: 0;
left: 0;
background-image: linear-gradient(
to right bottom,
rgba(40, 180, 133, 1),
rgba(85, 197, 122, 1),
rgba(126, 213, 111, 1)
);
height: 100vh;
width: 100%;
}
.navigation__list {
flex-direction: column;
align-items: center;
justify-content: space-evenly;
padding: 10rem 0;
}
.navigation__link > span {
display: inherit;
margin-right: 0.4rem;
}
.hamburger {
display: flex;
align-items: center;
margin-left: auto;
z-index: 100;
cursor: pointer;
}
.navigation__item:hover {
transform: translateX(8px);
}
}
Making the navbar Animated
clip-path is the property that we will be using to make the Navbar Opening Animated.
clip-pathis a relatively new property hence some of the browsers don't support it so it must be prefixed as shown below in the code.
.nav-items {
clip-path: circle(10rem at 90% -30%);
-webkit-clip-path: circle(10rem at 90% -30%);
transition: all 0.5s ease-out;
}
.nav-items.open {
clip-path: circle(70rem at 90% -30%);
-webkit-clip-path: circle(70rem at 90% -30%);
}
circle() property allows us to create a mask on the nav-items which will be animated when a class .open is toggled on the div with class nav-items.
Adding the Functionality
We need to select the following divs to apply the toggle behavior.
<div class="hamburger"></div>
<!-- And -->
<div class="nav-items"></div>
For selecting a div with a class we write
document.querySelector(".class") This will give us the div with the required class.
Now all the toggle behavior will start once the hamburger is clicked so we will attach an event listener to it as shown below.
document.querySelector('.hamburger').addEventListener('click', () => {
document.querySelector('.nav-items').classList.toggle('open')
document.querySelector('.hamburger').classList.toggle('checked');
});
Hurrah! We have made the navigation bar.
If you face any difficulty in making this. I will be more than happy to help you out with it.
Original Project:
himakhaitan
/
Natours
A tour booking Portal
Natours Project
Introduction
This tour booking portal is made to give user an experience to book the tours and bring recreation to their life.
Tech Stack
Installation
No such Installation is required. Although to process code following commands are used:-
To Compile SASS
npm run compile:sass
To Comile and Watch SASS
npm run start
To Concat CSS
npm run concat:css
To Prefix CSS
npm run prefix:css
To Compress CSS
npm run compress:css
To Build Css
i.e To Concat, Prefix & Compress CSS
npm run build:css
Happily turning COFFEE into CODE!
Can you help me?
As You can see the original project didn't have any backend functionality. Can any of you can guys suggest any idea or can code along with me. I would highly appreciate if you can leave feedback, criticism or suggestion of any kind.
Repo Link: Natours
It will also be appreciated if you fork the repo and help me out with the Backend!
If you're interested in contributing, the project is open-source and I would appreciate any sort of help. Otherwise, you can share it or star the repo, if you want to of course.
Happily Turning Coffee ☕ into code ?.
This content originally appeared on DEV Community and was authored by Himanshu
Himanshu | Sciencx (2021-05-16T16:22:40+00:00) How I made this cool Responsive Navigation Bar!. Retrieved from https://www.scien.cx/2021/05/16/how-i-made-this-cool-responsive-navigation-bar/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.