Mandala   / / / / / / / / / / / /   / / / / / / / / / / / /   / / / / / / / / / / / /   / / / / / / / / / / / /   / / / / / / / / / / / /   / / / / / / / / / / / /   / / / / / / / / / / / /  + + + + + +  + + + + + +  + + + + + +  + + + + + +  + + + + + +  + + + + + +  + + + + + +{ { {} } } }  { { {} } } }  { { {} } } }  { { {} } } }  { { {} } } }  { { {} } } }      ../../    ../../    ../../    ../../    ../../    ../../    ../../ <></><></><></> <> </><></><></> <> </><></><></> <> </><></><></> <> </><></><></> <> </>

Creating a Responsive Animated Sliding Tab Menu

This tutorial demonstrates creating a sliding tab menu using HTML, CSS, and jQuery. Included is a walk-through with code, steps, and examples.

Sometimes you arrive at a question, how to make an animated tab menu? Although the difficulties may seem high, you have arrived at an article to show you how simple it can be.

Creating a Sliding Animated Menu Using HTML and CSS
Creating a Sliding Animated Menu Using HTML and CSS

The image above has a sliding tab menu containing a home, account, cart, and menu button. To illustrate how it works, when a teal indicator is active, a page associated with that tab is open and active on a user’s mobile device, so you change the page by clicking another button.

Since we have shown you what we will create, let’s walk through how to create a responsive, animated sliding tab menu. In addition to a menu tutorial, we will also provide a theme picker to change the theme of a tab menu.

Fun Fact: This slider menu will also work on mobile devices with touch support!

Required Libraries

The first step is to include two JavaScript libraries before beginning this tutorial. These libraries are the Google Material Icons, which provides the icons, and the jQuery JavaScript library, which gives the tabs their effect and animation.

Besides the Google Material Icons library and jQuery in this project., the tutorial will require a basic knowledge of HTML, CSS, JavaScript, and jQuery.

Getting Started

Besides adding the libraries to a web page’s header, we must create an HTML that constructs a menu. First, we will want to write basic HTML code for a menu containing all the buttons and icons.

Mobile Container
Mobile Container

Two <div> elements hold almost all the elements required to create the buttons. The parent element has a class of .mobile-container, which contains a child element with a class of .container. These two containers help with horizontal alignment and responsiveness.

For the buttons, we use a <div> combined with a <span> element, and then a separate <div> with a class called .highlighter, which is the active tab indicator.

<div class="mobile-container">
  <div class="container">
    <div class="tab tab-home">
      <span class="material-icons">home</span>
    </div>
    <div class="tab tab-account">
      <span class="material-icons">person_outline</span>
    </div>
    <div class="tab tab-cart">
      <span class="material-icons">shopping_cart</span>
    </div>
    <div class="tab tab-menu">
      <span class="material-icons">menu</span>
    </div>
    <div class="highlighter"></div>
  </div>
</div>  

Theme Picker Buttons
Theme Picker Buttons

The next part of the project requires creating the HTML for a theme picker so we can demonstrate what a tab menu will look like using different themes. The theme selector isn’t necessary to implement the project’s slider menu; it is here for demonstration purposes only.

The HTML below, the container .theme picker contains a Classic, Dark, and Hue button that changes a theme of a sliding menu.

<div class="themePicker">
  <div class="theme themeClassic">
    <div class="type">Classic</div>
  </div>
  <div class="theme themeDark">
    <div class="type">Dark</div>
  </div>
  <div class="theme themeHue">
    <div class="type">Hue</div>  
  </div>
</div>

You can see the HTML output in a browser rendered without styles; it should look like the image below.

Animated Sliding Tab Menu Without CSS Styles
Animated Sliding Tab Menu Without CSS Styles

Adding CSS Styles to the Tab Menu

Let’s add some CSS to give the menu some style. You can also style the theme selector. Below, you will find all the CSS styles and properties required to provide a slider with its structure and color.

