MENU (ENCORE...) menu, Source N°36627

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 117

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

Toutes les sources de la catégorie Menu & Co

Sources en rapport avec celle ci

Commentaires

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

Ouvrir une page html sans afficher le menu "Fichier - Edition - Affichage ..." par Christophe

Colle pour les pros du javascript par Manu

Compatibilite par JB

Recherche script javascript pour menu deroulant par devess

Recherche script javascript pour menu deroulant par devess

Menu par ypothier

Menu par ypothier

Menu avec des div qui marche pas ss netscape... par seyev

MENU par lolokill666

Cherche aide en html ou javascript pour développement sur un catalogueur de CD par jlved