1. Home
  2. /
  3. Web Design & Development
  4. /
  5. HTML
  6. /
  7. Add toggle up and down arrows with CSS transform and transition in a Menu – WordPress Mobile menu toggle

Add toggle up and down arrows with CSS transform and transition in a Menu – WordPress Mobile menu toggle

add-toggle-up-and-down-arrows-with-css-transform-and-transition-in-a-menu-wordpress-mobile-menu-toggle

Introduction

Ever wondered implementing a Toggle up & down arrows in a WordPress mobile menu toggle on your own with simple coding. Here in this article, I will provide a very simple example with all the necessary code to get it done and implemented on your website in no time.

What is Toggle Menu?

Well, as the name suggests – a toggle menu is something that has an event attached to a collection of menu items (or, page URLs). An event could be an action that usually happens when the user makes an interaction on your website through clicks or taps. So, in the case of menu toggle or toggle menu – By default when a page is loaded, all the parent and child items of a menu (usually in the header of the page) are hidden and instead of that, a Menu bar is shown. Clicking on the menu bar opens up the menu items or simply makes all the menu items visible on the page.

Menu bar

A toggle menu concept could be implemented for your desktop, tablet or iPad, or mobile users. It takes very less space to display the menu bar as shown above and on tap or click you can display all the menu items. Once opened, it will show all the menu items and a close icon or button to close the toggled menu.

Open toggle menu

Now, in this example… we are not discussing how to implement a mobile menu toggle. Instead we will be understanding how to display an Up and Down arrow right next to the menu items indicating the menu has children items.

How to show Up & Down toggle arrows right next to a parent menu item (on mobile)?

Well, I will be sharing the needful CSS, javascript, or jQuery and the HTML structure to implement this on your website.

1. CSS

body {
  font-family: sans-serif;
}

.toggle-btn {
  position: relative;
  display: block;
  background: #3890b3;
  color: white;
  width: 300px;
  padding: 10px;
  text-decoration: none;
  margin-bottom: 5px;
}

.arrow {
  position: absolute;
  top: 20px;
  right: 20px;
}

.arrow::before,
.arrow::after {
  position: relative;
  content: '';
  display: block;
  width: 10px;
  height: 1px;
  background: white;
  transition: 0.3s ease-in-out;
}

.arrow::before {
  transform: rotate(45deg);
}

.arrow::after {
  left: 6px;
  top: -1px;
  transform: rotate(-45deg);
}


.toggle-btn {
  background: #13749a;
}

.toggle-btn.active .arrow::before {
  transform: rotate(-45deg);
}

.toggle-btn.active .arrow::after {
  transform: rotate(45deg);
}

2. Javascript or jQuery

$('.toggle-btn').on('click', function() {
  $(this).toggleClass('active')
});

3. HTML Structure for Menu

<a class="toggle-btn" href="#">
  Your Parent Menu
  <span class="arrow"></span>
</a>
<a class="toggle-btn" href="#">
  Your Parent Menu
  <span class="arrow"></span>
</a>
<a class="toggle-btn" href="#">
  Your Parent Menu
  <span class="arrow"></span>
</a>
Reviews & Ratings Get your stoe online with Shopify in 60 minutes Shop Now