html {
  font-family: Roboto, arial, sans-serif;
}

.tab {
  width: 25%;
  float: left;
  height: 60px;
  line-height: 60px;
  text-align: center;
  padding-top: 4px;
}

.mobile-container {
  margin: 50px auto 0 auto;
  margin-top: 5%;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  height: 68px;
  position: absolute;
  background: white;
  max-width: 540px;
  min-width: 200px;
  bottom: 0;
  right: 20%;
  left: 20%;
}

.material-icons {
  font-size: 30px !important;
  margin-top: 15px;
  color: #373737;
  pointer-events: none;
}

.highlighter {
  height: 8px;
  background: #2f9599;
  border-radius: 0 0 10px 10px;
  position: absolute;
  top: -1px;
  left: 5%;
  right: 80%;
  transition: 200ms 50ms cubic-bezier(0.4, 0, 0.6, 1);
}

.themePicker {
  position: absolute;
  max-width: 540px;
  min-width: 200px;
  top: 0;
  right: 20%;
  left: 20%;
  margin: 0 auto;
}

.theme {
  width: 30%;
  float: left;
  height: 40px;
  line-height: 40px;
  margin: 20px 0.9% 0 1%;
  color: #000;
  border: 3px solid #708a9b;
  border-radius: 4px;
  background: #f6f6f6;
}

.type {
  text-align: center;
}

Now that we have added the new styles, we can see what the HTML page would render with the CSS properties. If rendered correctly, we can see a complete sliding tab model that is static or functionless. We now need to add JavaScript or jQuery to get some functions out of this modal.

Rendered Animated Sliding Tab Menu With HTML and CSS
Rendered Animated Sliding Tab Menu With HTML and CSS

Adding Functionality (JavaScript & jQuery)

To create functionality for this menu, we must use jQuery, a JavaScript library, to make the development of the animations and tabbing faster to write.

The first step is creating a function called animateMenu using JavaScript with four parameters.

function animateMenu(
directionOne, directionOnePercent, directionTwo, directionTwoPercent
) {}

The animateMenu function is called when there is a touch or click event on one of the four tabs. We pass an absolute position (right or left) and a percentage of the screen to the function. These values move the selected tab highlighter across a screen to a tab that has been clicked.

How the function works is we calculate the last known position of the .highlighter indicator using an absolute position value and compare it to a new one. If the new value exceeds the previous known, we tell the animation to move left.

(newValue > knownValue = moving left) 

If the new value is less than the old, the indicator slider will be moved to the right instead.

(newValue < knownValue = moving right) 

Now that we detect the direction we need to animate, we should place a delay when moving the indicator’s last corner. The delay gives the indicator a stretching and contracting animation as it moves across the tabs to its final destination.

The delay is created with a simple JavaScript setTimeout() function with 200ms as the time to delay.

setTimeout(function () {
  trans.css({
    right: directionOnePercent
  });
}, 200);

setTimeout(function () {
  trans.css({
    left: directionTwoPercent
  });
}, 200);

To detect a user click or touch events to call animateMenu function, we must use jQuery to bind an event handler to each tab. The four parameters will be passed to the function when triggering one of these event handlers.

$(".tab-home").on("click", function () {
  animateMenu("right", "80%", "left", "5%");
});

$(".tab-account").on("click", function () {
  animateMenu("right", "55%", "left", "30%");
});

$(".tab-cart").on("click", function () {
  animateMenu("right", "30%", "left", "55%");
});

$(".tab-menu").on("click", function () {
  animateMenu("right", "5%", "left", "80%");
});

The entire JavaScript and jQuery code allows the tab menu to change tabs and animates the active indicator element.

var knownPosition = 80;

$(".tab-home").on("click", function () {
  animateMenu("right", "80%", "left", "5%");
});

$(".tab-account").on("click", function () {
  animateMenu("right", "55%", "left", "30%");
});

$(".tab-cart").on("click", function () {
  animateMenu("right", "30%", "left", "55%");
});

