Responsive Navigation Drop-down Menu with Animation using HTML CSS & JavaScript

Tutorial Description :

In this tutorial we will create a Responsive Navigation Drop-down Menu with Animation using HTML CSS Media Querym Flex Box and CSS Grid and Check pseudo class and JavaScript

I will use font Font Awesome for the icons and google fonts with the font style of Roboto for the main font.

For the navigation I will use display flex so CSS3 flexbox.

I will also use pseudo element and pseudo classes as hover, after, before, and active in order to hide and make content visible .

Img:

Download Image file Download

Font Awesome
Google Fonts

HTML :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
      rel="stylesheet"
      integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
      crossorigin="anonymous"
    />
    <script
      src="https://kit.fontawesome.com/75e53ee709.js"
      crossorigin="anonymous"
    ></script>
    <link
      href="https://fonts.googleapis.com/css?family=Lobster&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
  </head>
  <body>
    <header>
      <div class="container">
        <nav class="nav">
          <div class="menu-icons">
            <i class="fas fa-bars"></i>
            <i class="fas fa-times"></i>
          </div>
          <a href="#" class="logo">
            <i class="fas fa-home"></i>
          </a>
          <ul class="nav_list">
            <li class="drop_down">
              <a href="#"
                >Drop Down
                <i class="fas fa-caret-square-down"></i>
              </a>

              <ul class="sub-menu sub-1">
                <li>
                  <a href="#"
                    >sub home
                    <i class="fas fa-caret-square-down"></i>
                  </a>
                  <ul class="sub-menu sub-2">
                    <li><a href="#">sub home</a></li>
                    <li><a href="#">sub home</a></li>
                    <li>
                      <a href="#"
                        >more... <i class="fas fa-caret-square-down"></i
                      ></a>
                      <ul class="sub-menu sub-3">
                        <li><a href="#">sub sub home</a></li>
                        <li><a href="#">sub sub home</a></li>
                        <li><a href="#">sub sub home</a></li>
                      </ul>
                    </li>
                  </ul>
                </li>
                <li><a href="#">sub home</a></li>
                <li><a href="#">sub home</a></li>
              </ul>
            </li>

            <li><a href="#" class="btn">about</a></li>
            <li><a href="#" class="btn">gallery</a></li>
            <li><a href="#" class="btn">services</a></li>
            <li><a href="#" class="btn">contact</a></li>
          </ul>
        </nav>
      </div>
    </header>

    <main class="main ">
      <section class="text">
        <h2>Real Estate</h2>
        <h1>Your dream Home</h1>

        <h2>Where you live defines how you feal.</h2>

        <a href="#" class="learn_more btn"
          ><i class="fas fa-play"></i> Subscribe now!</a
        >
      </section>
    </main>
    <footer>
      <p>Menyhart<span> Media</span> &copy;2020</p>
    </footer>
    <script src="nav.js"></script>
  </body>
</html>

CSS:

*,
::before,
::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
}

