[contact-form-7 id="24078" title="Feedback EN"]

Gradient Menu Effect

This is a Script that allows you to add special effects to your website page menu. All of these effects are based on the smooth movement of a menu item background image. The most common case is when the background image is a smooth color gradient. But you can use other effects as well.

In order to make the script work, the index-#.html file with the menu should contain these lines of HTML code:

The menu.js file contains these lines of code that initialize the script functionality:

Here the script attributes define the following values:
•  backgroundPosition: “(0 -250px)” – maximum width of the slide when it’s opened;
•  duration: 500 – total animation duration;
Script is smoothly changing backgroundPosition value, thus menu background animates. Here the animation effect is added to bulleted list with .nav class.

Below you can see the HTML script representation:

A bulleted list is used to create a menu.

You can find script related stylesheet in the main style.css file. You will need to modify the following styles:

It is important to specify an active class (.active) for a menu item on a correspondent page.

Gradient Menu Effect, 5.0 out of 5 based on 1 rating