Menu

[Javascript] Ajout de code onclick sur 1 lien [Résolu/Fermé]

- - Dernière réponse :  snip74 - 10 mars 2009 à 14:07
Bonjour à tous :))

Sur mon site, j'ai un menu que j'aimerais rendre un peu interactif avec javascript :)

Sur mon menu j'ai un lien Accueil. J'aimerais, quand je clique dessus, les sous-menus s'affichent à la suite.

En d'autres termes plus simples, j'aimerais ajouter quand je clique sur accueil, ce bout de code :
  <td bgcolor=#336185" class="liensousmenu">
    <img src="entre_ss_titre.png" alt=""/>
    <img src="fleche.png" alt=""/><a class="menuitems" href="index.php?page=identification">Identification</a>
  </td>
</tr>




Mon lien accueil se présente comme ceci :
<a class="menuitems" href="index.php?page=news" onclick="ouvre_ss_menu">Accueil</a>



Merci pour votre aide car je suis vraiment mauvais en javascript :)
Afficher la suite 

8 réponses

Meilleure réponse
Messages postés
1771
Date d'inscription
lundi 11 décembre 2000
Statut
Membre
Dernière intervention
23 décembre 2009
598
1
Merci
Lorsqu'une option d'un menu permet de masquer/afficher des sous-menus comme par ex l'option Etudiant on n'associe généralement pas de lien avec. Seules les sous-options du sous-menu sont censées rediriger vers un lien.
En effet si lorsque tu cliques sur Etudiant tu affiches le sous-menu qui disparâit aussitôt pour laisser la place à une nouvelle page à quoi bon ?

Normalement un menu ne devrait jamais être rechargé. Cependant afin de ne pas se brider avec les frames c'est souvent ce qu'on fait.



Par contre en PhP on peut éventuellemnt changé de pages en pré-déroulant un menu donné.

Par ex
1 : Tu charges ta page d'accueil avec le menu : aucun sous-menu n'est affiché
2 : Tu cliques sur le lien Etudiant
3 : La page Etudiant est alors chargée : cette page contient également le menu et affiche le sous-menu étudiant

Ce qui donne :

styles.css (feuille de styles) :


*
{
	font-family : arial;
}

.menu
{
	font-size : 12pt;
	font-weight : bold;
	font-color : #0000C0;
}

.sous_menu 
{
	font-size : 10pt;
	font-weight : normal;
	font-color : #0000C0;
	margin-left : 20px;
}

.titre
{
	font-size : 18pt;
	font-weight : bold;
}





main.php (page de démarrage) :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" href="styles.css" type="text/css">
</head>

<body>
<?php
include('menu.php');
?>
</body>
</html>




menu.php :

<?php
$menuID="";
if (isset($_GET["menuID"])) $menuID=$_GET["menuID"];
?>
<table class="menu" width="200px">
	<tr>
		<td>
			<a href="page_accueil.php?menuID=accueil">Accueil</a>	
			<?php
				if ($menuID == "accueil")
				{

					include("sousmenu_accueil.php");
				}
			?>
					
		</td>
	</tr>
	

	<tr>
		<td>
			<a href="page_etudiant.php?menuID=etudiant">Etudiants</a>	

			<?php
				if ($menuID == "etudiant")
				{

					include("sousmenu_etudiant.php");
				}
			?>
					
		</td>
	</tr>
</table>




page_acccueil.php :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Page accueil</title>
<link rel="stylesheet" href="styles.css" type="text/css">
</head>

<body>
<table>
	<tr>
		<td>
		<?php 
			include('menu.php');
		?>
		</td>
		
		<td>
			<p class="titre">Vous êtes sur la page accueil ! </p>
		</td>
	</tr>
</table>
</body>
</html>



page_etudiant.php :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Page étudiant</title>
<link rel="stylesheet" href="styles.css" type="text/css">
</head>

<body>
<table>
	<tr>
		<td>
		<?php 
			include('menu.php');
		?>
		</td>
		
		<td>
			<p class="titre">Vous êtes sur la page étudiant ! </p>
		</td>
	</tr>
</table>
</body>
</html>




Copie toutes les pages dans un sous-répertoire accessible à ton serveur PHP en les nommants comme indiqué puis lance
http://(adresse de ton serveu PHP)/main.php


Dire « Merci » 1

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 42551 internautes nous ont dit merci ce mois-ci

1
Merci
merci encore pour ton aide ;)

je l'ai fais selon ton exemple en php,ca fonctionne pas mal !!

http://www.duotone.ch/neo/AnciensEtudiants/index.php

ps : les erreurs d'include c'est normal j'ai pas encore mis les pages derrière ;)

Problème résolu donc ;) merci !!

Dire « Merci » 1

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 42551 internautes nous ont dit merci ce mois-ci

Messages postés
1771
Date d'inscription
lundi 11 décembre 2000
Statut
Membre
Dernière intervention
23 décembre 2009
598
1
Merci
Bjr

Oui en effet c nickel comme ça ;-)

En plus avec le haut débit on a l'impression d'avoir affaire à un vrai menu.