body {
  font-size: 16px;
}
.nav {
  width: 100%;
  height: 5rem;
  box-shadow: 0 0 10px 2px #eebb33;
  display: flex;
  align-items: center;
}
header {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
.container {
  
  width: 100%;
  margin: 0 auto;
  padding: 9 1.5rem;
}

.menu-icons {
  cursor: pointer;
  position: absolute;
  top: 50%;
  right: 1rem;
  color: var(--light-c);
  font-size: 2rem;
  transform: translateY(-50%);
  z-index: 3;
  display: none;
}
.logo {
  width: 2.5rem;
  height: 2.5rem;
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  padding: 1rem;
}

.fa-home {
  font-size: 2rem;
  color: #fff;
  padding: 0.5rem;
}

.nav_list {
  display: flex;
}
.nav_list li {
  padding: 0.7;
  position: relative;
  margin: 0 1rem;
  border-bottom: 1px solid #111;
}
.drop_down {
  background-color: #eebb33;
  border-radius: 5px;
}
.sub-menu {
  padding: 0.5rem;
}
.nav_list li a {
  color: #111;
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  display: block;
  padding: 0 1.5rem;
}

.nav_list li a:hover {
  color: #fff;
  font-size: 1.22rem;
  background-color: black;
  transition: all 0.2s ease;
}

.sub-menu {
  color: #fff;
  width: 15rem;
  display: block;
  position: absolute;
  border-top: 3px solid #fff;
  background-color: rgba(37, 25, 2, 0.7);
  top: 10rem;
  transition: all 0.5s ease;

  opacity: 0;
  visibility: hidden;
  background-color: rgba(238, 187, 51, 0.6);
}
.sub-menu:before {
  content: "";
  position: absolute;
  top: -2rem;
  left: 2rem;
  border: 1rem solid transparent;
  border-bottom-color: #fff;
}

.sub-menu .sub-menu:before {
  top: 0;
  left: -2rem;
  border: 1rem solid transparent;
  border-right-color: #fff;
}
.sub-menu .sub-menu {
  border-top: none;
  border-left: 3px solid #fff;
  top: 0;
  left: 100%;
  background-color: rgba(238, 187, 51, 0.6);
}

.nav_list li:hover > .sub-menu {
  top: 2.5rem;
  opacity: 1;
  visibility: visible;
}
.nav_list li:hover > .sub-2 {
  top: 0.1rem;
}
.nav_list li:hover > .sub-3 {
  top: 0.1rem;
}

body {
  overflow-x: hidden;
}
.btn {
  background-color: #eebb33;
  transition: background-color 0.6s;
  display: inline-block;
  border: 2px solid #eebb33;
  border-radius: 5px;
  color: #fff;
  font-size: 1.4rem;
  font-weight: 600;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.learn_more {
  background-color: #a00a0a;
  margin-top: 2rem;
  padding: 1.1rem;
  display: inline-block;
  border: 2px solid #ffffff;
  border-radius: 5px;

  color: #fff;
  font-size: 1.4rem;
  font-weight: 600;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.btn:hover {
  background-color: rgba(5, 104, 18, 0.8);
}
/* Main section */
.main {
  position: relative;
  background: linear-gradient(
      to left,
      rgba(59, 37, 16, 0.5),
      rgba(37, 25, 2, 0.5)
    ),
    url(/img/living-room-with-furnitures-3457299.jpg) center center no-repeat;
  background-size: cover;

  height: 95vh;
  width: 100%;
  margin: auto;
}

.text {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--light-c);
  text-align: center;
  animation: title 3s;
  font-family: Verdana, Geneva, Tahoma, italic, sans-serif;
}
@keyframes title {
  0% {
    left: -100%;
  }
  100% {
    left: 50%;
  }
}
.text h1 {
  font-size: 6rem;
  margin: 2rem 0;

  font-family: "Lobster", cursive;
}

/* Responsivenes  */

@media screen and (max-width: 1080px) {
  .nav_list li a {
    font-size: 0.9rem;
  }
}
@media screen and (max-width: 786px) {
  .nav_list li a {
    font-size: 0.9rem;
  }
  .nav_list {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    background-color: rgba(37, 25, 2, 0.7);
  
    display: none;
  }

  .sub-menu {
    position: initial;
    border: 3px solid transparent;
    border-left-color: #fff;
  
    margin-left: 1rem;
    max-height: 0;
  }
  
  .sub-menu::before {
    display: none;
  }
  .nav_list li:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    max-height: initial;
   
  }

  .menu-icons {
    display: block;
  }
  .fa-times {
    display: none;
  }

  .nav.active .fa-times {
    display: block;
  }
  .nav.active .fa-bars {
    display: none;
  }

  .nav.active .nav_list {
    display: flex;
  }
}

/* Footer */
footer {
  background-color: #111111;
  height: 5vh;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  color: #eebb33;
  font-size: 1.2rem;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  letter-spacing: 2px;
  font-weight: 500;
  text-align: center;
}
footer span {
  color: var(--light-c);
  text-transform: uppercase;
  font-size: 1.1rem;
}

Java Script:

const menu = document.querySelector(".menu-icons");
const nav = document.querySelector(".nav");

menu.addEventListener("click", () => {
  nav.classList.toggle("active");
});

My Udemy Course:

Web Development HTML CSS & JS Beginner to Advance

Requirements

Basic PC/Mac Knowledge
Beginner Curiosity

Description

This is a beginner friendly course. This course will tech you the Foundations of Web Development. This a more practical orientate Course. Aldo we will start up slow with some basic definitions, the main focus here is to have as much as possible hands on experience. Learning by doing is the key word. That means Examples, Assignments and Exercises!

At this point I would like to invite you to join me on this journey and enrich yourself with the foundations of web development. In this Course You will learn Modern HTML 5, CSS 3, and JavaScript, and through applying them you will be able to building from Easy to progressively more complex responsive Responsive Web Pages.

Throughout the course we cover tons of tools and technologies including:

HTML5
CSS3
CSS FelxBox
CSS Grid Layout
Projects
SASS
JavaScript
DOM Manipulation
JSON
Projects , Projects and more Projects 🙂

Two Important Notes about this Course:

1. This is a hands-on Learning by doing Course. This means that we are going to start up Slowly with basic definitions in HTML and CSS and then we will combine them together by building the structure and applying design to our sites. After that we will apply JS in order to make the Site do Thinks.

2. Is that I will be constantly Updating the Content with New Documentation, Examples and Exercises in order to bring you as much value as possible. So you can always lean beck on this Course if you want to refresh your memory about something.

Bonus!

3. The most important thing the you need to know in life is where to find the information you need!Who this course is for:

Beginner Web Developers
Beginner Web Designers
Beginner HTML
Beginner CSS
Beginner SASS / SCSS
Beginner JavaScript

Responsive Navigation Drop-down Menu with Animation using HTML CSS & JavaScript

Tutorial Description :

Img:

Font Awesome
Google Fonts

HTML :

CSS:

Java Script:

My Udemy Course:

Web Development HTML CSS & JS Beginner to Advance

Requirements

Like this:

Leave a Reply Cancel reply

Tutorial Description :

Img:

Font Awesome Google Fonts

HTML :

CSS:

Java Script:

My Udemy Course:

Web Development HTML CSS & JS Beginner to Advance

Requirements

Sharing means caring:

Like this:

Leave a Reply Cancel reply

Font Awesome
Google Fonts