Navbar Designs | BimStudies.Com

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Sidebar Menu</title>
</head>
<body>
    <div class="sidebar" id="sidebar">
        <button class="toggle-btn" onclick="toggleSidebar()">☰ Toggle Sidebar</button>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>

    <div class="content">
        <!-- Your main content goes here -->
        <div><img src="bimlogo.png"width="300"></div>
        <h1>Main Content</h1>
        <p>This is the main content of your page.</p>
    </div>

</body>
<script>
    function toggleSidebar() {
    const sidebar = document.getElementById('sidebar');
    sidebar.style.left = sidebar.style.left === '0px' ? '-250px' : '0';
}

</script>
</html>

CSS


    body {
    margin: 0;
    font-family: Arial, sans-serif;
    display: flex;
}

.sidebar {
    height: 100%;
    width: 250px;
    background-color: #333;
    padding-top: 20px;
    position: fixed;
    top: 0;
    left: -250px;
    transition: left 0.3s ease-in-out;
}

.sidebar ul {
    list-style: none;
    padding: 10px;
}

.sidebar li {
    margin-bottom: 10px;
}

.sidebar a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    font-size: 18px;
}

.toggle-btn {
    font-size: 18px;
    cursor: pointer;
    background-color: #444;
    color: #fff;
    border: none;
    padding: 10px;
    margin-bottom: 20px;
}

.content {
    flex: 1;
    padding: 20px;
    background-color: #eee;
}

@media only screen and (max-width: 768px) {
    .sidebar {
        left: 1px;
    }
}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Hamburger Navbar</title>
</head>
<body>
    <div class="navbar">
        <div class="logo"><img src="bimlogo.png" width="200"> </div>
        <div class="menu-toggle" id="mobile-menu">
            <span class="bar"></span>
            <span class="bar"></span>
            <span class="bar"></span>
        </div>
        <ul class="nav-list" id="nav-list">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
    const mobileMenu = document.getElementById('mobile-menu');
    const navList = document.getElementById('nav-list');

    mobileMenu.addEventListener('click', function () {
        navList.classList.toggle('show');
    });
});

    </script>
</body>
</html>

CSS


    body {
    margin: 0;
    font-family: Arial, sans-serif;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #c4dade;
    padding: 15px;
}

.logo {
    color: #fff;
    font-size: 1.5em;
}

.menu-toggle {
    cursor: pointer;
    display: none;
    flex-direction: column;
}

.bar {
    width: 25px;
    height: 3px;
    background-color: #fff;
    margin: 3px 0;
}

.nav-list {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}

.nav-list li {
    margin: 0 15px;
}

.nav-list a {
    text-decoration: none;
    color: #110f0f;
    font-weight: bold;
}

@media only screen and (max-width: 768px) {
    .menu-toggle {
        display: flex;
    }

    .nav-list {
        display: none;
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: 70px;
        left: 0;
        background-color: #36a4ab;
    }

    .nav-list.show {
        display: flex;
    }

    .nav-list li {
        margin: 10px 0;
        text-align: center;
    }
}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Responsive Navbar with Dropdown</title>
</head>

<body>

    <div class="navbar">
        <div class="logo">
            <a href="#"><img src="bimlogo.png" width="200"></a>
        </div>
        <ul class="nav-links">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li class="dropdown">
                <a href="#" class="dropbtn">Resources</a>
                <div class="dropdown-content">
                    <a href="#">BIM Notes</a>
                    <a href="#">BIM Syllabus</a>
                    <a href="#">BimStudies</a>
                </div>
            </li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
</body>
</html>

