How To Prevent Pasting Into Input Fields

In this tutorial, we are going to show you how you can prevent users from being able to copy and paste input values into certain fields. This can be especially useful when you have repeating fields for verification. For example, you may want to prevent users from copying the password into the repeat password input field, or you may want to do the same thing if you wish to include a repeat email address field. This is useful as it ensures the password the user is entering is correct, and it also ensures users receive email from your website. Let’s say you input the incorrect email address and then you copy this to the repeat email box, the user could end up not receiving the two-step certification email and in turn, this could lead to customers no longer using your website. You don’t want this to happen so sometimes this can be really effective to have in place.

So, how is this functionality achieved? How can we stop your users from pasting content into an HTML input field?

Well, we can use JavaScript to target an input field’s paste event and change how it works like so:


<input type="text" id="no-paste" />

<script>
if ( $('#no-paste').length > 0 ) {  
  const pasteBox = document.getElementById('no-paste');
  pasteBox.onpaste = e => {
    e.preventDefault();
    return false;
  };
}
</script>

What this code does is cancels the default behaviour of the paste event (i.e. pasting the contents of the clipboard into the input element). When the user tries to paste the content into the field, using either a keyboard shortcut or context menu, nothing will happen. We also wrapped this with if ( $('#no-paste').length > 0 ) {   }, so that the script will only running on pages where it contains the #no-paste element, otherwise you will get an error.

If you want to check out a working CodePen of this in action, you can do so here.

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well of many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How to Create A Simple Looping Background Colour Animation With CSS

In this tutorial, we are going to create a simple animated background colour animation which loops with pure CSS using keyframes along with various CSS animation properties.

In our example, we are going to set this to the body element. However, you can apply the code to any HTML element of your choice either with an id or class. You can check out the CodePen here if you prefer.

Before we begin, let’s understand the looping animation and how we want the end result to appear:

  • How many background colours do we want to use?
  • How long should total animation duration last?
  • What type of animation type should we use?

In this tutorial, we are going to keep things simple and use:

  • Five different background colours
  • A duration of ten seconds (each color gets displayed two seconds)
  • A linear animation curve (the animation has the same speed from start to end)

We used Coolers.co to generate a nice colour palette for our example:

If you want to use the same colour palette then visit this link.

These are the hex colours for the background animation we used in our example:

  • Sunset Orange: #EE6055;
  • Medium Aquamarine: #60D394;
  • Pale Green: #AAF683;
  • Mellow Yellow: #FFD97D;
  • Vivid Tangerine: #FF9B85;

Right, so lets now dig into it!

How to Create the looping CSS animation

The CSS animations keyframes work in percentages from 0% to 100%. So let’s start by adding the following CSS code:


@keyframes backgroundColorPalette {
  0% {
    background: #ee6055;
  }
  25% {
    background: #60d394;
  }
  50% {
    background: #aaf683;
  }
  75% {
    background: #ffd97d;
  }
  100% {
    background: #ff9b85;
  }
}

We have now created the keyframe property called backgroundColorPalette with five separate intervals; these have been dividing evenly between 0% and 100%.

With this part done, now we can create the CSS rules to animate the body and put our backgroundColorPalette keyframes to action.

Now, let’s add the following CSS animation properties inside your body selector:


body {
  animation-name: backgroundColorPalette;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
}

If you’ve done everything correctly, you will now have a background colour animating evenly between five different colours with a linear animation. Pretty cool aye?

So how does the CSS work exactly?

  • First of all, we added the animation-name property and set the value to backgroundColorPalette. Now the background colour keyframes we previously created were then assigned to the body element.
  • We used the animation-duration property and gave it a value of 10s – This sets the total duration time to ten seconds to process the keyframes we defined.
  • We used the animation-iteration-count property and set the value to infinite. This is so the animation can run in a constant loop and run indefinately.
  • We used the animation-direction property and give it a value of alternate. What this does is it makes the animation play from beginning to end, and from the end to the beginning. We use this property value to avoid an not so attractive jump which happens if you use the normal animation direction value.

And there you have it, liked our tutorial? Then drop us a comment below. If you need any help or further explanation then get in touch!

Live Example

So we decided to create this animation below so you could see how it looks like. We added this HTML; <div id="background-transition"><h3>ANIMATED BACKGROUND</h3></div> then simply replaced body with the ID of the DIV element which in our example is; #background-transition

ANIMATED BACKGROUND

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well of many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How To Create A Modern Scroll Down Animation Icon With CSS

In this tutorial, we are going to show you how to create a modern scroll down animation which you can easily add to any website.

These types of animations are typically used on websites that have a full-screen header in which you add an animated element to demonstrate that there is more content on the website if you scroll down.

You can have a look at how this animation works on this CodePen we created.

In a previous article, we created a different type of animation, if you want to check that one out then click here.

So let’s begin with this tutorial; for this we just need to add the following HTML and CSS code:


<div id="scroll-wrapper">
  <div id="scroll-wrapper-inner">
    <div id="scroll-title">Scroll</div>
    <div id="scroll-down"></div>
  </div>
</div>

body {
  background: #20232c;
}

#scroll-wrapper {
    position: absolute;
    display: table;
    width: 100%;
    height: 100%;
    z-index: 9;
    pointer-events: none;
    left: -30%;
}

#scroll-wrapper-inner {
    display: table-cell;
    vertical-align: bottom;
    width: 100%;
    height: 100%;
}

#scroll-down {
    display: block;
    position: relative;
    padding-top: 79px;
    text-align: center;
}

