Partage
  • Partager sur Facebook
  • Partager sur Twitter

Menu déroulant en cliquant sur un lien ?

codes : HTML / CSS

Sujet résolu
sbastien
  • HTML / CSS
13 mai 2009 à 13:48:42

Bonjour,

Je souhaitais savoir comment faire pour que quand je clique sur un lien, il y ait un petit texte en dessous qui s'affiche.

Je ne sais pas si il faut faire cela en HTML ou sur la page de mise en forme en CSS.

Merci de m'éclairer ! je ne sais pas comment faire !

Cordialement.
  • Partager sur Facebook
  • Partager sur Twitter
kokine
13 mai 2009 à 14:31:31

Salut,

je pense qu'il faut que tu utilises du javascript pour faire ce que tu veux (apres je n'y connais quasiment rien, désolé).

Essaies de poster ton message ds le forum dédié au javascript, t'aura peut etre plus de chances.

@+
  • Partager sur Facebook
  • Partager sur Twitter
karvaneg
  • HTML / CSS
13 mai 2009 à 14:33:19

Je sais pas si c'est ça que tu veux faire..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UFT-8" />
<title>Menu déroulant</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div id="conteneur-menu">
	<div id="menu">
	<dl>
		<dt>Menu 1</dt>
		<dd>
			<ul>
				<li><a href="#">Lien 1</a></li>
				<li><a href="#">Lien 1</a></li>
				<li><a href="#">Lien 1</a></li>
			</ul>
		</dd>
		</dt>
	</dl>
	<dl>
		<dt>Menu 2</dt>
		<dd>
			<ul>
				<li><a href="#">Lien 1</a></li>
				<li><a href="#">Lien 1</a></li>
				<li><a href="#">Lien 1</a></li>
			</ul>
		</dd>
		</dt>
	</dl>
	<dl>
		<dt>Menu 3</dt>
		<dd>
			<ul>
				<li><a href="#">Lien 1</a></li>
				<li><a href="#">Lien 1</a></li>
				<li><a href="#">Lien 1</a></li>
			</ul>
		</dd>
		</dt>
	</dl>
	<dl>
		<dt>Menu 4</dt>
		<dd>
			<ul>
				<li><a href="#">Lien 1</a></li>
				<li><a href="#">Lien 1</a></li>
				<li><a href="#">Lien 1</a></li>
			</ul>
		</dd>
		</dt>
	</dl>
	<dl>
		<dt>Menu 5</dt>
		<dd>
			<ul>
				<li><a href="#">Lien 1</a></li>
				<li><a href="#">Lien 1</a></li>
				<li><a href="#">Lien 1</a></li>
			</ul>
		</dd>
		</dt>
	</dl>
	
	</div>
</div>
<div id="contenu"><p>
kljklllllllllllllllllllllllllllllllllllllllllllllllllll
</p><p>
kljjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj
</p></div>
</body>
</html>



body{
background:black;
width:1000px;
}

#conteneur-menu{
background:brown;
height:40px;
width:755px;
position:relative;
margin:0; padding:0;
}

#menu{
position:absolute;
}

dl{
height:40px;
margin:0; padding:0;
display:block;
float:left;
}

dt{
width:150px;
display:block;
height:40px;
color:#FFF;
line-height:40px;
text-align:center;
border-right:dotted 1px #C98C51;
cursor:pointer;
}

dd{
display:block;
margin:0; padding:0;
background:brown;
}

dd ul{
margin:0; padding:0;
text-align:center;
list-style:none;
}

dd ul li{
display:block;
margin:0; padding:0;
}

dd ul li a{
color:#C98C51;
display:block;
text-decoration:none;
width:150px;
height:30px;
line-height:30px;
border-top:dotted 1px #C98C51;
border-bottom:dotted 1px brown;
}

dd ul li a:hover{
background:yellow;
color:red;
}

dl dd{
display:none;
}

dl:hover dd{
display:block;
}