CSS


    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
    }

    .navbar {
        background-color: #9da3b9;
        overflow: hidden;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap; /* Allow items to wrap to the next line */
    }

    .logo {
        margin-top: 20px;
        margin-left: 20px;
        text-align: left;
        width: 100%;
    }

    .nav-links {
        list-style-type: none;
        margin-bottom: 20px;
        padding: 0;
        overflow: hidden;
        width: 100%;
    }

    .nav-links li {
        display: flex;
        float: right;
        flex-direction: row;
        margin-right: 15px;
    }

    .nav-links a {
        color: white;
        text-decoration: none;
        font-size: 16px;
        padding: 14px 16px;
        display: flex;
    }

    .nav-links a:hover {
        background-color: #ddd;
        color: black;
    }

    /* Dropdown container */
    .dropdown {
        display: inline-block;
    }

    /* Dropdown button */
    .dropbtn {
        background-color: #333;
        color: white;
        padding: 14px 16px;
        font-size: 16px;
        border: none;
        cursor: pointer;
    }

    /* Dropdown content (hidden by default) */
    .dropdown-content {
        margin-top: 50px;
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
        z-index: 1;
    }

    /* Links inside the dropdown */
    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

    /* Change color on hover */
    .dropdown-content a:hover {
        background-color: #ddd;
    }

    /* Show the dropdown menu on hover */
    .dropdown:hover .dropdown-content {
        display: block;
    }

    /* Responsive styles */
    @media screen and (max-width: 600px) {
        .logo {
        margin-top: 20px;
        text-align: center;
        width: 100%;
    }

        .nav-links {
            display: flex;
            flex-direction: row;
            align-items: center;
            width: 100%;
            text-align: center;
        }

        .nav-links li {
            margin: 10px 0;
        }

        .dropdown {
            text-align: center;
            margin-bottom: 10px;
        }

        .dropdown-content {
            margin-top: 50px;
            position: fixed;
            display: none;
            text-align: center;
        }
    }

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="styles.css">
    <title>Responsive Menu | BimStudies.com</title>
</head>
<body>

<div class="navbar">
    <div class="logo">
        <a href="#"><img src="bimlogo.png" width="200"></a>
    </div>
    <ul class="nav-links">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

</body>
</html>

CSS


        body {
            margin: 0;
            font-family: Arial, sans-serif;
        }

        .navbar {
            background-color: #98db34;
            padding: 15px;
            text-align: center;
            color: white;
        }

        .nav-links {
            list-style-type: none;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
        }

        .nav-links li {
            margin: 0 15px;
        }

        .nav-links a {
            text-decoration: none;
            color: white;
            font-size: 18px;
            transition: color 0.3s ease-in-out;
        }

        .nav-links a:hover {
            color: #ecf0f1;
        }
    </style>

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
   <meta charset="utf-8">
   <title>Responsive Side bar | BimStudies.com</title>
   <link rel="stylesheet" href="style.css">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
   <script src="https://kit.fontawesome.com/b99e675b6e.js"></script>
  </head>

<body>

   <div class="wrapper">

      <div class="top_navbar">
         <div class="hamburger">
            <div class="one"></div>
            <div class="two"></div>
            <div class="three"></div>
         </div>
         <div class="top_menu">
            <div class="logo">
               <img src="bimlogo.png" width="150">
            </div>
            <ul>
               <li><a href="#">
                     <i class="fas fa-search"></i>
                  </a></li>
               <li><a href="#">
                     <i class="fas fa-bell"></i>
                  </a></li>
               <li><a href="#">
                     <i class="fas fa-user"></i>
                  </a></li>
            </ul>
         </div>
      </div>

      <div class="sidebar">
         <ul>
            <li><a href="#">
                  <span class="icon"><i class="fas fa-book"></i></span>
                  <span class="title">Notes</span>
               </a></li>
            <li><a href="#">
                  <span class="icon"><i class="fas fa-file-video"></i></span>
                  <span class="title">Tutorials</span>
               </a></li>
            <li><a href="#">
                  <span class="icon"><i class="fas fa-volleyball-ball"></i></span>
                  <span class="title">Games</span>
               </a></li>
            <li><a href="#">
                  <span class="icon"><i class="fas fa-blog"></i></span>
                  <span class="title">Blogs</span>
               </a></li>
            <li><a href="#">
                  <span class="icon"><i class="fas fa-leaf"></i></span>
                  <span class="title">Services</span>
               </a></li>
         </ul>
      </div>

      <div class="main_container">
         <div class="item">
            <b>BimStudies.Com</b> is an IT-Management educational website where you can discover the courses, notes and project.
         </div>
         <div class="item">
            <b>BimStudies.Com</b> is an IT-Management educational website where you can discover the courses, notes and project.
         </div>
         <div class="item">
            <b>BimStudies.Com</b> is an IT-Management educational website where you can discover the courses, notes and project.
         </div>
         <div class="item">
            <b>BimStudies.Com</b> is an IT-Management educational website where you can discover the courses, notes and project.
         </div>
      </div>
   </div>
   <script>
      $(".hamburger").click(function () {
         $(".wrapper").toggleClass("collapse");
      });
   </script>
