Gantry 5 demo website

Introduction

A job see on tympanus.net (Codrops) by Mary Lou about some menu link hover effects for your inspiration (Powered by CSS and JavaScript for individual letter animations) gave me idea of this particle. I have added also a Simple menu option.



Configuration

 

Main Options - Menu Blocks

particle menuhover 1.

 

OptionDescription
Title Enter a title for your menu links. Logically we leave empty
CSS Classes Set the CSS class(es) you would like to have apply at the particle level..
Configuration Preset Select the predefined layout style you want to use for the element. You can choose: Simple menu, Menu Adsila, Ama, Dutsu, Inola, Mohe, Salal, Tsula, Yona
Menus Create your menu blocks (List).

Options of each Menu Block

 

particle menuhover 2

 

OptionDescription
Menu Name Enter a Name for each block of menu links
Menu Items Create your menu link list

 

 

Options & Description of menu links

particle menuhover 3

 

OptionDescription
SubTitle Entrez un Sous titre pour vos liens menu (Not used for Simple menu)
Icon Only for "Simple Menu" - Choose the Font Awesome icon you want to have appear.
Link Set the link clicking on the item will take you to.
Target Set the target for the link.

Details & Options for each menu

Menu Adsila

Demo on Codrops here - Demo Particle Menu Hover Effects En Toutes Lettres here
Light background, 2 predifined menu colors
You can modified colors line 86 to 89 File etl_menuhovereffect.scss

$color-menuname: #57585c;
$color-adsila-1: #fe628e;
$color-adsila-2: #6265fe;

Menu Ama

Demo on Codrops here - Demo Particle Menu Hover Effects En Toutes Lettres here
Light background; 4 predifined menu colors
You can modified colors line 199 & 213 to 220 File etl_menuhovereffect.scss

$color-menuname: $base-text-color;
menu__item:first-child {--menu-item-color:#9437ff;}
.menu__item:nth-child(2) {--menu-item-color:#ff84fd;}
.menu__item:nth-child(3) {--menu-item-color:#6cccff;}
.menu__item:nth-child(4) {--menu-item-color:#3dd2c1;}
.menu__item:nth-child(5) {--menu-item-color:#9437ff;}
.menu__item:nth-child(6) {--menu-item-color:#ff84fd;}
.menu__item:nth-child(7) {--menu-item-color:#6cccff;}
.menu__item:nth-child(8) {--menu-item-color:#3dd2c1;}

Menu Dutsu

Demo on Codrops here - Demo Particle Menu Hover Effects En Toutes Lettres here
Dark background; 1 predifined menu colors
You can modified colors line 292 to 295 File etl_menuhovereffect.scss

$color-menuname: #fff;
$color-background: #eb2141;
$color-submenuname: #565656;
$link-hover:$color-menuname;

Menu Inola

Demo on Codrops here - Demo Particle Menu Hover Effects En Toutes Lettres here
Dark background; 1 predifined menu colors
You can modified colors line 360 to 362 File etl_menuhovereffect.scss

$color-menuname: #fff;
$color-background: #1f1e1e; // Doit être identique couleur de fond
$color-link: #e5d338;

Menu Mohe

Demo on Codrops here - Demo Particle Menu Hover Effects En Toutes Lettres here
Dark background, 1 predifined menu colors
You can modified colors line 440 to 442 File etl_menuhovereffect.scss

$color-menuname: #171754;
$color-submenuname: #fff;
$color-submenunamebg:$color-submenuname;

Menu Salal

Demo on Codrops here - Demo Particle Menu Hover Effects En Toutes Lettres here
Dark background, 4 predifined menu colors
You can modified colors line 515 to 517 et 533 to 540 File etl_menuhovereffect.scss

$color-menuname: #fff;
$color-submenuname: #515152;
$color-hover:$color-menuname;

.menu__item:first-child {--menu-item-color:#f85f83;}
.menu__item:nth-child(2) {--menu-item-color:#f7bd1f;}
.menu__item:nth-child(3) {--menu-item-color:#24d261;}
.menu__item:nth-child(4) {--menu-item-color:#6537f7;}
.menu__item:nth-child(5) {--menu-item-color:#f7bd1f;}
.menu__item:nth-child(6) {--menu-item-color:#f7bd1f;}
.menu__item:nth-child(7) {--menu-item-color:#24d261;}
.menu__item:nth-child(8) {--menu-item-color:#6537f7;}

Menu Tsula

Demo on Codrops here - Demo Particle Menu Hover Effects En Toutes Lettres here
Dark background, 2 predifined menu colors
You can modified colors line 596 to 599 File etl_menuhovereffect.scss

$color-menuname: #5a5bd3;
$color-background: #5a5bd3;
$color-link: #222328;
$color-submenuname: #999caa;
font-family: $font-family-mono; // you can modified

Menu Yona

Demo on Codrops here - Demo Particle Menu Hover Effects En Toutes Lettres here
Dark background (green), 1 predifined menu color
You can modified colors line 657 to 659 File etl_menuhovereffect.scss

$color-menuname: #fff;
$color-background: $color-menuname;
$color-submenuname: #fff;

 

 

Examples

Simple Menu

Menu name 1
Menu name 2
Menu name 3