Menu (encore...)

0/5 (13 avis)

Snippet vu 8 400 fois - Téléchargée 30 fois

Commenter

Contenu du snippet

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 / Exemple : 


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

A voir également

Ajouter un commentaire Commentaires
Sannazzarotiti Messages postés 228 Date d'inscription jeudi 1 septembre 2005 Statut Membre Dernière intervention 12 avril 2009
20 mars 2006 à 08:12
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.
kiki2sirom Messages postés 153 Date d'inscription mardi 17 août 2004 Statut Membre Dernière intervention 23 décembre 2010
20 mars 2006 à 11:03
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
Sannazzarotiti Messages postés 228 Date d'inscription jeudi 1 septembre 2005 Statut Membre Dernière intervention 12 avril 2009
20 mars 2006 à 12:57
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)
kiki2sirom Messages postés 153 Date d'inscription mardi 17 août 2004 Statut Membre Dernière intervention 23 décembre 2010
20 mars 2006 à 13:18
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
Sannazzarotiti Messages postés 228 Date d'inscription jeudi 1 septembre 2005 Statut Membre Dernière intervention 12 avril 2009
20 mars 2006 à 18:18
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)
S'inscrire maintenant

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.