</body>

</html>

CSS


      @import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700&display=swap');

      * {
         margin: 0;
         padding: 0;
         list-style: none;
         text-decoration: none;
         box-sizing: border-box;
         font-family: 'Montserrat', sans-serif;
      }

      body {
         background: #e1ecf2;
      }

      .wrapper {
         margin: 10px;
      }

      .wrapper .top_navbar {
         width: calc(100% - 20px);
         height: 60px;
         display: flex;
         position: fixed;
         top: 10px;
      }

      .wrapper .top_navbar .hamburger {
         width: 70px;
         height: 100%;
         background: #092b05;
         padding: 15px 17px;
         border-top-left-radius: 20px;
         cursor: pointer;
      }

      .wrapper .top_navbar .hamburger div {
         width: 35px;
         height: 4px;
         background: #92a6e2;
         margin: 5px 0;
         border-radius: 5px;
      }

      .wrapper .top_navbar .top_menu {
         width: calc(100% - 70px);
         height: 100%;
         background: #fff;
         border-top-right-radius: 20px;
         display: flex;
         justify-content: space-between;
         align-items: center;
         padding: 0 20px;
         box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
      }

      .wrapper .top_navbar .top_menu ul {
         display: flex;
      }

      .wrapper .top_navbar .top_menu ul li a {
         display: block;
         margin: 0 10px;
         width: 35px;
         height: 35px;
         line-height: 35px;
         text-align: center;
         border: 1px solid #2e4ead;
         border-radius: 50%;
         color: #2e4ead;
      }

      .wrapper .top_navbar .top_menu ul li a:hover {
         background: #4360b5;
         color: #fff;
      }

      .wrapper .top_navbar .top_menu ul li a:hover i {
         color: #fff;
      }

      .wrapper .sidebar {
         position: fixed;
         top: 70px;
         left: 10px;
         background: #042d33;
         width: 200px;
         height: calc(100% - 80px);
         border-bottom-left-radius: 20px;
         transition: all 0.3s ease;
      }

      .wrapper .sidebar ul li a {
         display: block;
         padding: 20px;
         color: #fff;
         position: relative;
         margin-bottom: 1px;
         color: #92a6e2;
         white-space: nowrap;
      }

      .wrapper .sidebar ul li a:before {
         content: "";
         position: absolute;
         top: 0;
         left: 0;
         width: 3px;
         height: 100%;
         background: #92a6e2;
         display: none;
      }

      .wrapper .sidebar ul li a span.icon {
         margin-right: 10px;
         display: inline-block;
      }

      .wrapper .sidebar ul li a span.title {
         display: inline-block;
      }

      .wrapper .sidebar ul li a:hover,
      .wrapper .sidebar ul li a.active {
         background: #4360b5;
         color: #fff;
      }

      .wrapper .sidebar ul li a:hover:before,
      .wrapper .sidebar ul li a.active:before {
         display: block;
      }

      .wrapper .main_container {
         width: (100% - 200px);
         margin-top: 70px;
         margin-left: 200px;
         padding: 15px;
         transition: all 0.3s ease;
      }

      .wrapper .main_container .item {
         background: #fff;
         margin-bottom: 10px;
         padding: 15px;
         font-size: 14px;
         line-height: 22px;
      }

      .wrapper.collapse .sidebar {
         width: 70px;
      }

      .wrapper.collapse .sidebar ul li a {
         text-align: center;
      }

      .wrapper.collapse .sidebar ul li a span.icon {
         margin: 0;
      }

      .wrapper.collapse .sidebar ul li a span.title {
         display: none;
      }

      .wrapper.collapse .main_container {
         width: (100% - 70px);
         margin-left: 70px;
      }

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
  
  <head>
    <title> Animated Navbar | BimStudies.com</title>
    <meta charset="utf-8">
  <meta name="author" content="anonymous">
  <meta name="generator" content="Sublime text3">
  <meta name="robot" content="index, follow">
  <meta http-equiv="refresh" content="">
  <meta name="description" content="This is navigation bar on html page">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="keyowrds" content="html, navigation bar, navigation, bar, javascript, content">
  </head>
  
  <body>
    
    <div class="html-container">
      <div class="html-section">
        <div class="html-project">
          <div class="navigation">
            <nav>
              <ul class="nav-type">
                <li><a href="#" target="_blank" class="active">Home</a></li>
                <li><a href=#" target="_blank" class="active1">About</a></li>
                <li><a href="#" target="_blank" class="active2">Contact</a></li>
                <li><a href="#" target="_blank" class="active3">Support</a></li>
                <div class="line"></div>
                <li><a><i class="fa fa-search" onclick="show()">
                  </i></a></li>
              </ul>
            </nav>
          </div>
        </div>
      </div>
      <noscript>
      <div class="first-line">
        <div class="linear">
          <div class="line-w5">
            
          </div>
        </div>
      </div>
      </noscript>
