Site de démonstration Gantry 5

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



Configuration

 

Options pricipales

particle menuhover 1.

 

OptionDescription
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

particle menuhover 2

 

OptionDescription
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

particle menuhover 3

 

OptionDescription
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;

 

 

Exemples

Simple Menu

Menu name 1
Menu name 2
Menu name 3