begin process at 2012 05 28 11:20:43
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Menu & Co

 > MENU DÉROULANT EN IMAGES

MENU DÉROULANT EN IMAGES


 Information sur la source

Note :
6 / 10 - par 1 personne
6,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Menu & Co Classé sous :menu déroulant, menu parametrable, menu modifiable, menu simple, menu Niveau :Débutant Date de création :02/09/2009 Vu / téléchargé :8 583 / 1 370
Auteur : dlvains

Ecrire un message privé
Commentaire sur cette source (4)
Ajouter un commentaire et/ou une note

 Description

Cliquez pour voir la capture en taille normale
un menu simple a modifier, il vous suffit de changer le texte sur le PSD et d'enregistrer au format PNG.
si vous modifiez la largeur des images, pensez a redéfinir les marges correspondantes

Source

  • <!-- tout est dans le Zip -->
<!-- tout est dans le Zip -->

 Conclusion

N'hésitez pas à poser des questions !

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Sources du même auteur

Source avec Zip Source avec une capture MENU VERTICALE EN TRANSPARENCE
Source avec Zip Source avec une capture CALCULATRICE DE L'IPHONE !
Toutes les sources de dlvains

 Sources de la même categorie

Source avec Zip Source avec une capture UN MENU EN CSS par Julien39
Source avec Zip FLÈCHE CLIGNOTANTE AU SURVOL D'UN LIEN par lecurieux41
Source avec Zip Source avec une capture TREEMENU-2.3.6-MACNIP par neep
Source avec Zip Source avec une capture MENU CIRCULAIRE par adelmonis
Source avec Zip Source avec une capture MENU TASKBAR WINDOWSXP HOME par micking
Toutes les sources de la catégorie Menu & Co

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture UN MENU EN CSS par Julien39
Source avec Zip DEUX MENU DÉROULANT LE PREMIER GÉNÈRE LE DEUXIÈME MENU par hakimastouri
Source avec Zip Source avec une capture TREEMENU-2.3.6-MACNIP par neep
Source avec Zip Source avec une capture MENU CIRCULAIRE par adelmonis
Source avec Zip MENU CONTEXTUEL GRÂCE AU CLICK DROIT DE LA SOURIS AVEC DES M... par OB1_12

Commentaires et avis

Commentaire de astro53 le 03/09/2009 10:40:49

Salut dlvains,

Je viens de regarder ta source, tout d'abord le code html est bien presente (indente).
Mais pourquoi ne pas mettre le css et le js dans des fichiers separe et les appeler dans le head? (Ca marche tout aussi bien, j'ai fais le test).
Pour l instant je n ai rien d'autre a rajouter a pars bonne chance pour la suite...
A bientot
Astro

Commentaire de jdmcreator le 03/09/2009 23:11:52 6/10

Bonjour,

+1 à Astro ;) C'est beaucoup plus léger ainsi lorsqu'on doit appeler le menu plusieurs fois. Sinon j'aime beaucoup l'effet.

Côté HTML : de (très) nombreuse erreur sont présentes. Notons évidemment, l'absence de balise de fermeture </body> et </html>. Vérifie ta page avec le validateur W3C : validator.w3.org.

Je donne 6, car malgré le bel effet, ce genre de source est très présent ;)

JDMCreator

Commentaire de dlvains le 04/09/2009 04:04:17

pour la première question:
je pensais que c'était plus simple de mettre le code tout en un pour le modifier mais bien sur sur plusieurs pages il est préférable de mettre le .js et le .css en externe.
et merci JDMCREATOR pour le lien: validator.w3.org.

donc voici le code validé et avec le css et js en externe:
________________________________
index.html :
________________________________

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Menu html</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="script.js"></script>

</head>

<body>

<div id="menu">

<div id="bout_gauche">
<img border="0" src="bout_gauche.png" alt="" />
</div>

<div id="bout_droit">
<img border="0" src="bout_droit.png" alt="" />
</div>

