begin process at 2012 02 14 02:51:28
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Menu & Co

 > MENU (ENCORE...)

MENU (ENCORE...)


 Information sur la source

Note :
Aucune note
Catégorie :Menu & Co Classé sous :menu Niveau :Débutant Date de création :19/03/2006 Date de mise à jour :19/03/2006 23:23:12 Vu :6 638
Auteur : Artispsyko

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

 Description

Je me baladais tranquilement sur ce joli site (et tout et tout) dans la rubrique "menu", lorsque me vint l'idée d'essayer moi aussi ces jolis menu tout beau (ou tout moche, à voir...).
Voici finalement l'aboutissement de longues secondes de réflexion (ou plutot de la recherche de celui que jai fait hier pour  mon site, et de son adaptation).

Source

  • <!-- Script -->
  • <script>
  • var etat = 0;
  • //pour le block
  • function dynam_p1() {
  • if (etat == 1)
  • {document.all.planque1.style.display = "none";
  • etat = 0;
  • }
  • else
  • {document.all.planque1.style.display = "block";
  • etat = 1;
  • }
  • }
  • //pour le tableau
  • function dynam_p2() {
  • if (etat == 1)
  • {document.all.planque2.style.display = "none";
  • etat = 0;
  • }
  • else
  • {document.all.planque2.style.display = "block";
  • etat = 1;
  • }
  • }
  • </script>
  • <!-- Style, histoire d'égayer un peu tout ça. -->
  • <style>
  • a {color: Grey;}
  • #planque1, #planque2 { display: none;}
  • .menu {
  • margin: 0px 0px 5px 0px;
  • color: White;
  • background: Black;
  • border: 1px solid red;
  • width: 150px}
  • .titre {
  • margin: 0px;
  • border-bottom: 1px solid red;
  • font-size: 110%;}
  • </style>
  • <!-- Partie en HTML -->
  • <!-- Avec un block -->
  • <div class="menu">
  • <p class="titre"><a href="#" onClick="dynam_p1()">>Menu</a></p>
  • <ul id="planque1">
  • <li>Element 1</li>
  • <li>Element 2</li>
  • <li>Element 3</li><br>
  • </ul>
  • </div>
  • <br>
  • <!-- Ou avec un tableau -->
  • <div class="menu"><a href="#" onClick="dynam_p2()">>Menu</a></div>
  • <table width="151px" border="1" class="menu" id="planque2">
  • <tr border="1">
  • <td>Element 1</td>
  • </tr>
  • <tr border="1">
  • <td>Element 2</td>
  • </tr>
  • <tr border="1">
  • <td>Element 3</td>
  • </tr>
  • </table>
<!-- Script -->
<script>
var etat = 0;

//pour le block
function dynam_p1() {
	if (etat == 1)
		{document.all.planque1.style.display = "none";
		etat = 0;
		}
	else
		{document.all.planque1.style.display = "block";
		etat = 1;
		}
	}
	
//pour le tableau
function dynam_p2() {
	if (etat == 1)
		{document.all.planque2.style.display = "none";
		etat = 0;
		}
	else
		{document.all.planque2.style.display = "block";
		etat = 1;
		}
	}
</script>


<!-- Style, histoire d'égayer un peu tout ça. -->
<style>
a {color: Grey;}
#planque1, #planque2 {	display: none;}
.menu {
	margin: 0px 0px 5px 0px;
	color: White;
	background: Black;
	border: 1px solid red;
	width: 150px}
.titre {
	margin: 0px;
	border-bottom: 1px solid red;
	font-size: 110%;}
</style>




<!-- Partie en HTML -->

<!-- Avec un block -->
<div class="menu"> 
  <p class="titre"><a href="#" onClick="dynam_p1()">>Menu</a></p>
  <ul id="planque1">
    <li>Element 1</li>
    <li>Element 2</li>
    <li>Element 3</li><br>
  </ul>
</div>
<br>

<!-- Ou avec un tableau -->
<div class="menu"><a href="#" onClick="dynam_p2()">>Menu</a></div>
<table width="151px" border="1" class="menu" id="planque2">
  <tr border="1">
    <td>Element 1</td>
  </tr>
  <tr border="1">
    <td>Element 2</td>
  </tr>
  <tr border="1">
    <td>Element 3</td>
  </tr>
</table>

 Conclusion

Merci à moi-même pour mon humour, ainsi qu'à ma personne pour son égocentrisme.
Non mais blague à part, rien à ajouter.
Pas testé sous IE (Firefow powa! :p)


 Historique

19 mars 2006 23:23:12 :
Petite correction d'orthographe.

 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 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 ANIMER HORIZONTALE OU VERTICAL , ACCÈSSIBLE SANS JS (SA... par Kimjoa
Source avec Zip MENU CONTEXTUEL GRÂCE AU CLICK DROIT DE LA SOURIS AVEC DES M... par OB1_12

Commentaires et avis

Commentaire de Sannazzarotiti le 20/03/2006 08:12:09

J'adore ta source, mais pourait tu mettre la mettre dans un fichier zip stp car il y a des numero de ligne quadn tu fait copier coller.

Au niveau du code je ne connait presque rien au javascript et je ne peut donc pas trop te noter sur ce point.

Commentaire de kiki2sirom le 20/03/2006 11:03:23

Oui alors, heu, tu testes quelque chose sur Firefox qui pour toi marche, mais non !!!, et tu ne l'as pas testé sous IE, je te confirme que ça marche sous IE.

Tu prends quelque chose ??

1°) <!-- Style, histoire d'égayer un peu tout ça. -->
heu, tu plaisantes, j'espère... ton menu est quand même super laid, désolé de te le dire...