$(".tab-menu").on("click", function () {
  animateMenu("right", "5%", "left", "80%");
});

function animateMenu(
  directionOne,
  directionOnePercent,
  directionTwo,
  directionTwoPercent
) {
  newPosition = directionOnePercent.replace(/[^0-9]/g, "");

  if (parseInt(newPosition) > parseInt(knownPosition)) {
    var trans = $(".highlighter").css({
      left: directionTwoPercent
    });
    setTimeout(function () {
      trans.css({
        right: directionOnePercent
      });
    }, 200);
  } else {
    var trans = $(".highlighter").css({
      right: directionOnePercent
    });
    setTimeout(function () {
      trans.css({
        left: directionTwoPercent
      });
    }, 200);
  }

  knownPosition = newPosition;
}

CSS Sliding Indicator Transition Effect

To achieve a sliding effect with a sliding menu. We need to include a CSS transition style. Without this transition effect, a tab will move instantly to a location we pass through as a parameter in the JavaScript function. Within the .highlighter CSS class, we will include the following:

.highlighter {
  transition: 200ms 50ms cubic-bezier(0.4, 0, 0.6, 1);
}
CSS Transition Easing for the Slider Highlighter
CSS Transition Easing for the Slider Highlighter

Without a CSS transition property, there will be no smooth transition easing for the highlighter to a new location.

How the Theme Picker Works

The theme picker built-in provides two other themes besides the classic; below, we also show a hue and dark theme.

Creating a Colored Basic Sliding Animated Menu
Creating a Colored Basic Sliding Animated Menu
Creating a Dark Basic Sliding Animated Menu
Creating a Dark, Basic Sliding Animated Menu

The theme picker jQuery code is similar to the tab menu in that it uses a on() function to bind event handlers to each of the three theme buttons. When one of these buttons is clicked, the theme changes to a set of styles within each event handler. For example, a classic theme would change the icon color, the background color of the .mobile-container, and the indicator’s background color.


$(".themeClassic").on("click", function () {
  $(".material-icons").css({
    color: "#373737"
  });
  $(".mobile-container").css({
    background: "#fff"
  });
  $(".highlighter").css({
    background: "#2f9599"
  });
});

$(".themeDark").on("click", function () {
  $(".material-icons").css({
    color: "#ccc"
  });
  $(".mobile-container").css({
    background: "black"
  });
  $(".highlighter").css({
    background: "#b06d19"
  });
});

$(".themeHue").on("click", function () {
  $(".material-icons").css({
    color: "#fff"
  });
  $(".mobile-container").css({
    background: "#4f053b"
  });
  $(".highlighter").css({
    background: "#b851a2"
  });
});

Rendered and Functional Sliding Tab Menu

Now that we’ve provided all the steps, including HTML, CSS, JavaScript, and JQuery. We can display a working functional version.

Remember that this animated menu works with a cursor on the desktop; mobile touch input can be added using the touchstart or touchend in a on() jQuery function.

HTML

<div class="mobile-container">
  <div class="container">
    <div class="tab tab-home">
      <span class="material-icons">home</span>
    </div>
    <div class="tab tab-account">
      <span class="material-icons">person_outline</span>
    </div>
    <div class="tab tab-cart">
      <span class="material-icons">shopping_cart</span>
    </div>
    <div class="tab tab-menu">
      <span class="material-icons">menu</span>
    </div>
    <div class="highlighter"></div>
  </div>
</div>

<div class="themePicker">
  <div class="theme themeClassic">
    <div class="type">Classic</div>
  </div>
  <div class="theme themeDark">
    <div class="type">Dark</div>
  </div>
  <div class="theme themeHue">
    <div class="type">Hue</div>
  </div>
</div>

CSS

html {
  font-family: Roboto, arial, sans-serif;
}

.tab {
  width: 25%;
  float: left;
  height: 60px;
  line-height: 60px;
  text-align: center;
  padding-top: 4px;
}