#contenu{
color:white;
}
  • Partager sur Facebook
  • Partager sur Twitter
CactO_o's
13 mai 2009 à 14:44:26

C'est facilement possible de faire ça en HTML/CSS, il faut s'y prendre de la manière que l'à fait marsupilamie..

Petit hic : Par contre en CSS tu ne pourras faire aucun mouvement dynamique, ouverture en glissade etc...

Deuxième problème : IE6 et certaine version de IE7 n'accepte pas le :hover sur une autre balise que <a>... Sur cette exemple, le :hover se trouve sur une balise <dl>... Donc un certain nombre d'utilisateur ne pourra pas accéder à tes menus :s !

Solution : Javascript, et même plus particulièrement jQuery. Tu verras c'est très simple à mettre en place, et très puissant !
  • Partager sur Facebook
  • Partager sur Twitter
Kiou
  • HTML / CSS
13 mai 2009 à 15:20:55

il est possible de faire un menu " déroulant en XHTML "

Voici le lien :Ici

le résultat : ici

soit méthodique sur l'explication du code et sa fonctionne très bien.
  • Partager sur Facebook
  • Partager sur Twitter
CactO_o's
13 mai 2009 à 15:24:17

Comme je le disais plus haut, il n'y a pas d'effet dynamique sur ton menu..

  • Partager sur Facebook
  • Partager sur Twitter
sbastien
  • HTML / CSS
13 mai 2009 à 16:16:48

Merci beaucoup ^^'

mais en fait, ce que je cherche plus précisément, c'est à l'intérieur du corps de ma page web, avoir une liste de lien, et quand on clique sur un des liens, en dessous,on a tout simplement 2-3 lignes de textes qui s'affichent.

Je vous explique ce que je veux faire dans son contexte.

J'ai un site d'astuces ou les joueurs doivent faire des missions en suivant des indices. J'ai le nom des missions et leurs indices-réponses.

Je souhaites faire une liste avec le nom des missions, et quand le joueur clique sur une mission, il voit s'afficher en dessous les indices-réponses.

Vous voyez un peu ? ^^'

Merci en tout cas pour votre patience !
  • Partager sur Facebook
  • Partager sur Twitter
sbastien
  • HTML / CSS
14 mai 2009 à 20:46:54

Excusez moi du double poste mais quelqu'un pourrait-il m'aider ? ^^

Cordialement.
  • Partager sur Facebook
  • Partager sur Twitter
CactO_o's
16 mai 2009 à 11:35:19

Alors si c'est au click et non au survol tu ne pourras pas utiliser :hover en CSS...
Dans ce cas tu va devoir faire un peut de JavaScript :)

Je te conseil jQuery qui est très simple et très efficasse.
  • Partager sur Facebook
  • Partager sur Twitter
karvaneg
  • HTML / CSS
16 mai 2009 à 11:40:50

Je te conseille d'aller voir ce lien : http://www.grainedekeupon.fr/ccm/menu_accordeon.html

Tu peux ouvrir un menu ou un texte (c'est le même principe) soit en passant la souris dessus avec du css soit en cliquant dessus avec onClick....Regarde le fichier source html et css...

sinon tu peux aussi aller voir là : http://demos.mootools.net/Accordion
  • Partager sur Facebook
  • Partager sur Twitter
CactO_o's
sbastien
  • HTML / CSS
20 mai 2009 à 13:18:13

Grâce à vos posts j'ai réussi à rechercher ce que je souhaitais sur google !

Merci encore ! voici le lien qui m'a aidé !

http://www.commentcamarche.net/forum/a [...] vol-d-un-lien
  • Partager sur Facebook
  • Partager sur Twitter
360matt
2 décembre 2016 à 19:40:59

index.php == >>> view-source:https://marcarea.com/code/css/menu/menu01test.html

menu01.Css == >>> view-source:https://marcarea.com/code/css/menu/menu01.css

  • Partager sur Facebook
  • Partager sur Twitter