Partant sur les principes des menus dynamiques je me suis penché sur la création d'un menu créé à partir d'une image.
Le principe de base étant celui de l'image survolée. En clair une image se superpose à une autre lorsque l'on survol la première.
Voici donc en étant le plus clair possible le principe d'un menu dynamique par survol d'image.
Tout d'abord il vous faut créer une balise div à l'endroit où se positionnera votre menu. Pour cela il vous faudra modifier le code source de votre fichier theme.html
Ensuite il vous faudra créer une rubrique pour ce menu dans votre fichier style.css.
Ce tuto s'applique au gabarit Mor.Pho.GEN.e.sis 1.1.2 mais il est tout aussi bien adaptable à d'autres thèmes.
Mais trève de blabla passons à la pratique 
Tout d'abord éditer votre fichier theme.html et insérer le code suivant à l'endroit où se trouvera le menu:
<a tabindex="1"class="menu" href="#"><img src="<{xoImgUrl img/image.png}>" alt="Links" /><span>
<li>Module a </li>
<li>Module b </li>
<li>Module c </li>
<li>Module d </li>
<li>Module e </li>
</span></a>
Explication:
- la balise "class" va définir le style du lien
- la variable smarty le chemin de l'image
- la balise
<span></span>
provoquera la réaction au survol de l'image. Vous remarquerez qu'entre ces deux balises il y a un menu en liste: balise
<li></li>)
.
Bon voilà le code est en place dans la partie html de votre thème 
Passons maintenant à la partie css !!!
Dans votre fichier style.css insérer les codes suivants :
Citation :/*=============== Affichage du menu ===================================*/
#xo-canvas .menu {
width:45px;
height:auto;
float:left;
margin-top:5px;
z-index:2;
clear:both;
}
#xo-canvas a.menu {
position:relative;
text-decoration: none;
}
#xo-canvas a:hover.menu {
text-decoration: none;
}
#xo-canvas a.menu span {display: none;}
#xo-canvas a:hover.menu span {
display: inline;
position: absolute;
left: 0px;
z-index: 2;
width:100%;
padding:2px 40px;
padding-top:-20px;
background-color: #999999;
margin-left:35px;
color:#202;
border-left:1px dotted #171;
}
Explication détaillée:
Citation :/*=============== Affichage du menu ===================================*/
#xo-canvas .menu {
width:45px;
height:auto;
float:left;
margin-top:5px;
z-index:2;
clear:both;
}
}
Cette partie de code va positionner votre menu
Citation :
#xo-canvas a.menu {
position:relative;
text-decoration: none;
}
Cette partie va définir la propriété de l'image
Citation :#xo-canvas a:hover.menu {
text-decoration: none;
}
Cette portion de code définit les propriètés de l'image au survol de la souris.
Citation :#xo-canvas a.menu span {display: none;}
Notez le "display:none" !!! Cela veut dire que vos liens ne seront pas visibles ( ou du moins pas tout suite ) !!!
Enfin la partie qui nous intéresse: la visibilité des liens et leur style !!!
Citation :#xo-canvas a:hover.menu span {
display: inline;
position: absolute;
left: 0px;
z-index: 2;
width:100%;
padding:2px 40px;
padding-top:-20px;
background-color: #999999;
margin-left:35px;
color:#202;
border-left:1px dotted #171;
}
Dernière petite explication:
a:hover = survol
.menu = style utilisé par le fichier theme.html
span = visibilité des liens au survol de la souris.
Voilà tout est dit, cet article a pour seul but d'expliciter la méthode que j'ai utilisé pour créer un thème ( voir ce sujet ), je ne me lancerai pas dans des explications sur les feuilles de styles
Amusez vous bien !!!!!
|
