Android,iOS,Gadgets,Reviews Everything About Technology

- Advertisement -

How to create a side drop-down menu using CSS and jQuery

76

In this lesson, we’ll show you how to create a side-dropdown menu for even easier site navigation. Such a menu is a popular trend in modern web design. Many sites use this type of menu. With it, you can get rid of the chaos on the pages of the project, make it more readable, focusing users’ attention on the main content.

This is a great way to achieve minimalism without distractions. Today we will create such a menu ourselves.

- Advertisement -

Demo | Download

To create a navigation menu, let’s first take a look at the settings:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Animation Menu Demo</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css">
    <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
    <script src="script.js"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- Content goes here -->
</body>
</html>

First you need to load Normalize.css and configure the default browser styles, make sure that the menu looks the same in all browsers. To display the arrow in front of the menu items with sub-items, we will use FontAwesome . To switch the classes in the menu, load jQuery and move the entire custom jQuery code to script.js. The last link is the main table for the web project.

Hamburger icon

The hamburger icon is a common attribute of site navigation. Often it is created using an iconic font such as FontAwesome, but in this lesson we’ll add some animation, so we’ll create it from scratch. Our hamburger icon is a span tag containing three div classes, displayed as horizontal bars.

<span class="toggle-button">
     <div class="menu-bar menu-bar-top"></div>
     <div class="menu-bar menu-bar-middle"></div>
     <div class="menu-bar menu-bar-bottom"></div>
</span>

Styles look like this:

.toggle-button {
  position: fixed;
  width: 44px;
  height: 40px;
  padding: 4px;
  transition: .25s;
  z-index: 15;
}
.toggle-button:hover {
  cursor: pointer;
}
.toggle-button .menu-bar {
  position: absolute;
  border-radius: 2px;
  width: 80%;
  transition: .5s;
}
.toggle-button .menu-bar-top {
  border: 4px solid #555;
  border-bottom: none;
  top: 0;
}
.toggle-button .menu-bar-middle {
  height: 4px;
  background-color: #555;
  margin-top: 7px;
  margin-bottom: 7px;
  top: 4px;
}
.toggle-button .menu-bar-bottom {
  border: 4px solid #555;
  border-top: none;
  top: 22px;
}
.button-open .menu-bar-top {
  transform: rotate(45deg) translate(8px, 8px);
  transition: .5s;
}
.button-open .menu-bar-middle {
  transform: translate(230px);
  transition: .1s ease-in;
  opacity: 0;
}
.button-open .menu-bar-bottom {
  transform: rotate(-45deg) translate(8px, -7px);
  transition: .5s;
}

The icon has a fixed position and does not change it when scrolling the page. Also has z-index 15, which means that it will always be on top of other elements. It consists of three bars, each of which shares other styles. Therefore, we will move each bar to the .menu-bar class. We move the remaining styles into separate classes. Magic happens when we add another class to the span tag, which is open. We add it using jQuery as follows:

$(document).ready(function() {
  var $toggleButton = $('.toggle-button');
  $toggleButton.on('click', function() {
    $(this).toggleClass('button-open');
  });
});

For those who are not familiar with jQuery, we initialize the variable with $ toggleButton, which contains our icon. We save it in a variable without the need to use JavaScript. Then we create an event listener that takes into account the clicks on the icon. Each time the user clicks the hamburger icon, the event listener launches the toggleClass () function , which switches the .button-open class.

When the .button-open class is added, we can use it to change the way elements are displayed. We use the CSS3 translate () and rotate () functions to make the top and bottom bands rotate 45 degrees, and the middle bar shifts to the right and disappears. Here’s what animation can be configured:

Navigation drop-down menu

- Advertisement -

Now that you have a hamburger icon, let’s make it useful and create a drop-down menu when you click on it. Here’s how the menu layout looks:

<div class="menu-wrap">
    <div class="menu-sidebar">
        <ul class="menu">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Blog</a></li>
            <li class="menu-item-has-children"><a href="#">Click The Arrow</a>
                <span class="sidebar-menu-arrow"></span>
                <ul class="sub-menu">
                    <li><a href="#">Alignment</a></li>
                    <li><a href="#">Markup</a></li>
                    <li><a href="#">Comments</a></li>
                </ul>
            </li>
            <li><a href="#">Courses</a></li>
            <li><a href="#">Get In Touch</a></li>
        </ul>           
    </div>