Bon développement.

@+

Dire « Merci » 1

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 42551 internautes nous ont dit merci ce mois-ci

Bonjour ,
je viens de trouvé cette source et je c'est que je suis pas au bon endroit.
mes se que je cherche c'est de proposé en un seule clic sur le même boutton de mettre notre page a démarrage sans les obligers.
je m'explique mes avant tout voici le code.
<input type="submit" value="Accéder au T'chat" onclick="return open_chat()"><hr>

j'aimerai qu'une personne qui clic sur Accéder au T'chat et une alerte provisoire qui lui propose d'ajouter notre page en démarrage (compatible pour FF et IE) si la personne clic sur oui ou sur non que son clic sois que son clic et validé et a la prochaine connections sa ne lui propose plus.
donc j'accède au tchat voulez vous mettre le tchat en page démarrage (oui/non) un cookie se créer je reviens demain je refait et j'accède au tchat sans aucune alerte. merci d'avance de toute l'aide que vous pourrais m'apportai.
Cordialement Stéphane
0
Merci
Si c'est possible de le faire en php je suis pas contre , au contraire :))
Messages postés
1771
Date d'inscription
lundi 11 décembre 2000
Statut
Membre
Dernière intervention
23 décembre 2009
598
0
Merci
Bsr

Oui c'est possible d'ajouter du code HTML dynamiquement avec Javascript.

Mais je ne comprends pas très bien ce que tu veux faire. Lorsque tu cliques sur ton lien Accueil ça te charge déjà la page index.php?page=news non ? Donc ça rique de recharger également ton menu à moins que tu n'utilises des frames.

Pourrais tu poster l'adresse de ta page histoire d'accèder à tout le code ?


0
Merci
oui effectivement ca me charge directement la page news, cependant, sous accueil, j'aurai d'autres sections, genre Identification, Recherche Utilisateur etc... et je pensais que ca pouvais être sympa :)

voici le lien : www.duotone.ch/neo/AnciensEtudiants/

Je suis sur que le script ou le code php doit etre tout con :p
Messages postés
1771
Date d'inscription
lundi 11 décembre 2000
Statut
Membre
Dernière intervention
23 décembre 2009
598
0
Merci
Bonjour

heu non ajouter dynamiquement du code à un tableau en manipulant DOM via Javascript n'est pas une mince affaire .... :-(


En Php c'est assez simple tu passes une variables à ta page et en fonction de sa valeur vrai/faux par ex tu inclus ou tu n'inclus pas le sous-menu. Cependant dès que tu as plusieurs sous-menu ça devient vite compliqué ...


Une autre façon de faire en JavaScript + feuille de style CSS est de jouer sur l'affichage/le masquage des sous-menus grace à l a propriété display. Ta page contient toujours le code des sous-menus : son contenu ne change plus dynamiquement et ça change tout :-) Par contre il faut virer les styles intégrés directement dans les balises (quelle horreur !!!!) et utiliser les feuilles de style.

Ex :


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

<style>

*
{
	font-family : arial;
}

.menu
{
	font-size : 12pt;
	font-weight : bold;
	font-color : #0000C0;
}

.sous_menu 
{
	font-size : 10pt;
	font-weight : normal;
	font-color : #0000C0;
	margin-left : 20px;
	display : none;
}

</style>


<script type="text/javascript">
<!--
function toggle(menuID)
{
	var elt = document.getElementById(menuID);


	// Recherche du style en cours : attention le style en cours est read-only!
	var eltStyle = elt.currentStyle || window.getComputedStyle(elt, null);

	if (eltStyle.display == "none")
	{
		elt.style.display = "block";
	}
	else
	{
		elt.style.display = "none";
	}

}

//-->
</script>

</head>

<body>
<table class="menu">
	<tr>
		<td>
			<a href="javascript:void(0);" onclick="toggle('accueil')">Accueil</a>	

			<table id="accueil" class="sous_menu">
				<tr>
					<td>
						<a href="javascript:void(0);">Identification</a>	
					</td>
				</tr>
				<tr>
					<td>
						<a href="javascript:void(0);">Recherche</a>	
					</td>
				</tr>
			</table>
					
		</td>
	</tr>
	

	<tr>
		<td>
			<a href="javascript:void(0);" onclick="toggle('etudiant')">Etudiants</a>	

			<table id="etudiant" class="sous_menu">
				<tr>
					<td>
						<a href="javascript:void(0);">Sous-menu 1</a>	
					</td>
				</tr>
				<tr>
					<td>
						<a href="javascript:void(0);">Sous-menu 2</a>	
					</td>
				</tr>
			</table>
					
		</td>
	</tr>

</table>

</body>
</html>



je te laisse essayer et t'en inspirer


tester sous IE et FF

Voilà

0
Merci
waouh!!!! merci bien :)


cependant comment fait l'utilisateur pour naviguer si les urls sont :

<a href="javascript:void(0);" onclick="toggle('etudiant')">Etudiants</a>

je peux pas les redirigé comme ici dans ton exemple vers une page étudiants.


Merci beaucoup pour ton aide en tout cas :))