.mobile-container {
  margin: 50px auto 0 auto;
  margin-top: 5%;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  height: 68px;
  position: absolute;
  background: white;
  max-width: 540px;
  min-width: 200px;
  bottom: 0;
  right: 20%;
  left: 20%;
}

.material-icons {
  font-size: 30px !important;
  margin-top: 15px;
  color: #373737;
  pointer-events: none;
}

.highlighter {
  height: 8px;
  background: #2f9599;
  border-radius: 0 0 10px 10px;
  position: absolute;
  top: -1px;
  left: 5%;
  right: 80%;
  transition: 200ms 50ms cubic-bezier(0.4, 0, 0.6, 1);
}

.themePicker {
  position: absolute;
  max-width: 540px;
  min-width: 200px;
  top: 0;
  right: 20%;
  left: 20%;
  margin: 0 auto;
}

.theme {
  width: 30%;
  float: left;
  height: 40px;
  line-height: 40px;
  margin: 20px 0.9% 0 1%;
  color: #000;
  border: 3px solid #708a9b;
  border-radius: 4px;
  background: #f6f6f6;
}

.type {
  text-align: center;
}

jQuery and JavaScript

var knownPosition = 80;

$(".tab-home").on("click", function () {
  animateMenu("right", "80%", "left", "5%");
});

$(".tab-account").on("click", function () {
  animateMenu("right", "55%", "left", "30%");
});

$(".tab-cart").on("click", function () {
  animateMenu("right", "30%", "left", "55%");
});

$(".tab-menu").on("click", function () {
  animateMenu("right", "5%", "left", "80%");
});

function animateMenu(
  directionOne,
  directionOnePercent,
  directionTwo,
  directionTwoPercent
) {
  newPosition = directionOnePercent.replace(/[^0-9]/g, "");

  if (parseInt(newPosition) > parseInt(knownPosition)) {
    var trans = $(".highlighter").css({
      left: directionTwoPercent
    });
    setTimeout(function () {
      trans.css({
        right: directionOnePercent
      });
    }, 200);
  } else {
    var trans = $(".highlighter").css({
      right: directionOnePercent
    });
    setTimeout(function () {
      trans.css({
        left: directionTwoPercent
      });
    }, 200);
  }

  knownPosition = newPosition;
}

$(".themeClassic").on("click", function () {
  $(".material-icons").css({
    color: "#373737"
  });
  $(".mobile-container").css({
    background: "#fff"
  });
  $(".highlighter").css({
    background: "#2f9599"
  });
});

$(".themeDark").on("click", function () {
  $(".material-icons").css({
    color: "#ccc"
  });
  $(".mobile-container").css({
    background: "black"
  });
  $(".highlighter").css({
    background: "#b06d19"
  });
});

$(".themeHue").on("click", function () {
  $(".material-icons").css({
    color: "#fff"
  });
  $(".mobile-container").css({
    background: "#4f053b"
  });
  $(".highlighter").css({
    background: "#b851a2"
  });
});

Customizing the Slider Menu’s Icons

Remember that the slider menu in this article is customizable. You can change the style by changing the .mobile-container.highlighter, and .material-icons CSS classes. You can also change the menu icons using the Google Icon Library. There are many icons to choose from.

How To Change the Icons for an HTML Slider Menu
How To Change the Icons for an HTML Slider Menu

Customizing the Theme Colors

To customize theme colors, you must change the styles in the jQuery code for the theme picker. These styles will include a few properties for different classes.

  • .material-icons – CSS color property
  • .mobile-container – CSS background property
  • .highlighter – CSS background property

You can check out an article on creating CSS color palettes if you want to create new themes using different schemes.

Creating CSS Color Palettes
Creating CSS Color Palettes

Wrapping Up

After reading through this tutorial, you can create a slider menu. Include the CSS styles, HTML, and JavaScript to get this example working. Additionally, you can view this example of a sliding animated tab menu on codepen.io

Recommended Articles