yoja-web - menu - un menu stylé et flottant pour vos boutiques zlio

Menu : un menu stylé et flottant

Présentation générale
Le gadget menu permet d'améliorer l'affichage des sous catégories de votre menu grâce à un effet flottant. En effet, grâce à notre gadget menu, les sous catégories s'afficheront dès que l'utilisateur survolera la catégorie (plus besoin de clic). De plus, la catégorie est désormais accessible directement sans avoir à cliquer sur la catégorie puis sur "Voir la rubrique". Enfin, vous pourrez également choisir entre plusieurs effets pour afficher les sous catégories et même créer votre propre menu.
Notre gadget menu par défaut s'intégre facilement sur tous types de boutiques (voir menu intégration) mais si vous êtes à l'aise avec les langages de programmation internet (CSS, HTML,...) n'hésitez pas à customiser et/ou modifier les paramètres de votre nouveau menu.
Menu par défaut
Par défaut, notre module menu rendra votre menu flottant, c'est-à-dire que les sous catégories s'afficheront dès que l'utilisateur survolera la catégorie avec la souris. La sous categorie s'affichera à droite de la catégorie. Notre gadget menu prenda en compte automatiquement toutes les modifications que vous pourrez faire sur votre menu (ajout de catégorie, ajout sous catégorie, etc...)
voir une démonstration
Comment intégrer en 2 mn le menu flottant sur votre boutique ?
Cliquez gauche sur les lignes de code suivantes, puis faites Ctrl+A pour sélectionner tout le code. Ensuite faites Ctrl+C pour copier le code. Connectez vous à votre interface d'administration, sélectionnez l'onglet "aspect" puis "En-tête & Pied de page (HTML)". Cliquez gauche sur la zone pied de page HTML pour faire apparaître le curseur. Finalement faites Ctrl+V pour coller les lignes de code. N'oubliez pas de "Sauver" vos modifications. Il ne reste plus qu'à aller sur votre boutique pour constater le resultat !!

Remarque : certaines lignes de code sont communes aux différents modules javascript yoja. Si vous avez déjà intégré un module yoja sur votre boutique, vérifiez de ne pas insérer deux fois les mêmes lignes (par exemple jquery-1.2.1.js et yoja.core.js)

Script pour Boutique V3.5 :

<link rel="stylesheet" type="text/css" href="http://yoja-web.com/commons/scripts/modules/menu/v3.5/css/menu.css" /> <script type="text/javascript" language="Javascript" src="http://yoja-web.com/commons/scripts/yoja/yoja.core.js"></script> <script type="text/javascript" language="Javascript" src="http://yoja-web.com/commons/scripts/modules/menu/v3.5/menu.module.js"></script>

Script pour Boutique V3.0 :

<link rel="stylesheet" type="text/css" href="http://yoja-web.com/commons/scripts/modules/menu/css/menu.css" /> <script type="text/javascript" language="Javascript" src="http://yoja-web.com/commons/scripts/jquery/jquery-1.2.1.js"></script> <script type="text/javascript" language="Javascript" src="http://yoja-web.com/commons/scripts/yoja/yoja.core.js"></script> <script type="text/javascript" language="Javascript" src="http://yoja-web.com/commons/scripts/modules/menu/menu.module.js"></script>

Comment ajouter un fond à mes sous catégories ?
Maintenant que vos sous catégories s'affiche de manière flottante, vous aurez certainement besoin d'ajouter une couleur de fond. Dans la rubirque "Aspect" puis "Style CSS" de la console d'administration de votre boutique, vous pouvez ajouter le code suivant :

CSS pour Boutique V3.5 :

