Menus

?

Menu souligné

Menu avec l'option sélectionnée soulignée.

La 1ère version souligne au clic, la 2ème version souligne au survol.

water
fire
leaf
wind
dark
magic
ocean
amber
hell
gold
silver
fairy
wood
grass
spectrum
snow
?

Menu souligné 2

Menu avec l'option sélectionnée soulignée.

La 1ère version souligne au clic, la 2ème version souligne au survol.

water
fire
leaf
wind
dark
magic
ocean
amber
hell
gold
silver
fairy
wood
grass
spectrum
snow
?

Menu simple

Menu avec un fond différent pour l'option sélectionnée.

La 1ère version souligne au clic, la 2ème version souligne au survol.

Conseils d'utilisation :
- Mettre 'hrDark' Pour que le fond de l'option sélectionnée soit plus sombre.
- Mettre 'hrLight' Pour que le fond de l'option sélectionnée soit plus clair.

water
fire
leaf
wind
dark
magic
ocean
amber
hell
gold
silver
fairy
wood
grass
spectrum
snow
?

Options menu

Options rajoutables sur le menu.

Conseils d'utilisation :
- Utiliser blank1 pour créer un espace de 1 bloc de large.
- Utiliser blank2 pour créer un espace de 2 blocs de large.
- Utiliser blank3 pour créer un espace de 3 blocs de large.
- La barre de recherche prend 2 blocs de large.

?

Sous-menu

Sous-menu. 3 styles proposés.

Consigne d'utilisation :
- La première classe à mettre correspond à celle utilisée pour les boutons du menu.

Conseil d'utilisation :
- Le sous-menu simple est disponible en Dark et Light.

water
fire
leaf
wind
dark
magic
ocean
amber
hell
gold
silver
fairy
wood
grass
spectrum
snow
?

Menu coulissant

Menu coulissant optimisé pour les smartphones. 2 styles proposés.

Consignes d'utilisation :
- Le menu doit être situé au tout début OU à la toute fin du body et ne doit pas être dans un même élément (div...) que le reste de la page. Le reste de la page quant à lui doit se trouver dans une seule et même div avec la class 'AKL-outsideSlidingMenu', cela permettra la fermeture du menu lors d'un clic en dehors de celui-ci.

- Si vous souhaitez voir un bandeau en permanence indiquant la précense du menu, remplacer dans la class 'slidingMenu' par 'slidingMenu-border'.


Conseils d'utilisation :
- La propriété opening défini l'ouverture (optionnelle), si la valeur indiqué est 'smooth', alors l'ouverture/fermeture du menu suivra votre doigt, sinon (valeur par défaut 'rough') le menu ne suivra pas votre doigt.

- Le bouton attaché au menu (optionnel) permet son ouverture/fermeture et peux être placé tout le long du menu (btnPosition), le texte du bouton s'oriente automatiquement selon la position du menu.

- btnPosition accepte les valeurs en px et en %, mais aussi des valeurs prédéfini (top, bottom, left, right et center) pour simplifer son positionnement. Attention de prendre en compte la taille du bouton si vous utilisez une valeur précise.

- La propriété effect permet d'appliquer un effet sur le reste de la page lorsque le menu est ouvert, cette propriété correspond au 'filter' en CSS3.

- La propriété sizeOnComputer (optionnelle) permet de déterminer la taille du menu sur un ordinateur / une tablette, cette valeur peut être en px ou en %, il est recommendé d'utiliser les px (valeur par défaut : 300px).

- La propriété sizeOnSmartphone (optionnelle) est similaire à sizeOnComputer mais correspond cette fois aux smartphones, cette valeur peut être en px ou en %, il est recommendé d'utiliser les % (valeur par défaut : 50%).

- Des boutons indépendants peuvent être rajouté sur la page pour ouvrir/fermer le menu en utilisant la class 'AKL-slidingMenu-awayBtn'.

Personalisez votre propre menu !

Position du menu :
Style :
Ouverture :
Type de menu :
Bouton attaché au menu :
Position du bouton :
Effet sur la page derrière le menu :
Taille du menu sur ordinateur :
Taille du menu sur smartphone :

Il est conseillé de consulter cette page sur un smartphone pour profiter d'une expérience optimale.