<div id="menu_1">
<img border="0" src="menu_1.png" onmouseover="this.src='menu_1_2.png';" onmouseout="this.src='menu_1.png';" onclick="disply('contenu_menu_1');" alt="" />

<div id="contenu_menu_1" style=" display:none;">
<img id="img_contenu_menu_1" border="0" src="contenu.png" alt="" />
<p id="text_contenu_menu_1" >
<a href="index.html">- lien 1 </a><br />
<a href="index.html">- lien 2 </a><br />
<a href="index.html">- lien 3 </a><br />
<a href="index.html">- lien 4 </a><br />
<a href="index.html">- lien 5 </a><br />
<a href="index.html">- lien 6 </a><br />
</p>
</div>

</div>

<div id="menu_2">
<img border="0" src="menu_2.png" onmouseover="this.src='menu_2_2.png';" onmouseout="this.src='menu_2.png';" onclick="disply('contenu_menu_2');" alt="" />

<div id="contenu_menu_2" style=" display:none;">
<img id="img_contenu_menu_2" border="0" src="contenu.png" alt="" />
<p id="text_contenu_menu_2" >
<a href="index.html">- lien 1 </a><br />
<a href="index.html">- lien 2 </a><br />
<a href="index.html">- lien 3 </a><br />
<a href="index.html">- lien 4 </a><br />
<a href="index.html">- lien 5 </a><br />
<a href="index.html">- lien 6 </a><br />
</p>
</div>

</div>

<div id="menu_3">
<img border="0" src="menu_3.png" onmouseover="this.src='menu_3_2.png';" onmouseout="this.src='menu_3.png';" onclick="disply('contenu_menu_3');" alt="" />

<div id="contenu_menu_3" style=" display:none;">
<img id="img_contenu_menu_3" border="0" src="contenu.png" alt="" />
<p id="text_contenu_menu_3" >
<a href="index.html">- lien 1 </a><br />
<a href="index.html">- lien 2 </a><br />
<a href="index.html">- lien 3 </a><br />
<a href="index.html">- lien 4 </a><br />
<a href="index.html">- lien 5 </a><br />
<a href="index.html">- lien 6 </a><br />
</p>
</div>

</div>

</div>

</body>
</html>

______________________________________
style.css :
______________________________________

body
{
width: 100%;
height: 500px;
margin-left: auto;
margin-top: 0px;
background-color: RGB(55,55,55);
background-repeat:no-repeat;
color: white;
margin-left: 50%;
}

a
{
font-size: 30px;
text-decoration: none;
color: RGB(155,155,155);
}

a:hover
{
font-size: 40px;
color: yellow;
}

#menu { position:absolute; width: 622px; height: 60px; margin-left: -311px; margin-top: 50px;}
#bout_gauche { position:absolute; width: 32px; height: 60px; margin-left: 0px; margin-top: 0px;}
#bout_droit { position:absolute; width: 32px; height: 60px; margin-left: 590px; margin-top: 0px;}
#menu_1 { position:absolute; width: 186px; height: 60px; margin-left: 32px; margin-top: 0px;}
#menu_2 { position:absolute; width: 186px; height: 60px; margin-left: 218px; margin-top: 0px;}
#menu_3 { position:absolute; width: 186px; height: 60px; margin-left: 404px; margin-top: 0px;}
#contenu_menu_1 { position:absolute; width: 186px; height: 250px; margin-left: 0px; margin-top: 0px;}
#img_contenu_menu_1 { position:absolute; width: 186px; height: 250px; margin-left: 0px; margin-top: 0px;}
#text_contenu_menu_1 { position:absolute; width: 156px; height: 220px; margin-left: 15px; margin-top: 15px;}
#contenu_menu_2 { position:absolute; width: 186px; height: 250px; margin-left: 0px; margin-top: 0px;}
#img_contenu_menu_2 { position:absolute; width: 186px; height: 250px; margin-left: 0px; margin-top: 0px;}
#text_contenu_menu_2 { position:absolute; width: 156px; height: 220px; margin-left: 15px; margin-top: 15px;}
#contenu_menu_3 { position:absolute; width: 186px; height: 250px; margin-left: 0px; margin-top: 0px;}
#img_contenu_menu_3 { position:absolute; width: 186px; height: 250px; margin-left: 0px; margin-top: 0px;}
#text_contenu_menu_3 { position:absolute; width: 156px; height: 220px; margin-left: 15px; margin-top: 15px;}

