Menu animé avec image survolée !

Soyez le premier à donner votre avis sur cette source.

Snippet vu 45 926 fois - Téléchargée 19 fois

Contenu du snippet

Code (X)HTML et javascript, beau rendu, simple d'utilisation !

TESTEZ LE MENU SUR : http://bigbananier.free.fr/Test.php

Explication : On créer deux image "Accueil" par exemple, avec un fond, un style, une police, ce que l'on veut de différents et au passage de la souris l'image passe de l'une a l'autre.

Source / Exemple :


Créons une nouvelle page dédiée au menu, Exemple : "menu.php"

Créons une image qui changera au survol de la souris en utilisant ce code :

<div id="menu">
<!-- Permettra de créer du style CSS  sur le menu, ajouter un cadre par exemple-->
    <div id="menuContent">     
    <!-- Permettra de créer du style CSS  à l'intérieur du cadre par exemple-->
      <div class="menuItem"
       <!-- Permettra de créer du style CSS  sur les images du menu par exemple-->
             onclick="location.href = 'page.php';"  
             <!-- Créer un lien vers une page au clic de la souris-->
             style="background-image : url(images/imageFixe.jpg);"
             <!-- Définition de l'image -->
             onmouseout="this.style.backgroundImage = 'url(images/imageFixe.jpg)';"
             <!-- Définition de l'image lorsque la souris n'est pas sur l'image-->
             onmouseover="this.style.backgroundImage = 'url(images/imageSurvolée.jpg)';">
             <!-- Définition de l'image lors du passage de la souris qur celle-ci-->
        </div>
      
   </div>
   
</div>

Ajoutons au CSS :

#menu {
      background : Transparent url("images/cadre.jpg") no-repeat;
      background-position : left center;
     }

.menuItem   {
         width : 155px;
         height : 35px;
         cursor : pointer;
         }

Ajouter dans le body des pages ou l'on veus que le menu apparaissent :

<?php
    require("menu.php");
?>

Conclusion :


Menu valide (X)HTML personalisable à souhait.

A voir également

Ajouter un commentaire

Commentaires

Fidzy
Messages postés
10
Date d'inscription
vendredi 2 décembre 2005
Statut
Membre
Dernière intervention
8 mai 2009
-
Paix, mon ami...

Ça fait un bout que je consulte le site et je peux te dire que l'ambiance y est bonne.

Ne prends pas les commentaires perso.
La programmation a un côté scientifique et logique. Alors prends un peu de recul. Oublies que c'est "ton" code, et analyse les réponses.

A+
Palleas_44
Messages postés
131
Date d'inscription
lundi 12 décembre 2005
Statut
Membre
Dernière intervention
19 avril 2009
-
Personne n'est agressif la, si tu sais pas prendre les remarques de manière construite, c'est ton soucis :)
TheBigBananier
Messages postés
2
Date d'inscription
dimanche 1 avril 2007
Statut
Membre
Dernière intervention
2 avril 2007
-
Vive l'ambiance ici :O sa rend agressif le full pc

Au moins ma source aura servi a quelquechose tu la refaite en mieux, et c'est le plus important, mais peace plz :)
kankrelune
Messages postés
1293
Date d'inscription
mardi 9 novembre 2004
Statut
Membre
Dernière intervention
21 mai 2015
-
"quand j'ai enfin trouvé comment faire marché ce petit menu sur tout les navigateurs"

Oui sauf que cela ne marche pas sur tous les navigateur puisqu'il faut que javascript soit activer... après si critiquer c'est forcement dénigrer soit "ton code il est super top de la mort qui tue" mais c'est pas comme ça qu'on avance... qui plus est tu dis que tu as commencé à coder depuis deux semaine donc mieux vaut tenir compte des commentaires de personnes plus expérimentés que toi plutôt que de faire le caliméro... non... .. ?

Pour finir...

<style type="text/css">
<!--//
#menu
{
background : Transparent url("images/cadre.jpg") no-repeat;
background-position : left center;
}
.menuItem
{
width: 155px;
height: 35px;
display:block;
background-repeat: no-repeat;
}
#maPage1 {background-image : url(images/menu1.jpg);}
#maPage1:hover {background-image : url(images/menu1_hover.jpg);}
#maPage2 {background-image : url(images/menu2.jpg);}
#maPage2:hover {background-image : url(images/menu2_hover.jpg);}
//-->
</style>


[maPage1.php ]
[maPage2.php ]



Voila ton menu full css et xhtml strict valid... .. .

@ tchaOo°
TheBigBananier
Messages postés
2
Date d'inscription
dimanche 1 avril 2007
Statut
Membre
Dernière intervention
2 avril 2007
-
La source c'est moi :

Niveau de la source : Débutant

Voila tout est dit ^^

J'ai commencer a "programmer" y'a 2 semaines et j'ai pas mal galérer alors quand j'ai enfin trouvé comment faire marché ce petit menu sur tout les navigateurs et tout sa en (X)HTML, jvoulais le faire partager pque j'étais bien content de me retrouver sur ce site quand je chercher désespéremment des infos sur google :)

Voila aprés vous pouvez tjr dénigrer, mais sa fais pas avancer grd chose, je sais qu'on peus tjr faire mieux :)

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.