rendre les ancres invisibles html/css

salut je suis nouvelle et je dois créer un site dans le cadre scolaire.

je me demandais si nous pouvions cacher une ancre et que celle-ci apparaisse lorsque je clique sur le sous menu qui lui correspond.

Je ne vais pas parler plus, voici mon code:

CODE HTML:

 html>

<html lang="fr_FR">

		<head>
			<title>Tout sur le tennis</title>
			<link rel="stylesheet" type="text/css" href="tennis.css">
			 <meta charset="UTF-8">
		</head>

	<body>
		<header>
			<div class="container">
				<div class="left">
					<div class="logo">Tout sur le tennis</div>
			</div>
			<div class="right">
				<ul class="menu">
					<li class="title">
						<a href="#">Le tennis </a>
						<ul class="sous_menu">
             				<li><a href="#ancre">Presentation</a></li>
              				<li><a href="#ancre1">D'ou vient-il?</a></li>
							<li><a href="#ancre2">Les Regles</a></li>
							<li><a href="#">Les categories d'ages au tennis</a></li>
						</ul>
					</li>

					<li class="title">
						<a href="#">Les Matchs</a>
						<ul class="sous_menu">
							<li><a href="#">Les Classements</a></li>
							<li><a href="#">Les matchs en simple</a></li>
							<li><a href="#">Les matchs en double</a></li>
						</ul>
					</li>

					<li class="title">
						<a href="#">Tournois  </a>
						<ul class="sous_menu">
							<li><a href="#">Comment ca marche?</a></li>
							<li><a href="#">Combien de matchs peut-on jouer?</a></li>
							<li><a href="#">Contre qui jouons nous?</a></li>
						</ul>
					</li>

					<li class="title">
						<a href="#">Quelques joueurs </a>
						<ul class="sous_menu">
							<li><a href="#">Jo-Wilfried Tsonga</a></li>
							<li><a href="#">Lucas Pouille</a></li>
							<li><a href="#">Caroline Garcia</a></li>
							<li><a href="#">Kristina Mladenovic</a></li>
						</ul>
					</li>

					<li class="title">
						<a href="#">Les Raquettes</a>
						<ul class="sous_menu">
							<li><a href="">Les premieres raquettes</a></li>
							<li><a href="">Raquettes plus recentes</a></li>
						</ul>
					</li>
		    </div>
			</div>

		  </header>
		  			<br>
       				
       				<img src="imagetennis.jpg">
    

            <h2 id="ancre">Présentation</h2>

      <p>
        "Le tennis, c'est plus qu'un sport. C'est un art, au même titre que la danse." Bill Tilden <br>
        Le tennis est l'un des sports le plus pratiqué au monde. Adapté du fameux jeu de paumes, surtout pratiqué en Angleterre, le tennis voit sa cote de popularité augmenter d'années en années.
        Le tennis est un sport de raquette mondialement connu et apprécié.
        En France, le tennis est le deuxieme sport le plus pratiqué apres le football et ses 1 100 000 licenciés.<br>
        A ce jour, nous comptons plus de 26 millions de personnes autant bien filles que garçons faisant du tennis. <br>
      </p>
      
            <h2 id="ancre1">D'où vient-il?</h2>
      	<p>
      	Le tennis est une variante du fameux jeu de paume. Le jeu de paume était un jeu français qu'avaient créé les moines afin de faire un peu de sport. <br>
      	Le jeu de paume consistait a r'envoyer une balle , appelée "eteuf", principalement à main nue mais certaine variante autorisaient le port d'un gant en cuir. Le gant en cuir s'est petit a petit transformé pour qu'ensuite apparaisse la <a href="raquettes.html">raquette</a>. <br>
      	Mais le jeu s'est tres vite répendu et faisait aussi bien fureur dans la cour que dans les quartiers. Les autorités ont du interdire ce jeu à quelques endroits car nous pouvions plus circuler.<br>
      	Le jeu est pris d'un succès fou et traversa rapidement la manche pour arriver en Angleterre. C'est justement en Angleterre que le jeune britanique Walter Clopton Winglfied déposa un brevet pour ce sport qu'il appela "Tennis". Le mot "Tennis" vient en fait du mot "Tenètz" que disaient les joueurs du jeu de paumes avant de commencer leur match. Puis petit à petit, avec l'accent anglais le mot "Tenètz" s'est transformé en "Tennis".
     	</p>


      		<h2 id="ancre2">Les Règles</h2>
      	<p>
      		<h3>Le court:</h3>
      	Le court de tennis est un rectangle de 23,77m de long sur 8,23m (simple) ou 10,97m (double). Séparé en son milieu par un filet, d’une hauteur de 0,914m (hauteur réglementaire).<br>
      	<br>

      		
      		<h3>Choix du côte et service:</h3>
      	Au début du match, afin de définir le côté dans lequelle on va jouer, les joueurs effectuent entre eux un tirage au sort. A la suite de ce tirage au sort, le joueur 1 a gagné le tirage au sort, il peut choisir s'il sert ou bien il peut choisir le côté dns lequelle il va commencer le match.<br>
      	Si le joueur 1 choisi le service, alors le joueur 2 peut choisir son côté. <br>
      	En revanche si le joueur 1 choisi le côté, alors le joueur 2 doit servir. <br>
      	<br>

      		
      		<h3>Serveur et Relanceur:</h3>
      	Le « serveur » est le joueur qui met la balle en jeu pour le premier point. Il a le droit à deux balles pour débuter le point, mais s’il ne réussit <br>
      	aucune de ses deux balles, alors il perdra le point dès l’engagement.<br>
		Le « relanceur », est le joueur qui s’apprête à renvoyer la balle servie par son adversaire.
		<br> <br>

      		
      		<h3>Les Changements de côtés:</h3>
      	A la fin du premier jeu, les joueurs changent de côté. Puis, ils changeront de côté tous les deux jeux jusqu'a la fin du set. <br>
      	Ils procèderont ainsi jusqu'à la fin du match. En cas de <id="#">, les joueurs changent de côté tous les 6 points. <br>
      	Par exemple si il y a 4/2, les joueurs doivent changer de côté (4+2=6).
      	<br> <br>


      		<h3>Le jeu:</h3>
     	Tout d'abord, il faut savoir que pour le décompte des points, un jeu se compose de 4 points.<br><br>
     	Lorsque nous devons ennoncer les points, nous commençons <big> <strong>toujours</strong> </big> par ceux du service et ensuite ceux du relanceur.<br><br>
     	Pas de point : « zéro »<br> <br>

		Premier point : « 15 » <br> <br>

		Deuxième point : « 30 » <br> <br>

		Troisième point : « 40 » <br> <br>

		Quatrième point : « jeu » <br> <br>

		Si les 2 joueurs ont marqué 3 points, alors on compte « 40A ».<br><br>
		Au tennis, un set correspond à 6 jeux. Il est parfois possible qu'il y est « 5-5 », il faut donc aller jusq'à 7 jeux car il faut qu'il y est deux points d'écart.<br>
		En revanche si le match est serré est qu'il venait a voir « 6-6 », on effectue alors un <big><strong>«Tie-Break»</strong></big>.<br>
		Un <big><strong>«Tie-Break»</strong></big> est un jeu <big><strong>décisif</strong></big>. On compte les points du <big>tie-break</big> comme ceci :<br>
		« Zéro », « 1 », « 2 », « 3 », … jusqu'à 7. Le premier à 7 remporte le point décisif et donc le set a condition d'avoir deux point d'écart avec son adversaire.<br>
		Au début du « jeu décisif », le joueur qui démarre au service va servir une fois, puis chacun servira deux fois jusqu'à la fin du tie-break.     
      
      

	</body>
  
