CodeS-SourceS est hébergé par Frontier.fr

Cliquez ici pour mettre ce site au démarrage de votre navigateur

AccueilCodesTutorielsForumsEmploiLivresGuide achatConnexion

begin process at 2009 07 05 21:22:13

SILVERLIGHT 3 : COMMUNICATION ET MULTICAST par KooKiz

[PERSO] DéCOUVERTES ESTIVALES : LINUX (PART I) par FREMYCOMPANY

[REFACTORING] RESHARPER POUR VISUAL STUDIO 2010 (PREVIEW) par tja

[REFACTORING] ANALYSER VOS EXCEPTIONS AVEC RESHARPER EXCEPTIONAL par tja

SHAREPOINT 2007 : PATTERNS & PRACTICES SHAREPOINT GUIDANCE par phil

RE : BOUCLES ! par cedcyr

BOUCLES ! par cedcyr

CODE POUR EDITEUR DE TEXTE AVEC PRISE EN CHARGE DU COPIER/COLLER GARDANT LA MISE EN FORME par lolhangman

RE : COMMENT RéCUPéRER LES VARIABLES DE PLUSIEURS FORMULAIRES POUR OUVRIR FICHIER EXCEL par Bul3

+ de logiciels à télécharger

1 464 851 membres
345 nouveaux aujourd'hui
15 045 membres club

Trouver une ressource

Trouvez une ressource parmi 40 095 codes, 1 303 007 messages d'aide etc...

Recherche: dans [ Dernières recherches ]

Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

MENU (ENCORE...)

Information sur la source

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 : 5 761

Auteur : Artispsyko

Ecrire un message privé

Note :
Aucune note

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

TBFRAME: TAB BROWSING FRAME par triumphs

MENU PRINCIPAL par ali1987

MENU AVEC ROULETTE par jdmcreator

JVSMENU : MENUS CLASSIQUES ET CONTEXTUELS AVANCÉS EN JAVASCR... par emericv

MENU HORIZONTALE RÉALISÉ AVEC DYNAMIC par Kimjoa

Toutes les sources de la catégorie Menu & Co

Sources en rapport avec celle ci

MENU PRINCIPAL par ali1987

MENU AVEC ROULETTE par jdmcreator

JVSMENU : MENUS CLASSIQUES ET CONTEXTUELS AVANCÉS EN JAVASCR... par emericv

MENU HORIZONTALE RÉALISÉ AVEC DYNAMIC par Kimjoa

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°) 
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