Menu animé avec image survolée !

0/5 (8 avis)

Snippet vu 46 952 fois - Téléchargée 21 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
9 avril 2007 à 15:18
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 130 Date d'inscription lundi 12 décembre 2005 Statut Membre Dernière intervention 19 avril 2009
2 avril 2007 à 18:47
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
2 avril 2007 à 15:56
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
2 avril 2007 à 15:25
"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
2 avril 2007 à 12:14
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 :)
Afficher les 8 commentaires

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.