</div>

Now we will not dwell on each style for this menu, instead we will focus on several important points. First of all, it’s a div and a .menu-wrap class. Look at his styles:

.menu-wrap {
    background-color: #6968AB;
    position: fixed;
    top: 0;
    height: 100%;
    width: 280px;
    margin-left: -280px;
    font-size: 1em;
    font-weight: 700;
    overflow: auto;
    transition: .25s;
    z-index: 10;
}

The position is fixed, so when the page is scrolled, the menu always remains in one position. A height of 100% allows the menu to occupy all vertical space on the page. Note that the margin-left field has a negative number equal to the width of the menu. This means that the menu will disappear from the preview window. To make it visible again, we create another toggler class with jQuery. Our JavaScript file will look like this:

$(document).ready(function() {
    var $toggleButton = $('.toggle-button'),
        $menuWrap = $('.menu-wrap');
    $toggleButton.on('click', function() {
        $(this).toggleClass('button-open');
        $menuWrap.toggleClass('menu-show');
    });
});

We add another variable $ menuWrap, which contains the menu shell. Use the same event handler that we created earlier. Only this time we switch two classes: one for the button and one for the menu shell. The value of the left margin of the .menu-show class is 0, this adds a shadow effect.

.menu-show {
    margin-left: 0;
    box-shadow: 4px 2px 15px 1px #B9ADAD;
}

Submenu and links

You may notice that one of the items in the list has a .menu-item-has-children class that contains a submenu. In addition, immediately under the link is placed a span tag with the class .sidebar-menu-arrow.

<li class="menu-item-has-children"><a href="#">Click The Arrow</a>
<span class="sidebar-menu-arrow"></span>
    <ul class="sub-menu">
    <!-- List items -->
    </ul>
</li>

span has :: after pseudo-element and contains the arrow FontAwesome. By default, the submenu is hidden and will be visible only when the arrow is pressed. Here’s how we can do this with jQuery:

$(document).ready(function() {
    var $sidebarArrow = $('.sidebar-menu-arrow');
    $sidebarArrow.click(function() {
        $(this).next().slideToggle(300);
    });
});

When we click on the arrow, we call a function, which in turn targets the next element immediately after the span (in our case this is a submenu) and makes it visible. The function we use is slideToggle . It causes the element to appear and disappear. The function in our example has one parameter – the duration of the animation.

The menu items in the example have a hover effect. It is created using :: after pseudo-element. The code looks like this:

.menu-sidebar li > a::after {
    content: "";
    display: block;
    height: 0.15em;
    position: absolute;
    top: 100%;
    width: 102%;
    left: 50%;
    transform: translate(-50%);
    background-image: linear-gradient(to right, transparent 50.3%, #FFFA3B 50.3%);
    transition: background-position .2s .1s ease-out;
    background-size: 200% auto;
}
.menu-sidebar li > a:hover::after {
    background-position: -100% 0;
}

::afterpseudo-element contains a block level element at the bottom of each link with a full width and height of 0.15em. It looks like an underline. The peculiarity is that we do not just apply the background color to the line, we use the linear-gradient () function on the background image. Although this function is designed to create color gradients, we can change the color by specifying the desired percentages.

.menu-sidebar li > a::after {
  background-image: linear-gradient(to right, transparent 50.3%, #FFFA3B 50.3%);
}

Half the line here is transparent, and the second half is yellow. Making the background size 200%, we double the width of our block. Now the transparent part takes up the entire width of the link, and the yellow part moves to the left and becomes invisible. We change the background position when hovering by -100%. Now the yellow part becomes visible, and the transparent part is hidden.

Instead of a transparent part, you can use any other color. You can also experiment with gradients.

Demo | Download

Each of the elements considered by us works as a single whole. You can create such a menu using any site design from the TemplateMonster collection. As you can see, it’s easier to do than you can imagine. Good luck in creating professional and user-friendly sites!

- Advertisement -

Comments