[ WordPress Tips ] Two WordPress Menu Animation Tricks

WordPress Menu Animation Introduction

WordPress menu is very easy to add and work with: you simply go to the Admin panel -> Appearance -> Menus to add menus and menu items.

Yet such convenience sacrifices the flexibility of doing some WordPress menu animation tricks. The biggest inflexibility is that WordPress only allows text but not HTML structure inside each WordPress menu items.

WordPress menu item setting. It only allows text but not HTML.

Here we will show how to use WordPress’ advanced option CSS Classes and JavaScript to do two WordPress menu animation tricks with icons:

1. Icon move-in when hovered.
2. Switch between text and icon.

We will be using Font Awesome for the icons in the animation.

Turn on CSS Classes Options

CSS Classes option adds a custom class for that particular WordPress menu item.  You can turn on CSS Classes options by the following step:

• Go to the menu setting page by Admin panel -> Appearance -> Menus
• On page’s top right click Screen Options, and check CSS Classes under Show advanced menu properties.

After you do so, when you expand the WordPress menu item drop-down you will see CSS Classes option.

WordPress Menu Animation Trick #1: Icon Move-in while hovered

The first WordPress menu animation trick is to move in an icon when you hover on a particular menu item. You can see the effect at the footer menu of my site Modern Black Hand.

When hovered the icon moves in from the top.

Animation Basics:

The basics of icon move-in animation is as follows:

1. Specify the class of WordPress menu items in the admin panel.
2. Use overflow:hidden to hide content when the icon or text is outside of WordPress menu item.
3. Set CSS transition property for Wordpress menu item text (as <a> tag).
4. Set CSS a:before position, text location and transition property to properly display the icon.
5. Set the WordPress menu item ( <a> tag) animation action to move down while hovered.
6. Set specific Font Awesome icon for each WordPress menu item’s CSS property a:before by the class in step No. 1.

Notice for this animation no JavaScript is needed: it’s pure CSS animation!

CSS Details:

Below is the Gist file of the CSS codes inside style.css:

Some notes:

• Line 10-12: this is where we set the CSS transition property. top 0.3s means the object’s top coordinate will be transformed, in a duration of 0.3 seconds. See here for other options.
• Line 31-33: here we specifies how the transform ends when hovered. translateY(100%) means after transformation the object will move down 100% of the object’s height. See here for more options.
• Line 17-20: here we set the right position, size, and text position for the :before property. Since we transform down, the initial position should be above (top: -100%;), having the same size (height: 100%; width: 100%), and text in the center (text-align: center;)
• Line 39-40: this is how we specify which Font Awesome icon to use in CSS.

Extension:

Based on the same basics, you can easily modify the above wordpress menu animation to move icon in from left, right or down, or even diagonal!

WordPress Menu Animation Trick #2: Switch between text and icon

Another cool WordPress menu animation trick is to switch between text and icon. You can see the effect at the header menu of my site Modern Black Hand.

A snapshot of icon/text switching.

This animation is mostly done in your WordPress theme JavaScript file rather than in CSS.

Animation Basics:

The basics of icon-text switching animation is as follows:

1. Specify the class of WordPress menu items in the admin panel.
2. Use jQuery’s wrap function to wrap wordpress menu item text with a class name for toggling (eg. menu-text-switch).
3. Fix wordpress menu item width so the whole menu doesn’t change its size while switching.
4. Use jQuery’s prepend function to add html codes of each icon.
5. Use a combination of jQuery functions setTimeout and setInterval to create a function that (1) delay switching for a certain milliseconds (2) toggle display alternatively between text and icon for a certain milliseconds period.

JavaScript Details:

Below is the Gist file of the JavaScript codes inside my theme’s JS file (eg: main.js):

Some notes:

• Line 9-15 is due to me using Bootstrap, to account for header menu style change for a certain browser window width (eg: 768 px). Line 15 the $my_width - 30 is to account for my padding setting.

Extension:

The same principle can be used for switching between different texts (like quotes), or even different images!

Also Recommended:

[ WordPress Tips ] Adding Bootstrap Dropdown Menu

[Tutorial #26] Search in WordPress 2: Search Menu Tab

Tutorial: Building a WordPress Multiple Topics Blog

Like My Posts? Subscribe at the Bottom and Get Latest Post Email Updates!