2°) De plus, préférer, à mon avis, mettre le CSS dans un fichier séparé, si on veut utiliser ce menu à plus "grande" échelle, sinon ça va vite devenir illisible.

je ne m'y connais pas assez pour juger la syntaxe du CSS, mais ...(si quelqu'un pouvait juger pour moi)

3°) ne fonctionne pas sous Firefox (comme précisé ci-dessus) : le menu ne se "déroule" pas

4°) les 2 fonctions peuvent être regroupées en 1 seule, évidemment, si tu remarques bien, elles font quasiment la même chose avec les mêmes données.

Il faut donc penser au passage de paramètres.

cordialement

kiki

Commentaire de Sannazzarotiti le 20/03/2006 12:57:32

Mon avis sur ton commentaire
1°) Je le trouve beau, il faut juste le modifiez a son gout
2°) D'accord avec toi
3°) Moi j'ai firefox 1.6 et sa marche parfaitement et pareil qur IE
4°) Peut etre, je te fait confiance.

Pour le css c'est pas bien espacer par contre,

<style>
a
{
color: Grey;
}

#planque1, #planque2
{
display: none;
}

.menu
{
margin-left:5px;
color: White;
background-color: Black;
border: 1px solid red;
width: 150px
}
.titre
{
    margin: 0px;
    border-bottom: 1px solid red;
    font-size: 110%;
}
</style>

J'ai juste mieu mis en page et corriger certain truc (comme background en background-color)

Commentaire de kiki2sirom le 20/03/2006 13:18:46

Re
1°) question de goûts et de couleurs : perso, gris sur fond noir, moyen...
3°) marche pas chez moi sous Firefox 1.5 : bizarre cette histoire...

kiki

Commentaire de Sannazzarotiti le 20/03/2006 18:18:34

Oué pour le 1 je suis d'accord, donc il serait compatible avec firefox 1.6 et pas le 1.5

Quelqu'un qui a le 1.5 pourait t'il comfirmé? (histoire d'etre vraiment sur)

Commentaire de Sannazzarotiti le 20/03/2006 18:31:03

Oué pour le 1 je suis d'accord, donc il serait compatible avec firefox 1.6 et pas le 1.5

Quelqu'un qui a le 1.5 pourait t'il comfirmé? (histoire d'etre vraiment sur)

Commentaire de bnick le 20/03/2006 18:39:48

Plutôt sympa comme menu, mais c'est vrai que ce serait mieux avec le css dans un fichier séparé.
Sinon, moi cela fonctionne avec firefox 1.5.

Commentaire de Sannazzarotiti le 20/03/2006 19:02:16

Je chercher exactemetn pareil mais a l'horizontale :(

Commentaire de POULIQUEN le 21/03/2006 07:31:18

Note : 1.
No comment, même pour débutant.

PS : Sannazzarotiti
Pour un menu vertical ou horizontal :
http://openweb.eu.org/articles/menu_universel/

Commentaire de Sannazzarotiti le 21/03/2006 07:56:38

Merci, tu est un peu dur avec la note, non?

Mais merci pour le lien

Commentaire de econs le 12/04/2006 09:09:35 administrateur CS

Ce script a un mérite : il est suffisamment simple pour être appréhendé par des débutants.
Question couleurs : chacun ses goûts. Moi je n'aime pas toutes ces couleurs sombres.

Quelques petits problèmes d'affichage des bordures de la table du deuxième menu avec FireFox 1.7

Commentaire de Sannazzarotiti le 12/04/2006 12:59:28

Pour la couleur tu modifie.

Commentaire de kiki2sirom le 13/04/2006 10:29:11

il est dommage que l'auteur de cette source ne donne pas son avis sur les différentes remarques faites... mais bon...
alors bon, la couleur en soi n'est pas un problème car comme précisé, elle se modifie facilement.

mais je persiste : gris sur fond noir, c pas mon truc, mais de là à la trouver beau !!!! ;)

en effet le script est simple pour des débutants, et comprendre l'interaction javascript-html-css
ok pour ça, je suis d'accord
mais, comme précisé par pouliquen, d'autres menus bien plus intéressants existent, donc bon...

de plus, on n'a pas fait de remarques sur la syntaxe en elle-même, même si les 2 fonctions peuvent et doivent être regroupées en 1 seule, ce n'est pas une faute en soi, juste un problème d'optimisation :

<script> doit être transformé en <script type="text/javascript">
<style> doit être transformé en <style type="text/css">
<br> doit être transformé en <br />

je confirme, chez moi ça ne marche pas sous Firefox : "document.all has no properties", message de la console, le menu ne se déroule pas quand je clique.

voilà

kiki

 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

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode
 
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,090 sec (3)

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)