Fork me on GitHub

Votre menu en image dynamique

200720
Avril
  crazy85 Documentations 9895
Documentations

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 !!!!!

Note: 8.00 (1 vote) - Noter cet article -

Partager Twitter Partagez cette article sur GG+
Format imprimable Envoyer cet article à un ami
Les commentaires appartiennent à leurs auteurs. Nous ne sommes pas responsables de leur contenu.
Xoops accro
Inscrit le: 04/02/2003
De: Le Mans
Contributions: 12273
Christian Posté le: 20/04/2007 12:48  Mis à jour: 20/04/2007 12:48
 Re: Votre menu en image dynamique
Merci pour cette initiative qui démontre qu'avec de la volonté et peut être un peu d'obstination il est possible de réaliser des choses différentes.

Une précision cependant, tu indiques qu'une image est remplacée par une autre au survol de la première mais ton explication ne fournit la source que pour une seule image!

Est-ce à dire que ton exercice consiste à utiliser une seule image qui contient deux parties mais que l'on en affiche qu'une seule à la fois comme dans cet autre tutoriel bien connu ?
Régulier
Inscrit le: 20/08/2005
De: Près de la plage
Contributions: 493
crazy85 Posté le: 20/04/2007 15:21  Mis à jour: 20/04/2007 15:22
 Re: Votre menu en image dynamique
Non en fait je suis parti du principe de ce tutos mais en tentant d'appliquer l'effet inverse c'est à dire faire apparaitre un menu au lieu d'une infobulle.
Aspirant
Inscrit le: 02/03/2003
De:
Contributions: 50
hycarios Posté le: 02/05/2007 08:45  Mis à jour: 02/05/2007 08:45
 Re: Votre menu en image dynamique
J'utilise le thème fluidity de Mor.Pho.GEN.e.sis 1.1.2 mais je ne sais pas trop où coller le code dans le theme.html car le menu se trouve dans le code à cet emplacement <{includeq file="$theme_name/globalnav.html"}>. Dois-je faire une modife dans ce fichier aussi ?
Propulsé avec XOOPS | Graphisme adapté par Tatane, Grosdunord, Montuy337513

25 Personne(s) en ligne (1 Personne(s) connectée(s) sur Articles) | Utilisateur(s): 0 | Invité(s): 25 | Plus ...