Introduction (En travaux)
Un travail vu sur tympanus.net concernant certains effets Images de survol de lien de menu . Effet aussi avec la souris
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;