___________________________________
script.js :
____________________________________

function disply(d){
    switch(d)
{
  case 'contenu_menu_1' : document.getElementById('contenu_menu_2').style.display = "none";
document.getElementById('contenu_menu_3').style.display = "none";

   break;
  case 'contenu_menu_2'    : document.getElementById('contenu_menu_1').style.display = "none";
document.getElementById('contenu_menu_3').style.display = "none";

   break;
  case 'contenu_menu_3'    : document.getElementById('contenu_menu_1').style.display = "none";
document.getElementById('contenu_menu_2').style.display = "none";

   break;
  
}



var aff = document.getElementById(d);
    //aff.style.display = "";
if(aff.style.display == ""){
  aff.style.display = "none";
}
else{
  aff.style.display = "";
}
}
________________________________________________


Voila ! et merci de vos commentaires.

Commentaire de jdmcreator le 05/09/2009 19:34:47

Ça ne sert à rien de le mettre ici ;) Crée un nouveau ZIP et modifie ta source ;)

Cordialement,

JDMCreator

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

Ouvrir une page html sans afficher le menu "Fichier - Edition - Affichage ..." [ par Christophe ] Bonjour, Je voudrais ouvrir la première page de mon site sans le menu "menubar" c'est à dire : le menu suivant "Fichier - Edition - Affichage ..." Com Colle pour les pros du javascript [ par Manu ] Bonjour,je propose aux passionnés de javascript de relever un défi. J'ai téléchargé les fichiers pour un menu en DHTML/JavaScript (fichiers .css et Compatibilite [ par JB ] A grand dieu pardonnez moi de mon ignorance ! Plus serieusement, je suisdebutant programmeur (etudiant en BTS d'info, je n'avais que quelques basesde Recherche script javascript pour menu deroulant [ par devess ] Bonjour,J'ai cherché mais je n'ai pas trouvé de script javascript pour faire des menus déroulants avec un affichage d'une fenêtre lors du passage curs Recherche script javascript pour menu deroulant [ par devess ] Bonjour,J'ai cherché mais je n'ai pas trouvé de script javascript pour faire des menus déroulants avec un affichage d'une fenêtre lors du passage curs Menu [ par ypothier ] Est-ce que quelqu'un peut me dire comment je peux faire pour mettre à jour une listBox sans reloader la page ?? Merci Menu [ par ypothier ] Est-ce que quelqu'un peut me dire comment je peux faire pour mettre à jour une listBox sans reloader la page ?? Merci Menu avec des div qui marche pas ss netscape... [ par seyev ] Salut ! j'ai un problème avec ce code... il ne fonctionne que sous IE et je voudrais qu'il fonctionne aussi sous netscape... Comment faire ??*** CODE MENU [ par lolokill666 ] G un probleme. G une page des cadre, la page principale "mainFrame" a des barres de défilement. Mais le menu n'en as pas car je trouve que ca ferait t Cherche aide en html ou javascript pour développement sur un catalogueur de CD [ par jlved ] Bonjour,Je développe une nouvelle version de AACD qui est un petit catalogueur de CD-Rom (freeware pour l'instant). Voilà mon pb :Je voudrais fournir


Nos sponsors


Sondage...

Comparez les prix


Apple iPhone 4 Noir (16 Go)
Entre 0€ et 0€

Visiter le guide achat

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 2,262 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)