Introduction
Un travail vu sur tympanus.net concernant certains effets de survol de lien de menu (gérés par CSS et JavaScript pour les animations de lettres individuelles) m'a donné l'idée de créer cette particule. J'y ai aussi intégré un menu simple, que l'on utilisera le plus souvent en bas de page.
Crédit
- anime.js by Julian Garnier
- Charming.js by Yuan Qing
Configuration
- Options pricipales - Bloc des menus
- Options des Blocs Menu
- Description liens de menu
- Details et Options pour chaque menu
- Exemples
Options pricipales
.
| Option | Description |
|---|---|
| Title | Entrez un titre pour vos liens menu. Logiquement on laisse vide |
| CSS Classes | Entrez la (les) classe (s) CSS que vous souhaitez utiliser dans le contenu de la particule. |
| Configuration Preset | Sélectionnez le style prédéfinit de mise en page que vous souhaitez utiliser pour l'élément. Vous pouvez choisir: Simple menu, Menu Adsila, Ama, Dutsu, Inola, Mohe, Salal, Tsula, Yona |
| Menus | Créer vos blocs menu (Liste) |
Options des Blocs Menu
| Option | Description |
|---|---|
| Menu Name | Entrez un Nom pour chaque bloc de liens de menu |
| Menu Items | Créer votre liste de liens de menu |
Description liens de menu
| Option | Description |
|---|---|
| SubTitle | Entrez un Sous titre pour vos liens menu (Non utilisé pour "Simple menu"). |
| Icon | Seulement pour "Simple Menu" - Ajouter un icon Font Awesome |
| Link | Définisser où le lien de votre menu arrivera |
| Target | Définissez la cible du lien. |
Details et Options pour chaque menu
Menu Adsila
Demo sur Codrops ici - Démo Particule Menu Hover Effects En Toutes Lettres ici
Fond Clair; 2 couleurs menu prédéfinies
Vous pouvez changer les couleurs ligne 86 à 89 fichier etl_menuhovereffect.scss
$color-menuname: #57585c;
$color-adsila-1: #fe628e;
$color-adsila-2: #6265fe;
Menu Ama
Demo sur Codrops ici - Démo Particule Menu Hover Effects En Toutes Lettres ici
Fond Clair; 4 couleurs menu prédéfinies
Vous pouvez changer les couleurs de fond ligne 199 et 213 à 220 fichier 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 sur Codrops ici - Démo Particule Menu Hover Effects En Toutes Lettres ici
Fond sombre; 1 couleur menu prédéfinie
Vous pouvez changer les couleurs de fond ligne 292 à 295 fichier etl_menuhovereffect.scss
$color-menuname: #fff;
$color-background: #eb2141;
$color-submenuname: #565656;
$link-hover:$color-menuname;
Menu Inola
Demo sur Codrops ici - Démo Particule Menu Hover Effects En Toutes Lettres ici
Fond sombre; 1 couleur menu prédéfinie
Vous pouvez changer les couleurs de fond ligne 360 à 362 fichier etl_menuhovereffect.scss
$color-menuname: #fff;
$color-background: #1f1e1e; // Doit être identique couleur de fond
$color-link: #e5d338;
Menu Mohe
Demo sur Codrops ici - Démo Particule Menu Hover Effects En Toutes Lettres ici
Fond sombre, 1 couleur menu prédéfinie
Vous pouvez changer les couleurs de fond ligne 440 à 442 fichier etl_menuhovereffect.scss
$color-menuname: #171754;
$color-submenuname: #fff;
$color-submenunamebg:$color-submenuname;
Menu Salal
Demo sur Codrops ici - Démo Particule Menu Hover Effects En Toutes Lettres ici
Fond sombre, 4 couleurs menu prédéfinies
Vous pouvez changer les couleurs de fond ligne 515 à 517 et 533 à 540 fichier 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 sur Codrops ici - Démo Particule Menu Hover Effects En Toutes Lettres ici
Fond sombre, 2 couleurs menu prédéfinies
Vous pouvez changer les couleurs de fond ligne 596 à 599 fichier etl_menuhovereffect.scss
$color-menuname: #5a5bd3;
$color-background: #5a5bd3;
$color-link: #222328;
$color-submenuname: #999caa;
font-family: $font-family-mono; // que l'on peut changer
Menu Yona
Demo sur Codrops ici - Démo Particule Menu Hover Effects En Toutes Lettres ici
Fond sombre (vert), 1 couleurs menu prédéfini
Vous pouvez changer les couleurs de fond ligne 657 à 659 fichier etl_menuhovereffect.scss
$color-menuname: #fff;
$color-background: $color-menuname;
$color-submenuname: #fff;