To most webmasters, the term CSS horizontal drop down menu is self explanatory. But, for those whom are a bit less experienced, it is simply a horizontal drop down menu

Responsive dropdown menu with logo

To most webmasters, the term CSS horizontal drop down menu is self explanatory. But, for those whom are a bit less experienced, it is simply a horizontal drop down menu created by way of SCSS code, rather than hard-coding it into html, or using a scripting language, such as JavaScript. The drop down menu part refers to the way a sub-menu item “drops down” from its parent menu item. In tutorial you are able how to create submenu

HTML

<nav class="navbar">
  <div class="logo"><img src="http://viewtechindia.com/wp-content/uploads/2019/10/final-logo.png" alt="LOGO"></div>
  <div class="push-left">
    <button id="menu-toggler" data-class="menu-active" class="hamburger">
      <span class="hamburger-line hamburger-line-top"></span>
      <span class="hamburger-line hamburger-line-middle"></span>
      <span class="hamburger-line hamburger-line-bottom"></span>
    </button>    
    <ul id="primary-menu" class="menu nav-menu">
      <li class="menu-item current-menu-item"><a class="nav__link"  href="#">Home</a></li>
      <li class="menu-item dropdown"><a class="nav__link"  href="#">About</a>
         <ul class="sub-nav" >
          <li><a class="sub-nav__link" href="#">link 1</a></li>
          <li><a class="sub-nav__link" href="#">link 2</a></li>
          <li><a class="sub-nav__link" href="#">link 3 - long link - long link - long link</a></li>
        </ul>
      </li>
      <li class="menu-item dropdown"><a class="nav__link"  href="#">Contact</a>
        <ul class = "sub-nav">
          <li><a class="sub-nav__link"  href="#">link 1</a></li>
          <li><a class="sub-nav__link"  href="#">link 2</a></li>
          <li><a class="sub-nav__link"  href="#">link 3 - long link - long link - long link</a></li>
        </ul>
      </li>
      <li class="menu-item "><a class="nav__link"  href="#">Blog</a>       
      </li>
    </ul>
</div>
</nav>

SCSS

$primary: #fff;
$secondary: #ccc;
$ternary: #272727;
$dark: #444444;
body {
  background: linear-gradient(90deg, rgba(18,40,182,1) 3%, rgba(0,212,255,1) 100%);
  color: $ternary;
  font-size: 14px;
  margin: 0;
}
.logo {
  max-width: 200px;
}
.navbar {
  align-items: center;
  background: $primary;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: row;
  font-family: sans-serif;
  padding: 10px 50px;
}
.push-left {
  margin-left: auto;
}
.hamburger {
  background: transparent;
  border: none;
  cursor: pointer;
  display: none;
  outline: none;
  height: 30px;
  position: relative;
  width: 30px;
  z-index: 1000;
  @media screen and (max-width: 768px) {
    display: inline-block;
  }
  &-line {
    background: $ternary;
    height: 3px;
    position: absolute;
    left: 0;
    transition: all 0.2s ease-out;
    width: 100%;
    .hamburger:hover & {
      background: #777;
    }
    &-top {
      top: 3px;
    }
    .menu-active &-top {
      top: 50%;
      transform: rotate(45deg) translatey(-50%);
    }
    &-middle {
      top: 50%;
      transform: translatey(-50%);
    }
    .menu-active &-middle {
      left: 50%;
      opacity: 0;
      width: 0;
    }
    &-bottom {
      bottom: 3px;
    }
    .menu-active &-bottom {
      bottom: 50%;
      transform: rotate(-45deg) translatey(50%);
    }
  }
}
.nav-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  transition: all 0.25s ease-in;
  @media screen and (max-width: 768px) {
    background: $primary;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translatey(-100%);
    text-align: center;
    .menu-active & {
      transform: translatey(0%);
      opacity: 1;
    }
  }
  .menu-item a {
    color: $dark;
    display: block;
    line-height: 30px;
    margin: 0px 10px;
    text-decoration: none;
    text-transform: uppercase;
    &:hover {
      color: lighten($dark, 20);
      text-decoration: underline;
    }
    @media screen and (max-width: 768px) {
      font-size: 20px;
      margin: 8px;
    }
  }
}
.sub-nav {
  border: 1px solid #ccc;
  display: none;
  position: absolute;
  background-color: $primary;
  padding: 5px 5px;
  list-style: none;
  width: 230px;
  @media screen and (max-width: 768px) {
    position: relative;
    width: 100%;
    display: none;
    background-color: rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
  }
}
.nav__link {
  &:hover + .sub-nav {
    display: block;
  }
}
.sub-nav {
  &:hover {
    display: block;
  }
}

JavaScript

$(document).ready(function() {
// Toggle menu on click
$("#menu-toggler").click(function() {
toggleBodyClass("menu-active");
});

function toggleBodyClass(className) {
document.body.classList.toggle(className);
}});

Responsive

admin

We are the next generation digital experience agency. We are a bunch of techie cowboys from Delhi with one foot in the west bangal culture. We like to tell stories with sketches & pixels and could do the same for you. We invest our time to understand your need only because we know how to build it in the best way.

It is not a website that we build. We create an online persona for you where anyone can get in touch with you over the internet. We don’t just create a design. We present you to the world. We design with motive and sense, and we have fun along the way. Because, we really believe that you can’t make something awesome without being in love with it.

Leave a Reply

Your email address will not be published. Required fields are marked *