.module_categories ul ul { background:#000000; }

CSS pour Boutique V3.0 :

div.module-categories-cnt-cat div{ background:white; }

Besoin d'aide ?
Si vous rencontrez des problèmes pour intégrer le gadget menu sur votre boutique zlio, vous pouvez trouver de l'aide sur le forum.
Vous pouvez également contacter notre support technique.
Comment créer votre propre menu ?
Avec notre module menu, vous avez également la possibilité de créer votre propre menu (par exemple vous pouvez créer un menu horizontal dans votre entête de page).
Pour cela il suffit d'ajouter le code HTML suivant à l'endroit où vous souhaitez afficher votre menu.

<div id="myMenu" class="yojaMenu"></div>
A noter l'utilisation de l'attibut "id" qui représente l'identifiant unique de votre menu dans la page. Cet identifiant vous permettra de customiser et de paramétrer votre menu. (à voir rubrique "customisation" et "paramétrage")
Ajouter plusieurs menu sur votre page
Vous pouvez ajouter autant de menus que vous le souhaitez sur votre page (par exemple un dans l'entête de page et un dans le bas de page). Pour cela il suffit de dupliquer le code vu précédemment en modifiant l'identifiant de chaque menu.

<div id="myMenu1" class="yojaMenu"></div> <div id="myMenu2" class="yojaMenu"></div> <div id="myMenu3" class="yojaMenu"></div>
Supprimer le menu zlio
Si vous souhaitez supprimer le menu zlio, il suffit d'ajouter le style CSS suivant :

div.module-categories-cnt{ display:none; }
Comment customiser le menu par défaut ?
Notre gadget menu conserve la customisation de votre menu zlio. Pour customiser votre menu, il suffit donc de suivre les instructions de la page 23 du "guide de customisation" fourni par Zlio et que vous trouverez sur votre interface d'administation dans la rubrique "Aspect" puis "Style CSS" (en bas à droite).

Exemple customisation du menu de www.yojafashion.com

.module-categories{ width:196px; } .module-categories-cnt { padding: 0px; margin: 0px 1px; } .module-categories-cnt .module-categories-cnt-cat{ padding:0px ; margin:0px; background:#c89e9f; } .module-categories-cnt .module-categories-cnt-cat ul{ background-image:url(http://yoja-web.com/shops/yojafashion/images/menu_cat.gif); background-repeat:no-repeat; background-position: 3px 3px; } .module-categories-cnt div a:hover{ background:#BB8789 url(http://yoja-web.com/shops/yojafashion/images/menu_cat_on.gif) 3px 3px no-repeat; } .module-categories-cnt .module-categories-cnt-cat li{ padding:0px 0px 0px 0px; } .module-categories-cnt .module-categories-cnt-cat a{ border: 1px solid #FFF; padding-left:27px; color:#FFF; font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif; } .module-categories-cnt .module-categories-cnt-cat a:hover{ color:#FFF; } div.module-categories-cnt-cat div{ padding:0px ! important; background:transparent url(http://yoja-web.com/shops/yojafashion/images/sub_menu.png) repeat scroll 0%; width:195px; } .module-categories-cnt .module-categories-cnt-cat div ul{ background:none ! important; } .module-categories-cnt .module-categories-cnt-cat div ul li a{ padding-bottom:0px ! important; margin:0px ! important; } .module-categories-cnt-cat div ul li a:hover{ color:#FFF ! important; background:#BB8789 ! important; text-decoration:none ! important; } .module-categories-cnt .cat img{ display:none ! important; }

Comment customiser votre propre menu ?
Vous avez créer votre propre menu à l'aide de notre module menu et vous souhaitez maintenant customiser son design. Pour cela, voici la description de la structure HTML des menu yoja :

<div id="myMenu" class="yojaMenu"> <div class="menu"> <ul > <li> <a href="cat.html">cat</a> <div class="submenu"> <ul> <li> <a href="ssCat.html">ssCat</a> </li> </ul> </div> </li> </ul> </div> </div>

En s'appuyant sur cette structure, voici un exemple style CSS à appliquer pour modifier le design de votre menu :

div#myMenu .menu li{ border:1px solid grey; } div#myMenu .menu a { color:#000; } div#myMenu .submenu ul{ border:1px solid red; } div#myMenu .submenu li{ border:0; } div#myMenu .submenu a { color:red; }

Comment aller plus loin dans la customisation ?
Pour ceux vraiment à l'aise avec le language CSS, voici le style complet du menu par défaut. Vous pouvez supprimer l'import du CSS par défaut menu.css et créez vos propres styles.

div.module-categories-cnt-cat{ display:block; height:1%;/*For IE*/ } div.module-categories-cnt-cat a { display:block ! important; height: 1% ! important; /*For IE*/ } div.module-categories-cnt-cat li{ display: block ! important; /*For GOOD browsers*/ display: inline; /*For IE*/ } div.module-categories-cnt-cat div{ display:none; z-index:100; } div.yojaMenu div.menu ul{ margin:0 ! important; } div.yojaMenu div.submenu ul{ margin:0; padding:0; } div.yojaMenu li{ padding:2px; background:#FFF; } div.yojaMenu div.menu ul li{ border:1px solid black; } div.yojaMenu ul.submenu li{ border:0; } div.yojaMenu { display:block; } div.yojaMenu div.horizontal li, div.yojaMenu div.horizontal ul{ display:inline; } div.yojaMenu div.vertical li, div.yojaMenu div.vertical ul{ display:block; } div.yojaMenu div.submenu{ padding:5px 0px 2px 0px ! important; display:none; position: absolute; z-index:100; }

Si vous avez des problèmes pour customiser votre menu, vous pouvez trouver de l'aide sur le forum.
Vous pouvez également contacter notre support technique.

Comment modifier les paramètres du menu par défaut ?

Notre menu flottant par défaut est paramétrable. Vous pouvez par exemple choisir entre plusieurs effets pour l'affichage des sous catégories, modifier la vitesse d'affichage ou encore ajouter une effet de transparence.
Pour modifier le paramétrage du menu flottant par défaut, il suffit d'ajouter le code suivant juste après les lignes de code présentée dans la partie "Intégration" :

<script type="text/javascript" language="Javascript">
menuParameters["defaultMenu"]={animation:"slideHorizontal", speed:400, opacity:0.9};
</script>

Comment modifier les paramètres de son propre menu ?

Lorsque que vous avez créé votre propre menu, vous l'avez identifié avec un id (ex=myMenu). Il suffit alors d'ajouter le code suivant juste après les lignes de code présentée dans la partie "Intégration"

<script type="text/javascript" language="Javascript">
menuParameters["myMenu"]={animation:"slideVertical", subMenuDisplay:"horizontal", speed:200};
</script>

Liste des paramètres disponibles

Voici la liste des tous les paramètres disponibles :

opacity	Permet de déterminer le niveau de transparence du sous menu. Valeur de 0 à 1 ( 1 valeur par défaut pour aucune transparence)
animation	Permet de déterminer l'animation à utiliser pour l'affichage des sous catégories. A choisir parmi "appear", "slideHorizontal", "slideVertical", "none" (valeur par défaut)
speed	La vitesse de l'animation. Peut valoir "slow", "normal" ou "fast" ou encore une durée en millisecond (ex: 300). Valeur par défaut : 250
menuDisplay	Permet d'indiquer le sens d'affichage du menu : "vertical" ou "horizontal"(valeur par défaut). A utiliser uniquement si vous créez votre propre menu
subMenuDisplay	Permet d'indiquer le sens d'affichage du menu : "horizontal" ou "vertical"(valeur par défaut). A utiliser uniquement si vous créez votre propre menu
subMenuX	Permet d'ajuster le position de sous menu selon l'axe horizontal (0 par défaut)
subMenuY	Permet d'ajuster le position de sous menu selon l'axe vertical (0 par défaut)
showSubMenu	Indique si on affiche le sous menu ou pas. Vaut false ou true (valeur par défaut)

Présentation
Intégration
Créer votre menu
Customisation
Paramétrage

Présentation générale

Menu par défaut

Comment intégrer en 2 mn le menu flottant sur votre boutique ?

Comment ajouter un fond à mes sous catégories ?

Besoin d'aide ?

Comment créer votre propre menu ?

Ajouter plusieurs menu sur votre page

Supprimer le menu zlio

Comment customiser le menu par défaut ?

Comment customiser votre propre menu ?

Comment aller plus loin dans la customisation ?

Comment modifier les paramètres du menu par défaut ?

Comment modifier les paramètres de son propre menu ?

Liste des paramètres disponibles