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
- Options of each Menu Block
- Option of each Menu link
- Details & Options for each menu
- Examples
Main Options - Menu Blocks
.
| Option | Description |
|---|---|
| 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
| Option | Description |
|---|---|
| Menu Name | Enter a Name for each block of menu links |
| Menu Items | Create your menu link list |
Options & Description of menu links
| Option | Description |
|---|---|
| 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;