<template>
      <div class="flash-fluid">
        <div class="flash-time">
          <div class="flash-GIF">
            
          </div>
        </div>
       </div>
</template>
<noscript>     
      <div class="cyrcle-center">
        <div class="radial-cyrcle">
          
        </div>
      </div>
</noscript>
    </div>
<template>   
    <div class="text-class">
      <div class="text-container">
        <div class="text-content-fluid" id="chinese-text" data-text-type="chinese">
          <div class="chinese-text">設</div>
          <div class="chinese-text2">計</div>
          <div class="chinese-text3">和</div>
          <div class="chinese-text4">開</div>
          <div class="chinese-text5">發</div>
        </div>
      </div>
    </div>
</template>  
    
    <div class="dropdown" id="anotherFunction">
     <div class="drop1">HTML</div>
      <div class="drop2">CSS</div>
      <div class="drop3">Javascript</div>
      <div class="drop4">Sass</div>
    </div>

    <script>
      function myData() {
  return;
}

function show() {
  document.getElementById('anotherFunction').classList.toggle('Active');
}
    </script>

  </body>
  
</html>

CSS


   @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');
* {
  box-sizing: border-box;
  margin: 0;
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 1;
  overflow: hidden;
  background: #fff;
  transition: 3s;

}

ul {
  list-style-type: none;
  display: flex;
  padding: 18px 0;
  background-size: 400% 400%;
  background-image: linear-gradient(-45deg, #20b6bd, #179e3f, #2d5bc0, #97b119,#d74177);
  animation: 12s myGradient infinite;
  border-radius: 40px;
  box-shadow: 3px 3px 20px #ff3352;
  border-top-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

@keyframes myGradient {
  0% {
    background-position: 0% 50%;
  }
  
  50%{
    background-position: 100% 50%;
  }
  
  100% {
    background-position: 0% 50%;
  }
}

.fa-search{
  transition: 1s;
  cursor: pointer;
  margin-left: 30px;
}

.active {
  transition: 1s;
}

.active1{
  transition: 1s;
}

.active2 {
  transition: 1s;
}

.active3 {
  transition: 1s;
}

li a {
  color: #fff;
  text-decoration: none;
  padding: 45px 45px;
  font-family: verdana;
  font-weight: lighter;
  font-size: 24px;
  letter-spacing: 1px;
  opacity: 0.9;
}

.navigation {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}

.fa-search:hover {
  color: #fff;
  animation: 1.5s myFlash linear infinite;
  text-shadow: 2px 2px 30px #fff;
  transition: 2s;
}

.active3:hover {
  color: #fff;
  animation: 1.5s myFlash linear infinite;
  text-shadow: 2px 2px 30px #fff;
  transition: 2s;
  margin-top: -100px;
}

.active2:hover {
  color: #fff;
  animation: 1.5s myFlash linear infinite;
  text-shadow: 2px 2px 30px #fff;
  transition: 2s;
}

.active1:hover {
  color: #fff;
  animation: 1.5s myFlash linear infinite;
  text-shadow: 2px 2px 30px #fff;
  transition: 2s;
}

.active:hover {
  color: #fff;
  animation: 1.5s myFlash linear infinite;
  text-shadow: 2px 2px 30px #fff;
  transition: 2s;
}

@keyframes myFlash {
  0% {
    opacity: 1;
    text-shadow: transparent;
  }
  
  50% {
    opacity: .1;
  }
  
  100% {
    opacity: 1;
    text-shadow: 2px 2px 20px #fff;
  }
}

.line-w5 {
  width: 5px;
  height: 200px;
  background: tomato;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 70%;
  border-radius: 30px;
  background-image: linear-gradient(-45deg, #ff408c, #ff4040, #6666ff);
  background-size: 400% 400%;
  animation: 13s myBackground infinite;
  box-shadow: 2px 2px 10px #ff2e38;
  transition: 3s;
}

@keyframes myBackground {
  0% {
    background-position: 0% 50%;
    opacity: 0%;
  }
  
  50% {
    background-position: 100% 50%;
  }
  
  100% {
    background-position: 0% 50%;
    opacity: 1;
  }
}


@keyframes myLinear {
  0%{
    width: 50px;
  }
  
  100% {
    width: 250px;
  }
}

.flash-GIF {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #ff5959;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 15%;
  left: 10%;
  box-shadow: 2px 2px 20px #d4267d;
  animation: 1.6s myFlash linear infinite;
}

@keyframes myFlash{
  0% {
    opacity: 1;
  }
  
  50%{
    opacity: .1;
  }
  
  100% {
    opacity: 1;
  }
}

nav {
  transition: 3s;
  animation: 3s myAnimation ease linear;
}

@keyframes myAnimation {
  0% {
    opacity: 0;
  }
  
  100% {
    opacity: 1;
  }
}

.nav-type {
  animation: 3s myWorld ease linear;
}

@keyframes myWorld {
  0% {
    opacity: 0;
  }
  
  100% {
    opacity: 1;
  }
}

@media(max-width: 767px) {
  .flash-GIF {
    display: none;
  }
  
  .line-w5 {
    display: none;
  }
  
  .navigation {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
  }
  
  .text-content-fluid {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 65%;
    left: 50%;
  }
  
  ul {
    padding: 15px 0;
  }
  
  
  li a {
    padding: 34px 34px;
    font-size: 23px;
    font-weight: lighter;
  }
  
  .radial-cyrcle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: tomato;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 70%;
    left: 50%;
    box-shadow: 2px 2px 20px #ff3352;
    background-image: linear-gradient(to top, #ff2657, #ff3333, #ff5900);
  }
}

.dropdown  a{
  display: block;
  color: #fff;
  text-decoration: none;
  background: tomato;
  width: 100px;
  text-align: center;
  font-family: verdana;
  line-height: 30px;
  display: none;

}


.text-content-fluid {
  display: flex;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 53%;
  left: 50%;
  letter-spacing: 25px;
  font-size: 50px;
  font-family: verdana;
}

.chinese-text {
  color: #ed4278;
  text-shadow: 2px 2px 18px #ff3678;
}

.chinese-text2 {
  color: #ff3345;
  text-shadow: 2px 2px 18px #d10045;
}

.chinese-text3 {
  color: #d1387d;
  text-shadow: 2px 2px 18px #ff6e6e;
}

.chinese-text4 {
  color: #ff7d82;
  text-shadow: 2px 2px 18px #ff4d00;
  
}

.chinese-text5 {
  color: #f50070;
  text-shadow: 2px 2px 18px #fa9ecc;
}

@media(max-width: 767px) {
  .text-content-fluid {
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 60%;
  }
}

.line {
  height: 40px;
  width: 2px;
  background: #fff;
  margin: 0;
  position: absolute;
  left: 88%;
  top: 25%;
}

/*Ideal screen pixel 1317px*/

.dropdown {
  background: red;
  width: 150px;
  height: 350px;
  color: #fff;
  font-family: verdana;
  padding: 20px 30px;
  height: 200px;
  border-radius: 5px;
  line-height: 50px;
  text-align: center;
  font-weight: bold;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 71%;
  left: 69.2%;
  transition: 2s;
  margin-top: 400px;
  background-size: 400% 400%;
  background-image: linear-gradient(-45deg, #ff0d0d, #ff0d6e, #ff3d0d, #ffff00);
  animation: myLineargradient 6s infinite;
  box-shadow: 2px 3px 20px #ff1700;
}

@keyframes myLineargradient {
  0% {
    background-position: 0% 50%;
    box-shadow: 2px 3px 20px #ff1700;
  }
  
  50% {
    background-position: 100% 50%;
     box-shadow: none;
  }
  
  100% {
    background-position: 0% 50%;
     box-shadow: 2px 3px 20px #ff1700;
  }
}

/*top: 71%*/

.drop1 {
  cursor: pointer;
  text-shadow: 1px 2px 18px #fff;
  transition: 2s;
  margin-top: -5px;
}

.drop2 {
  cursor: pointer;
  text-shadow: 1px 2px 18px #fff;
  transition: 2s;
  margin-top: -5px;
}

.drop3 {
  cursor: pointer;
  text-shadow: 1px 2px 18px #fff;
  transition: 2s;
  margin-top: -5px;
}

.drop4 {
  cursor: pointer;
  text-shadow: 1px 2px 18px #fff;
  transition: 2s;
  margin-top: -5px;
}

.Active {
  transition: 2s;
  margin-top: 1px;
}

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title>Animated Menu button | BimStudies.com</title>
      <link rel="stylesheet" href="style.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
      <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
      
   </head>
   <body>
      <div class="menu">
         <div class="button">
            Menu
            <span class="fas fa-bars"></span>
         </div>
         <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">BimStudies</a></li>
            <li><a href="#">Notes</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Services</a></li>
         </ul>
      </div>
      <script>
         $(document).ready(function(){
           $('.button').click(function(){
             if($(this).hasClass('expand')){
               $('ul').slideUp(function(){
                 $('.button').removeClass('expand');
                 $('.fas').removeClass('expand')
               });
             }else{
               $(this).addClass('expand');
               setTimeout(function(){
                 $('.fas').addClass('expand');
                 $('ul').stop().slideDown();
               },200);
             }
           });
         });
      </script>
   </body>
</html>

CSS


         * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Open Sans", sans-serif;
         }

         body {
            background-color: #f4f4f4;
         }

         .menu {
            position: absolute;
            top: 20%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 300px;
            display: flex;
            align-items: center;
            justify-content: center;
         }

         .button {
            position: relative;
            background: #3498db;
            color: white;
            font-size: 20px;
            padding: 8px 20px;
            width: 150px;
            line-height: 30px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-radius: 25px;
            cursor: pointer;
            transition: width .4s;
         }

         .button.expand {
            width: 100%;
         }

         .fas.expand:before {
            content: '\f00d';
         }

         ul {
            list-style: none;
            position: absolute;
            top: 65px;
            display: block;
            background: #3498db;
            width: 100%;
            text-align: center;
            border-radius: 5px;
            display: none;
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
         }

         ul:before {
            position: absolute;
            content: '';
            width: 20px;
            height: 20px;
            background: #3498db;
            top: -10px;
            right: 15px;
            transform: rotate(45deg);
            z-index: -1;
         }

         ul li {
            line-height: 35px;
            padding: 8px 20px;
            cursor: pointer;
            border: 1px solid transparent;
            border-bottom: 1px solid rgba(255, 255, 255, .1);
         }

         ul li:last-child {
            border-bottom: none;
         }

         ul li:hover {
            box-shadow: inset 0 0 5px #33ffff, inset 0 0 10px #66ffff;
         }

         ul li:hover:first-child {
            border-radius: 5px 5px 0 0;
         }

         ul li:hover:last-child {
            border-radius: 0 0 5px 5px;
         }

         ul li a {
            color: white;
            font-size: 18px;
            text-decoration: none;
         }

         ul li:hover a {
            color: #ecf0f1;
         }

Thank you for reading this post, don't forget to subscribe!

Navbar Designs

Beginners Projects

How can we help?