</html>

CODE CSS:

header{
 	background-color:#FE0133;
 	height: 70px;
 	width: 1000px;
	position:relative;
	font-family:mapolice;
}

.left{float:left}
.right{float:right;}

.logo {
	color:#fff;
	font-size: 50px;
	text-transform: uppercase;
	line-height: 70px;
	font-weight: 800;
	font-family:mapolice;

}

@font-face{
font-family:mapolice;
src: url(Ineptic.otf);
}

.container {
	width: 1000px;
	margin: auto;
}

.menu {
	padding:0;margin: 0;
}

.menu .title {
	display: inline-block;
	float: left;
	position: relative;
	padding:23px 10px;
	transition: 1.5s;
}

.menu .title a {
	color:#fff;
	text-decoration:none;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 20px;
}

.menu .title:hover {
  background-color: #AE0000;
}

.menu .sous_menu {
	display: block;
	position: absolute;
	visibility:hidden;
	height: 0;
	top: 65px;
	left: 0;
	transform: scaleY(0);
	transform-origin: 50% 0;
	transition: transfrom 1s ease;
	background-color: #fff;
	box-shadow: 0 2px 3px rgba(34,36,38,.15);
	border: 1px solid rgba(34,36,38,.15);
	border-radius: 0 0 5px 5px;
}

