Sources Contact Advanced Search Tutorials

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

May 16, 2021 04:22 pm GMT

How I made this cool Responsive Navigation Bar!

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-path is 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!

View on GitHub

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 .

Original Link: https://dev.to/hima_khaitan/how-i-made-this-cool-responsive-navigation-bar-3kei

Share this article:

View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To