#scroll-title {
    display: block;
    text-transform: uppercase;
    color: #FFF;
    font-family: "Courier-Prime", sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.4em;
    text-align: center;
    transform: rotate(90deg);
    margin-bottom: 45px;
}
#scroll-down::before {
    -webkit-animation: elasticus 2.9s cubic-bezier(1, 0, 0, 1) infinite;
    -moz-animation: elasticus 2.9s cubic-bezier(1, 0, 0, 1) infinite;
    -o-animation: elasticus 2.9s cubic-bezier(1, 0, 0, 1) infinite;
    animation: elasticus 2.9s cubic-bezier(1, 0, 0, 1) infinite;
    position: absolute;
    top: 0px;
    left: 50%;
    margin-left: -1px;
    width: 2px;
    height: 90px;
    background: #FFF;
    content: ' ';
}
@-webkit-keyframes elasticus {
    0% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
    50% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    50.1% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    100% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
}
@-moz-keyframes elasticus {
    0% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
    50% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    50.1% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    100% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
}
@-o-keyframes elasticus {
    0% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
    50% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    50.1% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    100% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
}
@keyframes elasticus {
    0% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
    50% {
        -webkit-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    50.1% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    100% {
        -webkit-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transform: scale(1, 0);
        -ms-transform: scale(1, 0);
        -moz-transform: scale(1, 0);
        -o-transform: scale(1, 0);
        transform: scale(1, 0);
    }
}

And it’s as simple as that!

With this example, we are centring the scroll down animation. If you want to quickly move the position of this we can add left positioning to the #scroll-wrapper element with either a negative or positive percentage value (depending on where you want this displaying).

We hope you enjoyed this tutorial if you need any help implementing; drop us a comment below!

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well of many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

CSS – Indenting the second line of LI (List Items)

Have you ever wanted to indent the second line of a list item instead of it appearing directly beneath the bullet point? This is probably why you are here and below is probably the result you are looking for:

Today we are going to show you an easy way to do this.

The reason this is happening is that the tick is inline content so when the text wraps it will continue to flow as usual.

You can stop this behaviour by taking advantage of text-indent:

The text-indent property specifies how much horizontal space should be left before the beginning of the first line of the text content of an element.

By supplying a negative text-indent you can tell the first line to shift a desired amount to the left. If you then specify a positive padding-left you can cancel this offset out.

In the following example a value of 20px:-


ul {  
    list-style: none; 
    width: 200px; 
    text-indent: -20px; /* key property */
    margin-left: 20px; /* key property */
    
}
li { margin-bottom: 10px; }

And there you have it, here is a CodePen of the above in action.

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well of many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How to Change Breakpoints with Bootstrap

What is Breakpoint?

Though the Bootstrap is a complete framework and packaged with JavaScript components too but achieving effortless responsive behaviour is the major key point we can grant Bootstrap for. Responsive behaviour depends on resolutions (viewport or screen sizes).

By default, Bootstrap supports four resolutions – called Breakpoints in technical term.

< 768px Extra small devices Phones
≥ 768px Small devices Tablets
≥ 992px Medium devices Desktops
≥ 1200px Large devices Desktops

we had integrated Bootstrap Navbar for our primary navigation in a project and as you may be aware that Navbar starts collapsing with < 768px. However, when you have a project with 6 - 7+ navbar items to show, you will notice the navbar drops to a new line and it's not really feasible making the navbar look tidy on one line. So basically we needed to change the breakpoint from 768px to 992px. There are 3 ways you can change media queries breakpoints with Bootstrap:-

  • Customize Bootstrap before downloading
  • Change in CSS
  • Create a new Breakpoint

Customize Bootstrap before downloading

Bootstrap lets us change some of the preferences before downloading a ZIP. If you got the project requirement then you should select this option. Because here, you would have the freedom to change breakpoints before start working on a project. So you can plan well in advance.

Change in CSS

If you need to change the behavior of the specific component (e.g. the navbar), you can overwrite or change the breakpoint with CSS:-


@media (max-width: 992px) {
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

Create a new Breakpoint

This option requires a bit of extra work but if the above two are not the solution in your case, you need to create a new breakpoint. Below are some steps:-

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well of many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How To Create A Scroll Down Animation Icon Using CSS with SVG

So you have seen on websites that typically have a full-screen header with an indicator to scroll down to view the rest/more of the content. We’re going to show a very nice and clean way to represent this feature. In today’s tutorial, we have a scroll down icon created as an SVG using just HTML & CSS and it looks pretty awesome if we do say so ourselves.

Here is a CodePen of what we are going to be creating.

So let’s being:-

HTML


<div class="scrolldown-wrapper">
	<div class="scrolldown">
		<svg height="30" width="10">
			<circle class="scrolldown-p1" cx="5" cy="15" r="2" />
			<circle class="scrolldown-p2" cx="5" cy="15" r="2" />
		</svg>
	</div>
</div>

CSS


body {
  background: #000;
}

/* Scroll Down */

.scrolldown-wrapper {
	left: 50%;
	position: absolute;
	text-align: center;
	bottom: 0;
	transform: translate(-50%, -50%);
}
  
.scrolldown {
	border: 2px solid #FFFFFF;
	border-radius: 30px;
	height: 46px;
	margin: 0 auto 8px;
	text-align: center;
	width: 30px;
}

.scrolldown-p1,
.scrolldown-p2 {
	animation-duration: 1.5s;
	animation-name: scrolldown;
	animation-iteration-count: infinite;
	fill: #FFFFFF;
}
  
.scrolldown-p2 {
	animation-delay: .75s;
}

@keyframes scrolldown {
	0% {
		opacity: 0;
		transform: translate(0, -8px);
	}
	50% {
		opacity: 1;
		transform: translate(0, 0);
	}
	100% {
		opacity: 0;
		transform: translate(0, 8px);
	}
}

If you want to adjust the positioning of the icon, simply edit the .scrolldown-wrapper class and adjust the bottom position (e.g. changing bottom: 10%; will move the icon 10% of the viewport height from the bottom).

You can also adjust the speed of the animation by adjusting either .scrolldown-p1 or .scrolldown-p2 classes.

Pretty simple and lightweight right?

Any questions feel free to drop us a comment.

We hope you’ve enjoyed today’s tutorial.

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well of many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How to get the selected file name from an input type file using jQuery

Today we will show you how to get the selected file name from an input type file using jQuery. On a recent job, we were using a form where a user could add up to 3 images to upload to a contact form on CF7. We styled this to look as follows:-

So how do we get the filename on a selection of a file? The answer is jQuery’s change() method.

You can use the jQuery’s change() method to get the file name selected by the HTML form control <input type="file" />. Let’s check out an example to understand how it works:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get Selected File Name</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
    $(document).ready(function(){
        $('input[type="file"]').change(function(e){
            var fileName = e.target.files[0].name;
            alert('The file "' + fileName +  '" has been selected.');
        });
    });
</script>
</head>
<body>
    <form>
        <input type="file">
        <p><strong>Note:</strong> Choose any file on your computer and its name will be displayed in an alert dialog box.</p>
    </form>
</body>
</html>

In our case scenario, we wanted to display the filename inside the file box, in which case we added the following to the HTML:-


    <div class="icon-add-file"></div>

So all we did was replace the alert with the following JS code:-


$('.filename').html(fileName);

// If you are using multiple file uploads, you will have to do some traversing, in our case we had to get the parent(x3) selector and find the .filename class:
$(this).parent().parent().parent().find('.filename').html(fileName);

Replacing the default file inputs

Okay, so you might have looked at the first screenshot and wondered how we replaced the default styling of the file input boxes. Don’t worry, we have you covered here as well.


.file-wrapper {
    padding: 10px 20px;
    border: solid 2px #F8F8F8;
    background: #F8F8F8;
    color: #818586;
    max-width: 100%;
    outline: none;
    height: 150px;
    width: 100%;
    display: block;    
}

div.wpcf7 input[type="file"] {
    width: 100%;
    height: 100%;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
}

.icon-add-file {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;    
    background-image: url(../img/icon-plus-symbol.png);
    display: block;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;    
}

.file-wrapper .wpcf7-form-control-wrap {
    position: relative;
    width: 100%;
    display: block;
    top: 0;
    left: 0;
    height: 150px;
    margin-top: -23px;
}

So what we did here was that we hid the original styling of the file input using opacity 0, we then added a background image which covers the grey input box so anywhere can be clicked to bring up the file upload window. In our example, we were using CF7 so the code may need to be amended to your project.

Well, we sure hope this helps, if you have any questions let us know and we’ll get back to you!

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well of many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How to Change Ordering of Bootstrap 4 Columns on Mobile

In this article, we are going to show you how you can change the ordering of columns using Bootstrap 4. By this, we mean we can actually order the alter of the columns in which they are displayed, differently from mobile to desktop, or at a particular breakpoint for that matter.

By using .order- classes for controlling the visual order of your content. These classes are responsive, so you can set the order by breakpoint (e.g. .order-1.order-md-2). This includes support for 1 through 12 across all five grid tiers.
.
There are also responsive .order-first and .order-last classes that change the order of an element by applying order: -1 and order: 13 (order: $columns + 1), respectively. These classes can also be intermixed with the numbered .order-* classes as needed.

So, how do we do it exactly? Well, let’s start with the HTML markup, this is the part that controls it all actually: (if you prefer going straight to the CodePen, then click here)


<div class="container">

  <h2>Without column ordering</h2>
  <div class="row">
    <div class="col-sm-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=A" alt="" class="w-100" />
    </div>
    <div class="col-sm-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=B" alt="" class="w-100" />
    </div>
  </div>

  <h2>With column ordering</h2>
  <div class="row">
    <div class="col-sm-6 order-sm-12">
      <img src="https://dummyimage.com/400x400/000/fff&text=B" alt="" class="w-100" />
    </div>
    <div class="col-sm-6 order-sm-1">
      <img src="https://dummyimage.com/400x400/000/fff&text=A" alt="" class="w-100" />
    </div>
  </div>

  <h2>12 columns - Descending Order</h2>
  <div class="row">
    <div class="col-sm-6 order-12">
      <img src="https://dummyimage.com/400x400/000/fff&text=1" alt="" class="w-100" />
    </div>
    <div class="col-sm-6 order-11">
      <img src="https://dummyimage.com/400x400/000/fff&text=2" alt="" class="w-100" />
    </div>
    <div class="col-sm-6 order-10">
      <img src="https://dummyimage.com/400x400/000/fff&text=3" alt="" class="w-100" />
    </div>
    <div class="col-sm-6 order-9">
      <img src="https://dummyimage.com/400x400/000/fff&text=4" alt="" class="w-100" />
    </div>
    <div class="col-sm-6 order-8">
      <img src="https://dummyimage.com/400x400/000/fff&text=5" alt="" class="w-100" />
    </div>
    <div class="col-sm-6 order-7">
      <img src="https://dummyimage.com/400x400/000/fff&text=6" alt="" class="w-100" />
    </div>
    <div class="col-sm-6 order-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=7" alt="" class="w-100" />
    </div>
    <div class="col-sm-6 order-5">
      <img src="https://dummyimage.com/400x400/000/fff&text=8" alt="" class="w-100" />
    </div>
    <div class="col-sm-6 order-4">
      <img src="https://dummyimage.com/400x400/000/fff&text=9" alt="" class="w-100" />
    </div>
    <div class="col-sm-6 order-3">
      <img src="https://dummyimage.com/400x400/000/fff&text=10" alt="" class="w-100" />
    </div>
    <div class="col-sm-6 order-2">
      <img src="https://dummyimage.com/400x400/000/fff&text=11" alt="" class="w-100" />
    </div>
    <div class="col-sm-6 order-1">
      <img src="https://dummyimage.com/400x400/000/fff&text=12" alt="" class="w-100" />
    </div>
  </div>

  <h2>12 columns - Ascending Order</h2>
  <div class="row">
    <div class="col-sm-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=1" alt="" class="w-100" />
    </div>
    <div class="col-sm-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=2" alt="" class="w-100" />
    </div>
    <div class="col-sm-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=3" alt="" class="w-100" />
    </div>
    <div class="col-sm-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=4" alt="" class="w-100" />
    </div>
    <div class="col-sm-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=5" alt="" class="w-100" />
    </div>
    <div class="col-sm-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=6" alt="" class="w-100" />
    </div>
    <div class="col-sm-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=7" alt="" class="w-100" />
    </div>
    <div class="col-sm-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=8" alt="" class="w-100" />
    </div>
    <div class="col-sm-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=9" alt="" class="w-100" />
    </div>
    <div class="col-sm-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=10" alt="" class="w-100" />
    </div>
    <div class="col-sm-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=11" alt="" class="w-100" />
    </div>
    <div class="col-sm-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=12" alt="" class="w-100" />
    </div>
  </div>
</div>

Alongside this, we added the following CSS, although this isn’t particularly required for our example:


* {
  font-family: 'Roboto', sans-serif;
}

h2 {margin-top:2em;}
.container {
  padding: 2rem;
}

.order-sm-12 img {
  border: 5px solid orange;
}

.order-sm-1 img {
  border: 5px solid blue;
}

In this example, we have demonstrated how you would display a grid ‘without column ordering’, ‘with column ordering’, ’12 columns – Descending Order’, and ’12 columns – Ascending Order’.

Okay, if you didn’t understand how the above works, it’s not a problem. The thing to remember here is that when we are using order-sm-x and order-x we are doing this using mobile-first methods. So, let’s say we wanted the first column which appears on desktop first, but then last on mobile; in our HTML markup, we would add the column that we want to display on mobile (first) above the column that we want to display on the desktop. Once you have done this, order-sm-x determines the breakpoint in which we want to change the ordering on desktop, so once -sm is triggered, the order will change based on the order-x value.

We hope we have explained this well enough to get how this works if in doubt, check out the CodePen Example, or drop us a comment below, we’ll assist if you’re in doubt, that’s just what we do 😉

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well of many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

A Collection of SVG Hamburger Menu Icon Animations

If you are looking to create an animated SVG Hamburger Menu icon then you are in the right place.

Today we bring you six different animations which would look great on any production website. It’s all about the added animations to make a website more appealing and look top dollar!

Here is a JSFiddle for you to view the animation styles:-

https://jsfiddle.net/silvawebdesigns/eo637uv1/

Like what you see? Here is the code for it as well:-

HTML


<!-- NOTE: Uses AnimateAnythingJS library for animation styles: https://github.com/matthewmain/AnimateAnythingJS -->

<div id="container">
  
  <div id="b1" class="box">
    <svg id="i1" class="icon" viewBox="0 0 100 100">
      <path id="top-line-1"     d="M30,37 L70,37 Z"></path>
      <path id="middle-line-1" 	d="M30,50 L70,50 Z"></path>
      <path id="bottom-line-1" 	d="M30,63 L70,63 Z"></path>
    </svg>
  </div>
  
  <div id="b2" class="box">
    <svg id="i2" class="icon" viewBox="0 0 100 100">
      <path id="top-line-2"     d="M30,37 L70,37 Z"></path>
      <path id="middle-line-2" 	d="M30,50 L70,50 Z"></path>
      <path id="bottom-line-2" 	d="M30,63 L70,63 Z"></path>
    </svg>
  </div>
  
  <div id="b3" class="box">
    <svg id="i3" class="icon" viewBox="0 0 100 100">
      <path id="top-line-3"     d="M30,37 L70,37 Z"></path>
      <path id="middle-line-3" 	d="M30,50 L70,50 Z"></path>
      <path id="bottom-line-3" 	d="M30,63 L70,63 Z"></path>
    </svg>  
  </div>
  
  <div id="b4" class="box">
    <svg id="i4" class="icon" viewBox="0 0 100 100">
      <polyline id="top-line-4" points="30 37 50 37 70 37"></polyline>
      <path id="middle-line-4" 	d="M30,50 L70,50 Z"></path>
      <path id="bottom-line-4" 	d="M30,63 L70,63 Z"></path>
    </svg>  
  </div>
  
  <div id="b5" class="box">
    <svg id="i5" class="icon" viewBox="0 0 100 100">
      <path id="top-line-5"     d="M30,37 L70,37 Z"></path>
      <path id="middle-line-5" 	d="M30,50 L70,50 Z"></path>
      <path id="bottom-line-5" 	d="M30,63 L70,63 Z"></path>
    </svg>
  </div>
  
  <div id="b6" class="box">
    <svg id="i6" class="icon" viewBox="0 0 100 100">
      <path id="top-line-6"     d="M30,37 L70,37 Z"></path>
      <path id="middle-line-6" 	d="M30,50 L70,50 Z"></path>
      <path id="bottom-line-6" 	d="M30,63 L70,63 Z"></path>
    </svg>
  </div>
  
</div>

<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/409445/animateAnything.js"></script>

CSS



#container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


.box {
  width: 33.3333%;
  height: 50%;
  float: left;
}

.icon {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
	width: 100%; 
  height: 100%;
	fill: none;
	stroke-width: 6;
	stroke-linecap: round;
	stroke-linejoin: round;
  cursor: pointer;
}


/********
Peachy
********/

#b1 { background: #fc5c65; }
#b2 { background: #fd9644; }
#b3 { background: #fed330; }
#b4 { background: #eb3b5a; }
#b5 { background: #fa8231; }
#b6 { background: #f7b731; }
.icon { stroke: #FFFFFF; opacity: .95; }

JS


/////////////////////////////////////////////////////
/////////////////////  ICON 1  //////////////////////
/////////////////////////////////////////////////////

///Initiation Variables
var icon_1 = document.getElementById("b1");
var topLine_1 = document.getElementById("top-line-1");
var middleLine_1 = document.getElementById("middle-line-1");
var bottomLine_1 = document.getElementById("bottom-line-1");
var state_1 = "menu";  // can be "menu" or "arrow"
var topLineY_1;
var middleLineY_1;
var bottomLineY_1;
var topLeftY_1;
var topRightY_1;
var bottomLeftY_1;
var bottomRightY_1;
var topLeftX_1;
var topRightX_1;
var bottomLeftX_1;
var bottomRightX_1;

///Animation Variables
var segmentDuration_1 = 15;
var menuDisappearDurationInFrames_1 = segmentDuration_1;
var arrowAppearDurationInFrames_1 = segmentDuration_1;
var arrowDisappearDurationInFrames_1 = segmentDuration_1;
var menuAppearDurationInFrames_1 = segmentDuration_1;
var menuDisappearComplete_1 = false;
var arrowAppearComplete_1 = false;
var arrowDisappearComplete_1 = false;
var menuAppearComplete_1 = false;
var currentFrame_1 = 1;

///Menu Disappear 
function menuDisappearAnimation_1() {
	currentFrame_1++;
	if ( currentFrame_1 <= menuDisappearDurationInFrames_1 ) {
		window.requestAnimationFrame( ()=> { 
			//top line
			topLineY_1 = AJS.easeInBack( 37, 50, menuDisappearDurationInFrames_1, currentFrame_1 );
			topLine_1.setAttribute( "d", "M30,"+topLineY_1+" L70,"+topLineY_1 );
			//bottom line
			bottomLineY_1 = AJS.easeInBack( 63, 50, menuDisappearDurationInFrames_1, currentFrame_1 );
			bottomLine_1.setAttribute( "d", "M30,"+bottomLineY_1+" L70,"+bottomLineY_1 );
			//recursion
			menuDisappearAnimation_1();
		});
	} else {
		middleLine_1.style.opacity = "0";
		currentFrame_1 = 1;
		menuDisappearComplete_1 = true;
		openMenuAnimation_1();
	}
}

///Cross Appear
function arrowAppearAnimation_1() {
	currentFrame_1++;
	if ( currentFrame_1 <= arrowAppearDurationInFrames_1 ) {
		window.requestAnimationFrame( ()=> { 
			//top line
			topLeftX_1 = AJS.easeOutBack( 30, 35, arrowAppearDurationInFrames_1, currentFrame_1 );
			topLeftY_1 = AJS.easeOutBack( 50, 35, arrowAppearDurationInFrames_1, currentFrame_1 );
			bottomRightX_1 = AJS.easeOutBack( 70, 65, arrowAppearDurationInFrames_1, currentFrame_1 );
			bottomRightY_1 = AJS.easeOutBack( 50, 65, arrowAppearDurationInFrames_1, currentFrame_1 );
			topLine_1.setAttribute( "d", "M" + topLeftX_1 + "," + topLeftY_1 + " L" + bottomRightX_1 + "," + bottomRightY_1 );
			//bottom line
			bottomLeftX_1 = AJS.easeOutBack( 30, 35, arrowAppearDurationInFrames_1, currentFrame_1 );
			bottomLeftY_1 = AJS.easeOutBack( 50, 65, arrowAppearDurationInFrames_1, currentFrame_1 );
			topRightX_1 = AJS.easeOutBack( 70, 65, arrowAppearDurationInFrames_1, currentFrame_1 );
			topRightY_1 = AJS.easeOutBack( 50, 35, arrowAppearDurationInFrames_1, currentFrame_1 );
			bottomLine_1.setAttribute( "d", "M" + bottomLeftX_1 + "," + bottomLeftY_1 + " L" + topRightX_1 + "," + topRightY_1 );
			//recursion
			arrowAppearAnimation_1();
		});
	} else {
		currentFrame_1 = 1;
		arrowAppearComplete_1 = true;
		openMenuAnimation_1();
	}
}

///Combined Open Menu Animation
function openMenuAnimation_1() {
	if ( !menuDisappearComplete_1 ) { 
		menuDisappearAnimation_1();
	} else if ( !arrowAppearComplete_1) {
		arrowAppearAnimation_1();
	}
}

///Cross Disappear
function arrowDisappearAnimation_1() {
	currentFrame_1++;
	if ( currentFrame_1 <= arrowDisappearDurationInFrames_1 ) {
		window.requestAnimationFrame( ()=> {
			//top line
			topLeftX_1 = AJS.easeInBack( 35, 30, arrowDisappearDurationInFrames_1, currentFrame_1 );
			topLeftY_1 = AJS.easeInBack( 35, 50, arrowDisappearDurationInFrames_1, currentFrame_1 );
			bottomRightX_1 = AJS.easeInBack( 65, 70, arrowDisappearDurationInFrames_1, currentFrame_1 );
			bottomRightY_1 = AJS.easeInBack( 65, 50, arrowDisappearDurationInFrames_1, currentFrame_1 );
			topLine_1.setAttribute( "d", "M" + topLeftX_1 + "," + topLeftY_1 + " L" + bottomRightX_1 + "," + bottomRightY_1 );
			//bottom line
			bottomLeftX_1 = AJS.easeInBack( 35, 30, arrowDisappearDurationInFrames_1, currentFrame_1 );
			bottomLeftY_1 = AJS.easeInBack( 65, 50, arrowDisappearDurationInFrames_1, currentFrame_1 );
			topRightX_1 = AJS.easeInBack( 65, 70, arrowDisappearDurationInFrames_1, currentFrame_1 );
			topRightY_1 = AJS.easeInBack( 35, 50, arrowDisappearDurationInFrames_1, currentFrame_1 );
			bottomLine_1.setAttribute( "d", "M" + bottomLeftX_1 + "," + bottomLeftY_1 + " L" + topRightX_1 + "," + topRightY_1 );
			//recursion
			arrowDisappearAnimation_1();
		});
	} else {
		middleLine_1.style.opacity = "1";
		currentFrame_1 = 1;
		arrowDisappearComplete_1 = true;
		closeMenuAnimation_1();
	}
}

///Menu Appear
function menuAppearAnimation_1() {
	currentFrame_1++;
	if ( currentFrame_1 <= menuAppearDurationInFrames_1 ) {
		window.requestAnimationFrame( ()=> {
			//top line
			topLineY_1 = AJS.easeOutBack( 50, 37, menuDisappearDurationInFrames_1, currentFrame_1 );
			topLine_1.setAttribute( "d", "M30,"+topLineY_1+" L70,"+topLineY_1 );
			//bottom line
			bottomLineY_1 = AJS.easeOutBack( 50, 63, menuDisappearDurationInFrames_1, currentFrame_1 );
			bottomLine_1.setAttribute( "d", "M30,"+bottomLineY_1+" L70,"+bottomLineY_1 );
			//recursion
			menuAppearAnimation_1();
		});
	} else {
		currentFrame_1 = 1;
		menuAppearComplete_1 = true;
		closeMenuAnimation_1();
	}
}

///Close Menu Animation
function closeMenuAnimation_1() {
	if ( !arrowDisappearComplete_1 ) {
		arrowDisappearAnimation_1();
	} else if ( !menuAppearComplete_1 ) {
		menuAppearAnimation_1();
	}
}

///Events
icon_1.addEventListener( "click", ()=> { 
  if ( state_1 === "menu" ) {
  	openMenuAnimation_1();
  	state_1 = "arrow";
  	arrowDisappearComplete_1 = false;
		menuAppearComplete_1 = false;
  } else if ( state_1 === "arrow" ) {
  	closeMenuAnimation_1();
  	state_1 = "menu";
  	menuDisappearComplete_1 = false;
		arrowAppearComplete_1 = false;
  }
});



/////////////////////////////////////////////////////
/////////////////////  ICON 2  //////////////////////
/////////////////////////////////////////////////////

///Initiation Variables
var icon_2 = document.getElementById("b2");
var topLine_2 = document.getElementById("top-line-2");
var middleLine_2 = document.getElementById("middle-line-2");
var bottomLine_2 = document.getElementById("bottom-line-2");
var state_2 = "menu";  // can be "menu" or "cross"
var topLineY_2;
var middleLineY_2;
var bottomLineY_2;
var topLeftY_2;
var topRightY_2;
var bottomLeftY_2;
var bottomRightY_2;
var topLeftX_2;
var topRightX_2;
var middleLeftX_2;
var middleRightX_2;
var bottomLeftX_2;
var bottomRightX_2;

///Animation Variables
var segmentDuration_2 = 25;
var menuDisappearDurationInFrames_2 = segmentDuration_2;
var crossAppearDurationInFrames_2 = Math.round( segmentDuration_2*0.35 );
var crossDisappearDurationInFrames_2 = Math.round( segmentDuration_2*0.6 );
var menuAppearDurationInFrames_2 = segmentDuration_2;
var menuDisappearComplete_2 = false;
var crossAppearComplete_2 = false;
var crossDisappearComplete_2 = true;
var menuAppearComplete_2 = true;
var currentFrame_2 = 0;
var lineDisappearDelay_2 = segmentDuration_2*0.2;
var lineAppearDelay_2 = lineDisappearDelay_2;
var lineDisappearDurationInFrames_2 = segmentDuration_2 - lineDisappearDelay_2*2;
var lineAppearDurationInFrames_2 = lineDisappearDurationInFrames_2;
var topLineOpacity_2 = 1;
var middleLineOpacity_2 = 1;
var bottomLineOpacity_2 = 1;

///Menu Disappear
function menuDisappearAnimation_2() {
	currentFrame_2++;
	if ( currentFrame_2 <= menuDisappearDurationInFrames_2 ) {
		window.requestAnimationFrame( ()=> { 
			//top line
      if ( currentFrame_2 <= lineDisappearDurationInFrames_2 ) {
        topLeftX_2 = AJS.easeInBack( 30, 130, lineDisappearDurationInFrames_2, currentFrame_2 );
        topRightX_2 = AJS.easeInBack( 70, 170, lineDisappearDurationInFrames_2, currentFrame_2 );
        topLine_2.setAttribute( "d", "M"+topLeftX_2+",37 L"+topRightX_2+",37 Z" );
        topLineOpacity_2 = AJS.linear( 1, 0, lineDisappearDurationInFrames_2*0.85, currentFrame_2 );
        topLine_2.style.opacity = topLineOpacity_2;
      }
      //middle line
      if ( currentFrame_2 > lineDisappearDelay_2 && currentFrame_2 <= lineDisappearDurationInFrames_2 + lineDisappearDelay_2 ) {
        middleLeftX_2 = AJS.easeInBack( 30, 130, lineDisappearDurationInFrames_2, currentFrame_2 - lineDisappearDelay_2 );
        middleRightX_2 = AJS.easeInBack( 70, 170, lineDisappearDurationInFrames_2, currentFrame_2 - lineDisappearDelay_2 );
        middleLine_2.setAttribute( "d", "M"+middleLeftX_2+",50 L"+middleRightX_2+",50 Z" );
        middleLineOpacity_2 = AJS.linear( 1, 0, lineDisappearDurationInFrames_2*0.85, currentFrame_2 - lineDisappearDelay_2 );
        middleLine_2.style.opacity = middleLineOpacity_2;
      }
      //bottom line
      if ( currentFrame_2 > lineDisappearDelay_2*2 ) {
        bottomLeftX_2 = AJS.easeInBack( 30, 130, lineDisappearDurationInFrames_2, currentFrame_2 - lineDisappearDelay_2*2 );
        bottomRightX_2 = AJS.easeInBack( 70, 170, lineDisappearDurationInFrames_2, currentFrame_2 - lineDisappearDelay_2*2 );
        bottomLine_2.setAttribute( "d", "M"+bottomLeftX_2+",63 L"+bottomRightX_2+",63 Z" );
        bottomLineOpacity_2 = AJS.linear( 1, 0, lineDisappearDurationInFrames_2*0.85, currentFrame_2 - lineDisappearDelay_2*2 );
        bottomLine_2.style.opacity = bottomLineOpacity_2;
      }
			//recursion
			menuDisappearAnimation_2();
		});
	} else {
		currentFrame_2 = 0;
		menuDisappearComplete_2 = true;
		openMenuAnimation_2();
	}
}

///Cross Appear
function crossAppearAnimation_2() {
	currentFrame_2++;
	if ( currentFrame_2 <= crossAppearDurationInFrames_2 ) {
		window.requestAnimationFrame( ()=> { 
			//top line
			topLeftX_2 = AJS.easeInQuad( -30, 35, crossAppearDurationInFrames_2, currentFrame_2 );
			topLeftY_2 = AJS.easeInQuad( -30, 35, crossAppearDurationInFrames_2, currentFrame_2 );
			bottomRightX_2 = AJS.easeInQuad( 0, 65, crossAppearDurationInFrames_2, currentFrame_2 );
			bottomRightY_2 = AJS.easeInQuad( 0, 65, crossAppearDurationInFrames_2, currentFrame_2 );
			topLine_2.setAttribute( "d", "M" + topLeftX_2 + "," + topLeftY_2 + " L" + bottomRightX_2 + "," + bottomRightY_2 );
      topLineOpacity_2 = AJS.easeInExpo( 0, 1, crossAppearDurationInFrames_2, currentFrame_2 );
      topLine_2.style.opacity = topLineOpacity_2;
			//bottom line
			bottomLeftX_2 = AJS.easeInQuad( -30, 35, crossAppearDurationInFrames_2, currentFrame_2 );
			bottomLeftY_2 = AJS.easeInQuad( 130, 65, crossAppearDurationInFrames_2, currentFrame_2 );
			topRightX_2 = AJS.easeInQuad( 0, 65, crossAppearDurationInFrames_2, currentFrame_2 );
			topRightY_2 = AJS.easeInQuad( 100, 35, crossAppearDurationInFrames_2, currentFrame_2 );
			bottomLine_2.setAttribute( "d", "M" + bottomLeftX_2 + "," + bottomLeftY_2 + " L" + topRightX_2 + "," + topRightY_2 );
      bottomLineOpacity_2 = AJS.easeInExpo( 0, 1, crossAppearDurationInFrames_2, currentFrame_2 );
      bottomLine_2.style.opacity = bottomLineOpacity_2;      
			//recursion
			crossAppearAnimation_2();
		});
	} else {
		currentFrame_2 = 0;
		crossAppearComplete_2 = true;
		openMenuAnimation_2();
	}
}

///Combined Open Menu Animation
function openMenuAnimation_2() {
	if ( !menuDisappearComplete_2 ) { 
		menuDisappearAnimation_2();
	} else if ( !crossAppearComplete_2) {
		crossAppearAnimation_2();
	}
}

///Cross Disappear
function crossDisappearAnimation_2() {
	currentFrame_2++;
	if ( currentFrame_2 <= crossDisappearDurationInFrames_2 ) {
		window.requestAnimationFrame( ()=> {
      //top line
			topLeftX_2 = AJS.easeInBack( 35, -30, crossDisappearDurationInFrames_2, currentFrame_2 );
			topLeftY_2 = AJS.easeInBack( 35, -30, crossDisappearDurationInFrames_2, currentFrame_2 );
			bottomRightX_2 = AJS.easeInBack( 65, 0, crossDisappearDurationInFrames_2, currentFrame_2 );
			bottomRightY_2 = AJS.easeInBack( 65, 0, crossDisappearDurationInFrames_2, currentFrame_2 );
			topLine_2.setAttribute( "d", "M" + topLeftX_2 + "," + topLeftY_2 + " L" + bottomRightX_2 + "," + bottomRightY_2 );
      topLineOpacity_2 = AJS.linear( 1, 0, crossDisappearDurationInFrames_2, currentFrame_2, crossDisappearDurationInFrames_2*0.75 );
      topLine_2.style.opacity = topLineOpacity_2;
			//bottom line
			bottomLeftX_2 = AJS.easeInBack( 35, -30, crossDisappearDurationInFrames_2, currentFrame_2 );
			bottomLeftY_2 = AJS.easeInBack( 65, 130, crossDisappearDurationInFrames_2, currentFrame_2 );
			topRightX_2 = AJS.easeInBack( 65, 0, crossDisappearDurationInFrames_2, currentFrame_2 );
			topRightY_2 = AJS.easeInBack( 35, 100, crossDisappearDurationInFrames_2, currentFrame_2 );
			bottomLine_2.setAttribute( "d", "M" + bottomLeftX_2 + "," + bottomLeftY_2 + " L" + topRightX_2 + "," + topRightY_2 );
      bottomLineOpacity_2 = AJS.linear( 1, 0, crossDisappearDurationInFrames_2, currentFrame_2, crossDisappearDurationInFrames_2*0.75 );
      bottomLine_2.style.opacity = bottomLineOpacity_2;
			//recursion
			crossDisappearAnimation_2();
		});
	} else {
		middleLine_2.style.opacity = "1";
		currentFrame_2 = 0;
		crossDisappearComplete_2 = true;
		closeMenuAnimation_2();
	}
}

///Menu Appear
function menuAppearAnimation_2() {
	currentFrame_2++;
	if ( currentFrame_2 <= menuAppearDurationInFrames_2 ) {
		window.requestAnimationFrame( ()=> {  
			//top line
      if ( currentFrame_2 <= lineAppearDurationInFrames_2 ) {
        topLeftX_2 = AJS.easeOutBack( 130, 30, lineAppearDurationInFrames_2, currentFrame_2 );
        topRightX_2 = AJS.easeOutBack( 170, 70, lineAppearDurationInFrames_2, currentFrame_2 );
        topLine_2.setAttribute( "d", "M"+topLeftX_2+",37 L"+topRightX_2+",37 Z" );
        topLineOpacity_2 = AJS.linear( -2, 1, lineAppearDurationInFrames_2, currentFrame_2 );
        topLine_2.style.opacity = topLineOpacity_2;
      }
			//middle line
			if ( currentFrame_2 > lineAppearDelay_2 && currentFrame_2 <= lineAppearDurationInFrames_2 + lineAppearDelay_2 ) {
        middleLeftX_2 = AJS.easeOutBack( 130, 30, lineAppearDurationInFrames_2, currentFrame_2 - lineAppearDelay_2 );
        middleRightX_2 = AJS.easeOutBack( 170, 70, lineAppearDurationInFrames_2, currentFrame_2 - lineAppearDelay_2 );
        middleLine_2.setAttribute( "d", "M"+middleLeftX_2+",50 L"+middleRightX_2+",50 Z" );
        middleLineOpacity_2 = AJS.easeOutBack( -2, 1, lineAppearDurationInFrames_2, currentFrame_2 - lineAppearDelay_2 );
        middleLine_2.style.opacity = middleLineOpacity_2;
			}
			//bottom line
			if ( currentFrame_2 > lineAppearDelay_2*2 ) {
        bottomLeftX_2 = AJS.easeOutBack( 130, 30, lineAppearDurationInFrames_2, currentFrame_2 - lineAppearDelay_2*2 );
        bottomRightX_2 = AJS.easeOutBack( 170, 70, lineAppearDurationInFrames_2, currentFrame_2 - lineAppearDelay_2*2 );
        bottomLine_2.setAttribute( "d", "M"+bottomLeftX_2+",63 L"+bottomRightX_2+",63 Z" );
        bottomLineOpacity_2 = AJS.easeOutBack( -2, 1, lineAppearDurationInFrames_2, currentFrame_2 - lineAppearDelay_2*2 );
        bottomLine_2.style.opacity = bottomLineOpacity_2;
			}
			//recursion
			menuAppearAnimation_2();
		});
	} else {
		currentFrame_2 = 0;
		menuAppearComplete_2 = true;
	}
}

///Close Menu Animation
function closeMenuAnimation_2() {
	if ( !crossDisappearComplete_2 ) {
		crossDisappearAnimation_2();
	} else if ( !menuAppearComplete_2 ) {
		menuAppearAnimation_2();
	}
}

///Events
icon_2.addEventListener( "click", ()=> { 
  if ( state_2 === "menu" ) {
  	openMenuAnimation_2();
  	state_2 = "cross";
  	crossDisappearComplete_2 = false;
		menuAppearComplete_2 = false;
  } else if ( state_2 === "cross" ) {
  	closeMenuAnimation_2();
  	state_2 = "menu";
  	menuDisappearComplete_2 = false;
		crossAppearComplete_2 = false;
  }
});



/////////////////////////////////////////////////////
/////////////////////  ICON 3  //////////////////////
/////////////////////////////////////////////////////

///Initiation Variables
var icon_3 = document.getElementById("b3");
var topLine_3 = document.getElementById("top-line-3");
var middleLine_3 = document.getElementById("middle-line-3");
var bottomLine_3 = document.getElementById("bottom-line-3");
var state_3 = "menu";  // can be "menu" or "cross"
var topLineY_3;
var middleLineY_3;
var bottomLineY_3;
var topLeftX_3;
var topRightX_3;
var middleLeftX_3;
var middleRightX_3;
var bottomLeftX_3;
var bottomRightX_3;
var topLeftY_3;
var topRightY_3;
var middleLeftY_3;
var middleRightY_3;
var bottomLeftY_3;
var bottomRightY_3;

///Animation Variables
var segmentDuration_3 = 20;
var menuDisappearDurationInFrames_3 = segmentDuration_3;
var crossAppearDurationInFrames_3 = segmentDuration_3*1.5;
var crossDisappearDurationInFrames_3 = segmentDuration_3*1.5;
var menuAppearDurationInFrames_3 = segmentDuration_3;
var menuDisappearComplete_3 = false;
var crossAppearComplete_3 = false;
var crossDisappearComplete_3 = true;
var menuAppearComplete_3 = true;
var currentFrame_3 = 0;
var cPt_3 = { x: 50, y: 50 };  // center point
var tlPt_3 = { x: 30, y: 37 };  // top right point
var trPt_3 = { x: 70, y: 37 };  // top left point
var mlPt_3 = { x: 30, y: 50 };  // middle right point
var mrPt_3 = { x: 70, y: 50 };  // middle left point
var blPt_3 = { x: 30, y: 63 };  // bottom right point
var brPt_3 = { x: 70, y: 63 };  // bottom left point
var topLineOpacity_3 = 1;
var middleLineOpacity_3 = 1;
var bottomLineOpacity_3 = 1;

///Position Rotation
function positionRotation( centerPoint, orbitPoint, angleInRads ) {
  var distance = Math.sqrt( Math.pow( orbitPoint.x-centerPoint.x, 2 ) + Math.pow( orbitPoint.y-centerPoint.y, 2 ) );
  orbitPoint.x = centerPoint.x + Math.cos( angleInRads ) * distance;
  orbitPoint.y = centerPoint.y + Math.sin( angleInRads ) * distance;
}

///Menu Disappear
function menuDisappearAnimation_3() {
	currentFrame_3++;
	if ( currentFrame_3 <= menuDisappearDurationInFrames_3 ) {
		window.requestAnimationFrame( ()=> { 
      var rotation = Math.PI*0.5;
			//top line
      var tlAng = AJS.easeInBack( 3.7179, 3.7179+rotation, menuDisappearDurationInFrames_3, currentFrame_3 );
      var trAng = AJS.easeInBack( 5.7068, 5.7068+rotation, menuDisappearDurationInFrames_3, currentFrame_3 );
      positionRotation( cPt_3, tlPt_3, tlAng );
      positionRotation( cPt_3, trPt_3, trAng );
      topLine_3.setAttribute( "d", "M"+tlPt_3.x+","+tlPt_3.y+" L"+trPt_3.x+","+trPt_3.y+" Z" );
      //middle line
      var mlAng = AJS.easeInBack( Math.PI, Math.PI+rotation, menuDisappearDurationInFrames_3, currentFrame_3 );
      var mrAng = AJS.easeInBack( 0, rotation, menuDisappearDurationInFrames_3, currentFrame_3 );
      positionRotation( cPt_3, mlPt_3, mlAng );
      positionRotation( cPt_3, mrPt_3, mrAng );
      middleLine_3.setAttribute( "d", "M"+mlPt_3.x+","+mlPt_3.y+" L"+mrPt_3.x+","+mrPt_3.y+" Z" );
      //bottom line
      var blAng = AJS.easeInBack( 2.5652, 2.5652+rotation, menuDisappearDurationInFrames_3, currentFrame_3 );
      var brAng = AJS.easeInBack( 0.5763, 0.5763+rotation, menuDisappearDurationInFrames_3, currentFrame_3 );
      positionRotation( cPt_3, blPt_3, blAng );
      positionRotation( cPt_3, brPt_3, brAng );
      bottomLine_3.setAttribute( "d", "M"+blPt_3.x+","+blPt_3.y+" L"+brPt_3.x+","+brPt_3.y+" Z" );
			//recursion
			menuDisappearAnimation_3();
		});
	} else {
		currentFrame_3 = 0;
		menuDisappearComplete_3 = true;
		openMenuAnimation_3();
	}
}

///Cross Appear
function crossAppearAnimation_3() {
	currentFrame_3++;
	if ( currentFrame_3 <= crossAppearDurationInFrames_3 ) {
    tlPt_3 = { x: 50, y: 28.7867 };
    trPt_3 = { x: 50, y: 71.2132 };
    mlPt_3 = { x: 28.7867, y: 50 };
    mrPt_3 = { x: 71.2132, y: 50 };
		window.requestAnimationFrame( ()=> { 
      var rotation = Math.PI*0.75;
			//top line
      var tlAng = AJS.easeOutBack( Math.PI, Math.PI+rotation, crossAppearDurationInFrames_3, currentFrame_3 );
      var trAng = AJS.easeOutBack( 0, rotation, crossAppearDurationInFrames_3, currentFrame_3 );
      positionRotation( cPt_3, tlPt_3, tlAng );
      positionRotation( cPt_3, trPt_3, trAng );
      topLine_3.setAttribute( "d", "M"+tlPt_3.x+","+tlPt_3.y+" L"+trPt_3.x+","+trPt_3.y+" Z" );
			//center line
      var mlAng = AJS.easeOutBack( Math.PI*1.5, Math.PI*1.5+rotation, crossAppearDurationInFrames_3, currentFrame_3 );
      var mrAng = AJS.easeOutBack( Math.PI*0.5, Math.PI*0.5+rotation, crossAppearDurationInFrames_3, currentFrame_3 );
      positionRotation( cPt_3, mlPt_3, mlAng );
      positionRotation( cPt_3, mrPt_3, mrAng );
      middleLine_3.setAttribute( "d", "M"+mlPt_3.x+","+mlPt_3.y+" L"+mrPt_3.x+","+mrPt_3.y+" Z" );
      //bottom line
      bottomLine_3.style.opacity = 0;
			//recursion
			crossAppearAnimation_3();
		});
	} else {
		currentFrame_3 = 0;
		crossAppearComplete_3 = true;
		openMenuAnimation_3();
	}
}

///Combined Open Menu Animation
function openMenuAnimation_3() {
	if ( !menuDisappearComplete_3 ) { 
		menuDisappearAnimation_3();
	} else if ( !crossAppearComplete_3) {
		crossAppearAnimation_3();
	}
}

///Cross Disappear
function crossDisappearAnimation_3() {
	currentFrame_3++;
	if ( currentFrame_3 <= crossDisappearDurationInFrames_3 ) {
		window.requestAnimationFrame( ()=> { 
      var rotation = Math.PI*0.75;
			//top line
      var tlAng = AJS.easeInBack( Math.PI*1.75, Math.PI*1.75+rotation, crossDisappearDurationInFrames_3, currentFrame_3 );
      var trAng = AJS.easeInBack( Math.PI*0.75, Math.PI*0.75+rotation, crossDisappearDurationInFrames_3, currentFrame_3 );
      positionRotation( cPt_3, tlPt_3, tlAng );
      positionRotation( cPt_3, trPt_3, trAng );
      topLine_3.setAttribute( "d", "M"+tlPt_3.x+","+tlPt_3.y+" L"+trPt_3.x+","+trPt_3.y+" Z" );
			//center line
      var mlAng = AJS.easeInBack( Math.PI*2.25, Math.PI*2.25+rotation, crossDisappearDurationInFrames_3, currentFrame_3 );
      var mrAng = AJS.easeInBack( Math.PI*1.25, Math.PI*1.25+rotation, crossDisappearDurationInFrames_3, currentFrame_3 );
      positionRotation( cPt_3, mlPt_3, mlAng );
      positionRotation( cPt_3, mrPt_3, mrAng );
      middleLine_3.setAttribute( "d", "M"+mlPt_3.x+","+mlPt_3.y+" L"+mrPt_3.x+","+mrPt_3.y+" Z" );
      //bottom line
      bottomLine_3.style.opacity = 0;
			//recursion
			crossDisappearAnimation_3();
		});
	} else {
		middleLine_3.style.opacity = "1";
		currentFrame_3 = 0;
		crossDisappearComplete_3 = true;
		closeMenuAnimation_3();
	}
}

///Menu Appear
function menuAppearAnimation_3() {
	currentFrame_3++;
	if ( currentFrame_3 <= menuAppearDurationInFrames_3 ) {
    tlPt_3 = { x: 37, y: 70 };
    trPt_3 = { x: 37, y: 30 };
    mlPt_3 = { x: 50, y: 70 };
    mrPt_3 = { x: 50, y: 30 };
    bottomLine_3.style.opacity = 1;
		window.requestAnimationFrame( ()=> {  
      var rotation = Math.PI*0.5;
			//top line
			var tlAng = AJS.easeOutBack( 2.1471, 2.1471+rotation, menuDisappearDurationInFrames_3, currentFrame_3 );
			var trAng = AJS.easeOutBack( 4.1360, 4.1360+rotation, menuDisappearDurationInFrames_3, currentFrame_3 );
			positionRotation( cPt_3, tlPt_3, tlAng );
			positionRotation( cPt_3, trPt_3, trAng );
			topLine_3.setAttribute( "d", "M"+tlPt_3.x+","+tlPt_3.y+" L"+trPt_3.x+","+trPt_3.y+" Z" );
      //middle line
      var mlAng = AJS.easeOutBack( Math.PI*0.5, Math.PI*0.5+rotation, menuDisappearDurationInFrames_3, currentFrame_3 );
      var mrAng = AJS.easeOutBack( Math.PI*1.5, Math.PI*1.5+rotation, menuDisappearDurationInFrames_3, currentFrame_3 );
      positionRotation( cPt_3, mlPt_3, mlAng );
      positionRotation( cPt_3, mrPt_3, mrAng );
      middleLine_3.setAttribute( "d", "M"+mlPt_3.x+","+mlPt_3.y+" L"+mrPt_3.x+","+mrPt_3.y+" Z" );
      //bottom line
      var blAng = AJS.easeOutBack( 0.9944, 0.9944+rotation, menuDisappearDurationInFrames_3, currentFrame_3 );
      var brAng = AJS.easeOutBack( 5.2887, 5.2887+rotation, menuDisappearDurationInFrames_3, currentFrame_3 );
      positionRotation( cPt_3, blPt_3, blAng );
      positionRotation( cPt_3, brPt_3, brAng );
      bottomLine_3.setAttribute( "d", "M"+blPt_3.x+","+blPt_3.y+" L"+brPt_3.x+","+brPt_3.y+" Z" );
			//recursion
			menuAppearAnimation_3();
		});
	} else {
		currentFrame_3 = 0;
		menuAppearComplete_3 = true;
	}
}

///Close Menu Animation
function closeMenuAnimation_3() {
	if ( !crossDisappearComplete_3 ) {
		crossDisappearAnimation_3();
	} else if ( !menuAppearComplete_3 ) {
		menuAppearAnimation_3();
	}
}

///Events
icon_3.addEventListener( "click", ()=> { 
  if ( state_3 === "menu" ) {
  	openMenuAnimation_3();
  	state_3 = "cross";
  	crossDisappearComplete_3 = false;
		menuAppearComplete_3 = false;
  } else if ( state_3 === "cross" ) {
  	closeMenuAnimation_3();
  	state_3 = "menu";
  	menuDisappearComplete_3 = false;
		crossAppearComplete_3 = false;
  }
});



/////////////////////////////////////////////////////
/////////////////////  ICON 4  //////////////////////
/////////////////////////////////////////////////////

///Initiation Variables
var icon_4 = document.getElementById("b4");
var topLine_4 = document.getElementById("top-line-4");
var middleLine_4 = document.getElementById("middle-line-4");
var bottomLine_4 = document.getElementById("bottom-line-4");
var state_4 = "menu";  // can be "menu" or "arrow"
var topLineY_4;
var middleLineY_4;
var bottomLineY_4;
var arrowLegY_4;
var arrowPointY_4;
var hideawayLinesOpacity_4;

///Animation Variables
var segmentDuration_4 = 25;
var menuDisappearDurationInFrames_4 = segmentDuration_4;
var arrowAppearDurationInFrames_4 = segmentDuration_4;
var menuAppearDurationInFrames_4 = segmentDuration_4*1.5;
var fadeInDurationInFrames_4 = segmentDuration_4;
var menuDisappearComplete_4 = false;
var arrowAppearComplete_4 = false;
var menuAppearComplete_4 = true;
var currentFrame_4 = 1;

///Collapse
function menuDisappearAnimation_4() {
	currentFrame_4++;
	if ( currentFrame_4 <= menuDisappearDurationInFrames_4 ) {
		window.requestAnimationFrame( ()=> { 
			//top line
			topLineY_4 = AJS.easeInOutBack( 37, 63, menuDisappearDurationInFrames_4, currentFrame_4 );
			topLine_4.setAttribute( "points", "30 "+topLineY_4+" 50 "+topLineY_4+" 70 "+topLineY_4 );
			//middle line
			middleLineY_4 = AJS.easeInOutBack( 50, 63, menuDisappearDurationInFrames_4, currentFrame_4 );
			middleLine_4.setAttribute( "d", "M30,"+middleLineY_4+" L70,"+middleLineY_4 );
			if ( middleLineY_4 >= 63) middleLine_4.style.opacity = "0";
			//bottom line
			if ( middleLineY_4 >= 63) bottomLine_4.style.opacity = "0";
			//recursion
			menuDisappearAnimation_4();
		});
	} else {
		bottomLine_4.style.opacity = "0";
		currentFrame_4 = 1;
		menuDisappearComplete_4 = true;
		openMenuAnimation_4();
	}
}

///Arrow Appear
function arrowAppearAnimation_4() {
	currentFrame_4++;
	if ( currentFrame_4 <= arrowAppearDurationInFrames_4 ) {
		window.requestAnimationFrame( ()=> { 
			//arrow
			arrowLegY_4 = AJS.easeOutBack( 63, 60, arrowAppearDurationInFrames_4, currentFrame_4 );
			arrowPointY_4 = AJS.easeOutBack( 63, 40, arrowAppearDurationInFrames_4, currentFrame_4 );
			topLine_4.setAttribute("points", "30 "+arrowLegY_4+" 50 "+arrowPointY_4+" 70 "+arrowLegY_4);
			//recursion
			arrowAppearAnimation_4();
		});
	} else {
		currentFrame_4 = 1;
		arrowAppearComplete_4 = true;
		menuAppearComplete_4 = false;
		openMenuAnimation_4();
	}
}

///Combined Open Menu Animation
function openMenuAnimation_4() {
	if ( !menuDisappearComplete_4 ) { 
		menuDisappearAnimation_4();
	} else if ( !arrowAppearComplete_4) {
		arrowAppearAnimation_4();
	}
}

///Menu Return
function menuAppearAnimation_4() {
	currentFrame_4++;
	if ( currentFrame_4 <= menuAppearDurationInFrames_4 ) {
		window.requestAnimationFrame( ()=> { 
			//arrow to top line
			arrowLegY_4 = AJS.easeOutBounce( 60, 37, menuAppearDurationInFrames_4, currentFrame_4 );
			arrowPointY_4 = AJS.easeOutBounce( 40, 37, menuAppearDurationInFrames_4, currentFrame_4 );
			topLine_4.setAttribute("points", "30 "+arrowLegY_4+" 50 "+arrowPointY_4+" 70 "+arrowLegY_4);
			//middle line
			middleLineY_4 = AJS.easeOutBounce( 68, 50, menuAppearDurationInFrames_4, currentFrame_4 );
			middleLine_4.setAttribute( "d", "M30,"+middleLineY_4+" L70,"+middleLineY_4 );
			//bottom line
			bottomLineY_4 = AJS.easeOutBounce( 68, 63, menuAppearDurationInFrames_4, currentFrame_4 );
			bottomLine_4.setAttribute( "d", "M30,"+bottomLineY_4+" L70,"+bottomLineY_4 );
			//middle and bottom lines opacity
			hideawayLinesOpacity_4 = AJS.linear( 0, 1, fadeInDurationInFrames_4, currentFrame_4 );
			middleLine_4.style.opacity = hideawayLinesOpacity_4;
			bottomLine_4.style.opacity = hideawayLinesOpacity_4;
			//recursion
			menuAppearAnimation_4();
		});
	} else {
		currentFrame_4 = 1;
		menuDisappearComplete_4 = false;
		arrowAppearComplete_4 = false;
		menuAppearComplete_4 = true;
	}
}

///Close Menu Animation
function closeMenuAnimation_4() {
	if ( !menuAppearComplete_4 ) {
		menuAppearAnimation_4();
	}
}

///Events
icon_4.addEventListener( "click", ()=> {
  if ( state_4 === "menu" ) {
  	openMenuAnimation_4();
  	state_4 = "arrow"
  } else if ( state_4 === "arrow" ) {
  	closeMenuAnimation_4();
  	state_4 = "menu"
  }
});



/////////////////////////////////////////////////////
/////////////////////  ICON 5  //////////////////////
/////////////////////////////////////////////////////


//Initiation Variables
var icon_5 = document.getElementById("b5");
var topLine_5 = document.getElementById("top-line-5");
var middleLine_5 = document.getElementById("middle-line-5");
var bottomLine_5 = document.getElementById("bottom-line-5");
var state_5 = "menu";  // can be "menu" or "arrow"
var topLineY_5;
var middleLineY_5;
var bottomLineY_5;
var topLeftY_5;
var topRightY_5;
var bottomLeftY_5;
var bottomRightY_5;
var topLeftX_5;
var topRightX_5;
var middleLeftX_5;
var middleRightX_5;
var bottomLeftX_5;
var bottomRightX_5;

///Animation Variables
var segmentDuration_5 = 25;
var menuDisappearDurationInFrames_5 = segmentDuration_5;
var arrowAppearDurationInFrames_5 = Math.round( segmentDuration_5*0.35 );
var arrowDisappearDurationInFrames_5 = Math.round( segmentDuration_5*0.35 );
var menuAppearDurationInFrames_5 = segmentDuration_5;
var menuDisappearComplete_5 = false;
var arrowAppearComplete_5 = false;
var arrowDisappearComplete_5 = true;
var menuAppearComplete_5 = true;
var currentFrame_5 = 0;
var lineDisappearDelay_5 = segmentDuration_5*0.2;
var lineAppearDelay_5 = lineDisappearDelay_5;
var lineDisappearDurationInFrames_5 = segmentDuration_5 - lineDisappearDelay_5*2;
var lineAppearDurationInFrames_5 = lineDisappearDurationInFrames_5;
var topLineOpacity_5 = 1;
var middleLineOpacity_5 = 1;
var bottomLineOpacity_5 = 1;

///Menu Disappear
function menuDisappearAnimation_5() {
	currentFrame_5++;
	if ( currentFrame_5 <= menuDisappearDurationInFrames_5 ) {
		window.requestAnimationFrame( ()=> { 
			//top line
      if ( currentFrame_5 <= lineDisappearDurationInFrames_5 ) {
        topLeftX_5 = AJS.easeInBack( 30, 130, lineDisappearDurationInFrames_5, currentFrame_5 );
        topRightX_5 = AJS.easeInBack( 70, 170, lineDisappearDurationInFrames_5, currentFrame_5 );
        topLine_5.setAttribute( "d", "M"+topLeftX_5+",37 L"+topRightX_5+",37 Z" );
        topLineOpacity_5 = AJS.linear( 1, 0, lineDisappearDurationInFrames_5*0.85, currentFrame_5 );
        topLine_5.style.opacity = topLineOpacity_5;
      }
      //middle line
      if ( currentFrame_5 > lineDisappearDelay_5 && currentFrame_5 <= lineDisappearDurationInFrames_5 + lineDisappearDelay_5 ) {
        middleLeftX_5 = AJS.easeInBack( 30, 130, lineDisappearDurationInFrames_5, currentFrame_5 - lineDisappearDelay_5 );
        middleRightX_5 = AJS.easeInBack( 70, 170, lineDisappearDurationInFrames_5, currentFrame_5 - lineDisappearDelay_5 );
        middleLine_5.setAttribute( "d", "M"+middleLeftX_5+",50 L"+middleRightX_5+",50 Z" );
        middleLineOpacity_5 = AJS.linear( 1, 0, lineDisappearDurationInFrames_5*0.85, currentFrame_5 - lineDisappearDelay_5 );
        middleLine_5.style.opacity = middleLineOpacity_5;
      }
      //bottom line
      if ( currentFrame_5 > lineDisappearDelay_5*2 ) {
        bottomLeftX_5 = AJS.easeInBack( 30, 130, lineDisappearDurationInFrames_5, currentFrame_5 - lineDisappearDelay_5*2 );
        bottomRightX_5 = AJS.easeInBack( 70, 170, lineDisappearDurationInFrames_5, currentFrame_5 - lineDisappearDelay_5*2 );
        bottomLine_5.setAttribute( "d", "M"+bottomLeftX_5+",63 L"+bottomRightX_5+",63 Z" );
        bottomLineOpacity_5 = AJS.linear( 1, 0, lineDisappearDurationInFrames_5*0.85, currentFrame_5 - lineDisappearDelay_5*2 );
        bottomLine_5.style.opacity = bottomLineOpacity_5;
      }
			//recursion
			menuDisappearAnimation_5();
		});
	} else {
		currentFrame_5 = 0;
		menuDisappearComplete_5 = true;
		openMenuAnimation_5();
	}
}

///Arrow Appear
function arrowAppearAnimation_5() {
	currentFrame_5++;
	if ( currentFrame_5 <= arrowAppearDurationInFrames_5 ) {
		window.requestAnimationFrame( ()=> { 
			//top line
			topLeftX_5 = AJS.easeInQuad( 110, 50, arrowAppearDurationInFrames_5, currentFrame_5 );
			topLeftY_5 = AJS.easeInQuad( 100, 40, arrowAppearDurationInFrames_5, currentFrame_5 );
			bottomRightX_5 = AJS.easeInQuad( 130, 70, arrowAppearDurationInFrames_5, currentFrame_5 );
			bottomRightY_5 = AJS.easeInQuad( 120, 60, arrowAppearDurationInFrames_5, currentFrame_5 );
			topLine_5.setAttribute( "d", "M" + topLeftX_5 + "," + topLeftY_5 + " L" + bottomRightX_5 + "," + bottomRightY_5 );
			topLineOpacity_5 = AJS.easeInExpo( 0, 1, arrowAppearDurationInFrames_5, currentFrame_5 );
			topLine_5.style.opacity = topLineOpacity_5;
			//bottom line
			bottomLeftX_5 = AJS.easeInQuad( -30, 30, arrowAppearDurationInFrames_5, currentFrame_5 );
			bottomLeftY_5 = AJS.easeInQuad( 120, 60, arrowAppearDurationInFrames_5, currentFrame_5 );
			topRightX_5 = AJS.easeInQuad( -10, 50, arrowAppearDurationInFrames_5, currentFrame_5 );
			topRightY_5 = AJS.easeInQuad( 100, 40, arrowAppearDurationInFrames_5, currentFrame_5 );
			bottomLine_5.setAttribute( "d", "M" + bottomLeftX_5 + "," + bottomLeftY_5 + " L" + topRightX_5 + "," + topRightY_5 );
      bottomLineOpacity_5 = AJS.easeInExpo( 0, 1, arrowAppearDurationInFrames_5, currentFrame_5 );
      bottomLine_5.style.opacity = bottomLineOpacity_5;      
			//recursion
			arrowAppearAnimation_5();
		});
	} else {
		currentFrame_5 = 0;
		arrowAppearComplete_5 = true;
		openMenuAnimation_5();
	}
}

///Combined Open Menu Animation
function openMenuAnimation_5() {
	if ( !menuDisappearComplete_5 ) { 
		menuDisappearAnimation_5();
	} else if ( !arrowAppearComplete_5) {
		arrowAppearAnimation_5();
	}
}

///Arrow Disappear
function arrowDisappearAnimation_5() {
	currentFrame_5++;
	if ( currentFrame_5 <= arrowDisappearDurationInFrames_5 ) {
		window.requestAnimationFrame( ()=> {
      //top line
			topLeftX_5 = AJS.easeInQuad( 50, 110, arrowAppearDurationInFrames_5, currentFrame_5 );
			topLeftY_5 = AJS.easeInQuad( 40, 100, arrowAppearDurationInFrames_5, currentFrame_5 );
			bottomRightX_5 = AJS.easeInQuad( 70, 130, arrowAppearDurationInFrames_5, currentFrame_5 );
			bottomRightY_5 = AJS.easeInQuad( 60, 120, arrowAppearDurationInFrames_5, currentFrame_5 );
			topLine_5.setAttribute( "d", "M" + topLeftX_5 + "," + topLeftY_5 + " L" + bottomRightX_5 + "," + bottomRightY_5 );
			topLineOpacity_5 = AJS.easeInExpo( 1, 0, arrowAppearDurationInFrames_5, currentFrame_5 );
			topLine_5.style.opacity = topLineOpacity_5;
			//bottom line
			bottomLeftX_5 = AJS.easeInQuad( 30, -30, arrowAppearDurationInFrames_5, currentFrame_5 );
			bottomLeftY_5 = AJS.easeInQuad( 60, 120, arrowAppearDurationInFrames_5, currentFrame_5 );
			topRightX_5 = AJS.easeInQuad( 50, -10, arrowAppearDurationInFrames_5, currentFrame_5 );
			topRightY_5 = AJS.easeInQuad( 40, 100, arrowAppearDurationInFrames_5, currentFrame_5 );
			bottomLine_5.setAttribute( "d", "M" + bottomLeftX_5 + "," + bottomLeftY_5 + " L" + topRightX_5 + "," + topRightY_5 );
      bottomLineOpacity_5 = AJS.easeInExpo( 1, 0, arrowAppearDurationInFrames_5, currentFrame_5 );
      bottomLine_5.style.opacity = bottomLineOpacity_5; 
			//recursion
			arrowDisappearAnimation_5();
		});
	} else {
		middleLine_5.style.opacity = "1";
		currentFrame_5 = 0;
		arrowDisappearComplete_5 = true;
		closeMenuAnimation_5();
	}
}

///Menu Appear
function menuAppearAnimation_5() {
	currentFrame_5++;
	if ( currentFrame_5 <= menuAppearDurationInFrames_5 ) {
		window.requestAnimationFrame( ()=> {  
			//top line
      if ( currentFrame_5 <= lineAppearDurationInFrames_5 ) {
        topLeftX_5 = AJS.easeOutBack( 130, 30, lineAppearDurationInFrames_5, currentFrame_5 );
        topRightX_5 = AJS.easeOutBack( 170, 70, lineAppearDurationInFrames_5, currentFrame_5 );
        topLine_5.setAttribute( "d", "M"+topLeftX_5+",37 L"+topRightX_5+",37 Z" );
        topLineOpacity_5 = AJS.linear( -2, 1, lineAppearDurationInFrames_5, currentFrame_5 );
        topLine_5.style.opacity = topLineOpacity_5;
      }
			//middle line
			if ( currentFrame_5 > lineAppearDelay_5 && currentFrame_5 <= lineAppearDurationInFrames_5 + lineAppearDelay_5 ) {
        middleLeftX_5 = AJS.easeOutBack( 130, 30, lineAppearDurationInFrames_5, currentFrame_5 - lineAppearDelay_5 );
        middleRightX_5 = AJS.easeOutBack( 170, 70, lineAppearDurationInFrames_5, currentFrame_5 - lineAppearDelay_5 );
        middleLine_5.setAttribute( "d", "M"+middleLeftX_5+",50 L"+middleRightX_5+",50 Z" );
        middleLineOpacity_5 = AJS.easeOutBack( -2, 1, lineAppearDurationInFrames_5, currentFrame_5 - lineAppearDelay_5 );
        middleLine_5.style.opacity = middleLineOpacity_5;
			}
			//bottom line
			if ( currentFrame_5 > lineAppearDelay_5*2 ) {
        bottomLeftX_5 = AJS.easeOutBack( 130, 30, lineAppearDurationInFrames_5, currentFrame_5 - lineAppearDelay_5*2 );
        bottomRightX_5 = AJS.easeOutBack( 170, 70, lineAppearDurationInFrames_5, currentFrame_5 - lineAppearDelay_5*2 );
        bottomLine_5.setAttribute( "d", "M"+bottomLeftX_5+",63 L"+bottomRightX_5+",63 Z" );
        bottomLineOpacity_5 = AJS.easeOutBack( -2, 1, lineAppearDurationInFrames_5, currentFrame_5 - lineAppearDelay_5*2 );
        bottomLine_5.style.opacity = bottomLineOpacity_5;
			}
			//recursion
			menuAppearAnimation_5();
		});
	} else {
		currentFrame_5 = 0;
		menuAppearComplete_5 = true;
	}
}

///Close Menu Animation
function closeMenuAnimation_5() {
	if ( !arrowDisappearComplete_5 ) {
		arrowDisappearAnimation_5();
	} else if ( !menuAppearComplete_5 ) {
		menuAppearAnimation_5();
	}
}

///Events
icon_5.addEventListener( "click", ()=> { 
  if ( state_5 === "menu" ) {
  	openMenuAnimation_5();
  	state_5 = "arrow";
  	arrowDisappearComplete_5 = false;
		menuAppearComplete_5 = false;
  } else if ( state_5 === "arrow" ) {
  	closeMenuAnimation_5();
  	state_5 = "menu";
  	menuDisappearComplete_5 = false;
		arrowAppearComplete_5 = false;
  }
});



/////////////////////////////////////////////////////
/////////////////////  ICON 6  //////////////////////
/////////////////////////////////////////////////////

///Initiation Variables
var icon_6 = document.getElementById("b6");
var topLine_6 = document.getElementById("top-line-6");
var middleLine_6 = document.getElementById("middle-line-6");
var bottomLine_6 = document.getElementById("bottom-line-6");
var state_6 = "menu";  // can be "menu" or "arrow"
var topLineY_6;
var middleLineY_6;
var bottomLineY_6;
var topLeftX_6;
var topRightX_6;
var middleLeftX_6;
var middleRightX_6;
var bottomLeftX_6;
var bottomRightX_6;
var topLeftY_6;
var topRightY_6;
var middleLeftY_6;
var middleRightY_6;
var bottomLeftY_6;
var bottomRightY_6;

///Animation Variables
var segmentDuration_6 = 20;
var menuDisappearDurationInFrames_6 = segmentDuration_6;
var arrowAppearDurationInFrames_6 = segmentDuration_6;
var arrowDisappearDurationInFrames_6 = segmentDuration_6;
var menuAppearDurationInFrames_6 = segmentDuration_6;
var menuDisappearComplete_6 = false;
var arrowAppearComplete_6 = false;
var arrowDisappearComplete_6 = true;
var menuAppearComplete_6 = true;
var currentFrame_6 = 0;
var cPt_6 = { x: 50, y: 50 };  // center point
var tlPt_6 = { x: 30, y: 37 };  // top right point
var trPt_6 = { x: 70, y: 37 };  // top left point
var mlPt_6 = { x: 30, y: 50 };  // middle right point
var mrPt_6 = { x: 70, y: 50 };  // middle left point
var blPt_6 = { x: 30, y: 63 };  // bottom right point
var brPt_6 = { x: 70, y: 63 };  // bottom left point


///Position Rotation
function positionRotation( centerPoint, orbitPoint, angleInRads ) {
  var distance = Math.sqrt( Math.pow( orbitPoint.x-centerPoint.x, 2 ) + Math.pow( orbitPoint.y-centerPoint.y, 2 ) );
  orbitPoint.x = centerPoint.x + Math.cos( angleInRads ) * distance;
  orbitPoint.y = centerPoint.y + Math.sin( angleInRads ) * distance;
}

///Menu Disappear
function menuDisappearAnimation_6() {
	currentFrame_6++;
	if ( currentFrame_6 <= menuDisappearDurationInFrames_6 ) {
		window.requestAnimationFrame( ()=> { 
      var rotation = Math.PI*0.5;  // menu disappear rotation
			//top line
      var tlAng = AJS.easeInBack( 3.7179, 3.7179+rotation, menuDisappearDurationInFrames_6, currentFrame_6 );
      var trAng = AJS.easeInBack( 5.7068, 5.7068+rotation, menuDisappearDurationInFrames_6, currentFrame_6 );
      positionRotation( cPt_6, tlPt_6, tlAng );
      positionRotation( cPt_6, trPt_6, trAng );
      topLine_6.setAttribute( "d", "M"+tlPt_6.x+","+tlPt_6.y+" L"+trPt_6.x+","+trPt_6.y+" Z" );
      //middle line
      var mlAng = AJS.easeInBack( Math.PI, Math.PI+rotation, menuDisappearDurationInFrames_6, currentFrame_6 );
      var mrAng = AJS.easeInBack( 0, rotation, menuDisappearDurationInFrames_6, currentFrame_6 );
      positionRotation( cPt_6, mlPt_6, mlAng );
      positionRotation( cPt_6, mrPt_6, mrAng );
      middleLine_6.setAttribute( "d", "M"+mlPt_6.x+","+mlPt_6.y+" L"+mrPt_6.x+","+mrPt_6.y+" Z" );
      //bottom line
      var blAng = AJS.easeInBack( 2.5652, 2.5652+rotation, menuDisappearDurationInFrames_6, currentFrame_6 );
      var brAng = AJS.easeInBack( 0.5763, 0.5763+rotation, menuDisappearDurationInFrames_6, currentFrame_6 );
      positionRotation( cPt_6, blPt_6, blAng );
      positionRotation( cPt_6, brPt_6, brAng );
      bottomLine_6.setAttribute( "d", "M"+blPt_6.x+","+blPt_6.y+" L"+brPt_6.x+","+brPt_6.y+" Z" );
			//recursion
			menuDisappearAnimation_6();
		});
	} else {
		currentFrame_6 = 0;
		menuDisappearComplete_6 = true;
		openMenuAnimation_6();
	}
}

///Arrow Appear
function arrowAppearAnimation_6() {
	currentFrame_6++;
	if ( currentFrame_6 <= arrowAppearDurationInFrames_6 ) {
    tlPt_6 = { x: 60, y: 30 };
    trPt_6 = { x: 40, y: 50 };
    mlPt_6 = { x: 40, y: 50 };
    mrPt_6 = { x: 60, y: 70 };
		window.requestAnimationFrame( ()=> { 
      var rotation = Math.PI*0.5;  // arrow appear rotation
			//top line
      var tlAng = AJS.easeOutBack( 5.1759, 5.1759+rotation, arrowAppearDurationInFrames_6, currentFrame_6 );
      var trAng = AJS.easeOutBack( Math.PI, Math.PI+rotation, arrowAppearDurationInFrames_6, currentFrame_6 );
      positionRotation( cPt_6, tlPt_6, tlAng );
      positionRotation( cPt_6, trPt_6, trAng );
      topLine_6.setAttribute( "d", "M"+tlPt_6.x+","+tlPt_6.y+" L"+trPt_6.x+","+trPt_6.y+" Z" );
			//center line
      var mlAng = AJS.easeOutBack( Math.PI, Math.PI+rotation, arrowAppearDurationInFrames_6, currentFrame_6 );
      var mrAng = AJS.easeOutBack( 1.1072, 1.1072+rotation, arrowAppearDurationInFrames_6, currentFrame_6 );
      positionRotation( cPt_6, mlPt_6, mlAng );
      positionRotation( cPt_6, mrPt_6, mrAng );
      middleLine_6.setAttribute( "d", "M"+mlPt_6.x+","+mlPt_6.y+" L"+mrPt_6.x+","+mrPt_6.y+" Z" );
      //bottom line
      bottomLine_6.style.opacity = 0;
			//recursion
			arrowAppearAnimation_6();
		});
	} else {
		currentFrame_6 = 0;
		arrowAppearComplete_6 = true;
		openMenuAnimation_6();
	}
}

///Combined Open Menu Animation
function openMenuAnimation_6() {
	if ( !menuDisappearComplete_6 ) { 
		menuDisappearAnimation_6();
	} else if ( !arrowAppearComplete_6) {
		arrowAppearAnimation_6();
	}
}

///Arrow Disappear
function arrowDisappearAnimation_6() {
	currentFrame_6++;
	if ( currentFrame_6 <= arrowDisappearDurationInFrames_6 ) {
		window.requestAnimationFrame( ()=> { 
      var rotation = Math.PI*0.5;  // arrow disapear rotation
			//top line
      var tlAng = AJS.easeInBack( 0.4635, 0.4635+rotation, arrowDisappearDurationInFrames_6, currentFrame_6 );
      var trAng = AJS.easeInBack( Math.PI*1.5, Math.PI*1.5+rotation, arrowDisappearDurationInFrames_6, currentFrame_6 );
      positionRotation( cPt_6, tlPt_6, tlAng );
      positionRotation( cPt_6, trPt_6, trAng );
      topLine_6.setAttribute( "d", "M"+tlPt_6.x+","+tlPt_6.y+" L"+trPt_6.x+","+trPt_6.y+" Z" );
			//center line
      var mlAng = AJS.easeInBack( Math.PI*1.5, Math.PI*1.5+rotation, arrowDisappearDurationInFrames_6, currentFrame_6 );
      var mrAng = AJS.easeInBack( 2.6779, 2.6779+rotation, arrowDisappearDurationInFrames_6, currentFrame_6 );
      positionRotation( cPt_6, mlPt_6, mlAng );
      positionRotation( cPt_6, mrPt_6, mrAng );
      middleLine_6.setAttribute( "d", "M"+mlPt_6.x+","+mlPt_6.y+" L"+mrPt_6.x+","+mrPt_6.y+" Z" );
      //bottom line
      bottomLine_6.style.opacity = 0;
			//recursion
			arrowDisappearAnimation_6();
		});
	} else {
		middleLine_6.style.opacity = "1";
		currentFrame_6 = 0;
		arrowDisappearComplete_6 = true;
		closeMenuAnimation_6();
	}
}

///Menu Appear
function menuAppearAnimation_6() {
	currentFrame_6++;
	if ( currentFrame_6 <= menuAppearDurationInFrames_6 ) {
    tlPt_6 = { x: 37, y: 70 };
    trPt_6 = { x: 37, y: 30 };
    mlPt_6 = { x: 50, y: 70 };
    mrPt_6 = { x: 50, y: 30 };
    bottomLine_6.style.opacity = 1;
		window.requestAnimationFrame( ()=> {  
      var rotation = Math.PI*0.5;  // menu appear rotation
			//top line
			var tlAng = AJS.easeOutBack( 2.1471, 2.1471+rotation, menuDisappearDurationInFrames_6, currentFrame_6 );
			var trAng = AJS.easeOutBack( 4.1360, 4.1360+rotation, menuDisappearDurationInFrames_6, currentFrame_6 );
			positionRotation( cPt_6, tlPt_6, tlAng );
			positionRotation( cPt_6, trPt_6, trAng );
			topLine_6.setAttribute( "d", "M"+tlPt_6.x+","+tlPt_6.y+" L"+trPt_6.x+","+trPt_6.y+" Z" );
      //middle line
      var mlAng = AJS.easeOutBack( Math.PI*0.5, Math.PI*0.5+rotation, menuDisappearDurationInFrames_6, currentFrame_6 );
      var mrAng = AJS.easeOutBack( Math.PI*1.5, Math.PI*1.5+rotation, menuDisappearDurationInFrames_6, currentFrame_6 );
      positionRotation( cPt_6, mlPt_6, mlAng );
      positionRotation( cPt_6, mrPt_6, mrAng );
      middleLine_6.setAttribute( "d", "M"+mlPt_6.x+","+mlPt_6.y+" L"+mrPt_6.x+","+mrPt_6.y+" Z" );
      //bottom line
      var blAng = AJS.easeOutBack( 0.9944, 0.9944+rotation, menuDisappearDurationInFrames_6, currentFrame_6 );
      var brAng = AJS.easeOutBack( 5.2887, 5.2887+rotation, menuDisappearDurationInFrames_6, currentFrame_6 );
      positionRotation( cPt_6, blPt_6, blAng );
      positionRotation( cPt_6, brPt_6, brAng );
      bottomLine_6.setAttribute( "d", "M"+blPt_6.x+","+blPt_6.y+" L"+brPt_6.x+","+brPt_6.y+" Z" );
			//recursion
			menuAppearAnimation_6();
		});
	} else {
		currentFrame_6 = 0;
		menuAppearComplete_6 = true;
	}
}

///Close Menu Animation
function closeMenuAnimation_6() {
	if ( !arrowDisappearComplete_6 ) {
		arrowDisappearAnimation_6();
	} else if ( !menuAppearComplete_6 ) {
		menuAppearAnimation_6();
	}
}

///Events
icon_6.addEventListener( "click", ()=> { 
  if ( state_6 === "menu" ) {
  	openMenuAnimation_6();
  	state_6 = "arrow";
  	arrowDisappearComplete_6 = false;
		menuAppearComplete_6 = false;
  } else if ( state_6 === "arrow" ) {
  	closeMenuAnimation_6();
  	state_6 = "menu";
  	menuDisappearComplete_6 = false;
		arrowAppearComplete_6 = false;
  }
});e

///////////////// DEMO //////////////////

function playDemo() { 
  setTimeout( function() { icon_1.click(); }, 1000 );
  setTimeout( function() { icon_1.click(); }, 2000 );
  setTimeout( function() { icon_2.click(); }, 3000 );
  setTimeout( function() { icon_2.click(); }, 4000 );
  setTimeout( function() { icon_3.click(); }, 5000 );
  setTimeout( function() { icon_3.click(); }, 6000 );
  setTimeout( function() { icon_4.click(); }, 7000 );
  setTimeout( function() { icon_4.click(); }, 8000 );
  setTimeout( function() { icon_5.click(); }, 9000 );
  setTimeout( function() { icon_5.click(); }, 10000 );
  setTimeout( function() { icon_6.click(); }, 11000 );
  setTimeout( function() { icon_6.click(); playDemo(); }, 12000 );
}

document.addEventListener("DOMContentLoaded", function(event) { 
  //playDemo();
});
Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well of many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How to Make the Bootstrap 4 Navbar Dropdown Work on Hover Instead of Click

If you have ever created your own Bootstrap Navbar with a dropdown menu, the first thing you may notice is that you have to click the parent link to reveal the sub-menu. This is an intentional design decision according to Mark Otto:

“The purpose of a hover state is to indicate something is clickable (underlined text) or to provide some quick information (full URL in a tooltip). The purpose of a click is to actually do something, to take explicit action.” – Mark Otto

It’s a valid point but there are always situations where people prefer the hover method. To be honest, not a lot of menus even feature the down chevron, so the hover element makes it clearer that there are sub-menu items to be clicked.

In this tutorial, we are going to be using Bootstrap 4 with the Jumbotron template as an example to show you how simple it is to achieve.

Prefer to dive straight into the CodePen, then click here.

Let’s Begin

Okay, let’s say we have the following HTML markup:


   <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarsExampleDefault">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
        <div class="dropdown-menu" aria-labelledby="dropdown01">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

<main role="main">

  <!-- Main jumbotron for a primary marketing message or call to action -->
  <div class="jumbotron">
    <div class="container">
      <h1 class="display-3">Menu Dropdown on Hover</h1>
      <p>Hey ho, so let's make your dropdown menu work on hover instead of click.</p>
      <p><a href="https://silvawebdesigns.com/" target="_blank" class="btn btn-primary btn-lg" role="button" rel="noopener noreferrer">Learn more &raquo;</a></p>
    </div>
  </div>

  <div class="container">
    <!-- Example row of columns -->
    <div class="row">
      <div class="col-md-4">
        <h2>Learn</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
      </div>
      <div class="col-md-4">
        <h2>Code</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
      </div>
      <div class="col-md-4">
        <h2>Repeat</h2>
        <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
      </div>
    </div>

    <hr>

  </div> <!-- /container -->

</main>

<footer class="container">
  <p>&copy; Silva Web Designs 2020</p>
</footer>

Now, the important part, to get the CSS to work on hover instead of click, we will be adding the following CSS:


body {
    padding-top: 60px;
    padding-bottom: 40px;
}

.dropdown-menu .sub-menu {
    left: 100%;
    position: absolute;
    top: 0;
    visibility: hidden;
    margin-top: -1px;
}

.dropdown-menu li:hover .sub-menu {
    visibility: visible;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
    margin-top: 0;
}

.navbar .sub-menu:before {
    border-bottom: 7px solid transparent;
    border-left: none;
    border-right: 7px solid rgba(0, 0, 0, 0.2);
    border-top: 7px solid transparent;
    left: -7px;
    top: 10px;
}
.navbar .sub-menu:after {
    border-top: 6px solid transparent;
    border-left: none;
    border-right: 6px solid #fff;
    border-bottom: 6px solid transparent;
    left: 10px;
    top: 11px;
    left: -6px;
}

The key feature of the CSS is simply adding display: block; to the following class element; .dropdown:hover .dropdown-menu

And it’s really as simple as that.

We will need to include the Bootstrap Assets which as of the time of writing, the latest are:

With the CSS code, simply add the stylesheet <link> into your <head> before all other stylesheets to load your CSS.


<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

The with the JS, they require jQuery, and their own JavaScript plugins. Place the following scripts near the end of your pages, right before the closing tag, to enable them. jQuery must come first, then the Bootstrap JavaScript plugins.

Bootstrap uses the jQuery’s slim build, but the full version is also supported:


<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

And there we have it, it’s as simple as that really! Some common problems can be due to the order/positioning of the CSS/JS files, but other than that, it’s a simple feature to implement. You can also make it a bit fancier as well and add some animations into the mix to make the dropdown menu slide down/up. If you would like any help with this, don’t hesitate to get back to us in the comments and we’ll show you how it’s done.

We hope you’ve enjoyed this article and happy coding devs!

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well of many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share