.menu .title:hover .sous_menu {
	visibility: visible;
	height: auto;
	transform: scaleY(1);
}

.menu .sous_menu li {
	padding: 0;
	display:inline-block;
	color: #000;
	float: left;
	width: 150px;
	margin-left: -40px;
	padding: 5px;
	transition: 1.5s;

}

.menu .sous_menu a {
	text-transform: none;
	color: #242424;
	padding: 0 0 0 5px;
	font-weight: normal;
	font-size: 17px;

}

.menu .sous_menu li:hover {
	background-color: #f9f9f9;
	border-left: 3px solid #3498db;
}

body{
	width: 1000px;
  	margin: auto;
}



h2{
  font-size: 50px;

}

Merci de votre aide, j'attend vos message.

PS: est ce que nous pouvons faire cette manipluation sans javascript? car nous ne savons pas encore comment faire.

merci

-
Edité par ElisaLegrand1 16 décembre 2017 à 16:53:09

ElisaLegrand1

15 décembre 2017 à 23:28:13

Lamecarlate

16 décembre 2017 à 8:03:28

Bonjour,

une très bonne source de menus déroulants : https://frogweb.fr

Note, c'est au hover (survol par la souris) que ça va s'ouvrir. Si tu veux au clic précisément, alors il faudra du JavaScript.

Pas d'aide concernant le code par MP, le forum est là pour ça :)

16 décembre 2017 à 15:42:03

merci de t'as réponse mais je n'ai pas vraiment compris.

j'aimerais en fait que mon ancre soit cachée, et que lorsque j'appuie sur <li><a href="#ancre2">Les Regles</a></li> par exemple bah c'est a ce moment la que

l'ancre apparaît.

-
Edité par ElisaLegrand1 16 décembre 2017 à 15:42:27

16 décembre 2017 à 16:20:36

Es-tu allée voir le lien que j'ai donné ?

(de plus, merci d'éditer ton titre pour en enlever les majuscules, sur le net c'est comme si tu criais)

-
Edité par Lamecarlate 16 décembre 2017 à 16:21:07

16 décembre 2017 à 16:54:17

oui j'y suis allée et désolé pour le titre j'ai modifié tout ça

AliasDmc

16 décembre 2017 à 17:32:08

En fait, ce que tu veux si je me base sur ton code

c'est qu'au début

 <h2 id="ancre">Présentation</h2>
 <p>"Le tennis, c'est plus .... aisant du tennis. <br></p>

soit caché et que quand tu cliques sur

 <li><a href="#ancre">Presentation</a></li>

le bloc

apparaisse.

Et cela soit identique pour les autres blocs liés par une ancre de ton menu

C'est ca?

Découvrez les Css avec la zonecss.fr

16 décembre 2017 à 18:04:29

merci de ta réponse, tu te r'approches de ce que je veux, mais j aimerais l'inverse.

j'aimerais que l'ancre soit cachée et que quand j'appuie sur <li><a href="#ancre1">D'ou vient-il?</a></li>

le texte correspondant à d'ou vient-il s'affichent. Mais qu'il ne soit pas visible avant.

si tu sais comment je pourrais faire merci de répondre.

Anonyme

16 décembre 2017 à 18:27:16

Tu peux utiliser la pseudo classe ':target'

Exemple fiddle.

19 décembre 2017 à 20:15:50

merci mais cela ne marche pas, je dois surement mal utiliser ces balises

24 décembre 2017 à 19:49:48

ou alors est-il préférable que j'utilise une page html différente pour chaque menu et sous menu?

Hsuissia

26 décembre 2017 à 16:01:08

Donc si nous reprenons, tu désire avoir donc un menu avec tous les liens, et toutes les encres caché par défaut, puis visible quand on clique sur le lien voulu.

C'est exactement ce que t'a montré Turwaithion, tu peux utiliser target. Mais pour que tu puisse le faire toi il va falloir un peu revoir ton code. Il va falloir que l'encre englode tout ce que tu désire cacher/montrer au clic.
Peut etre une div avec l'id, et dedans ton H2 et P
Voici ce que donne le fiddle avec des div qui englobe le tout ( je me suis permis de réutiliser le tiens Turwa' ) https://jsfiddle.net/uv484ym7/2/

---

Sinon tu peux jouer avec du css et un peu de js si tu maitrise un peu javascript

Voir une araignée c'est rien ... Le pire c'est quand tu ne la vois plus !

Les ancres peuvent-elles etre invisibles?

rendre les ancres invisibles html/css

Supprimer

Modérer

Signaler le message aux modérateurs