[HTML] Problème avec la balise <a> par TristanBouyer - page 1

Bonjour tous le monde ! Je suis un jeune débutant en programmation et j'ai un problème qui m'embête un peu...

Tout d'abords le code n'est pas de moi, j'ai juste fait quelques modifs dessus c'est tout.

Donc le problème est que je n'arrive pas à cliquer sur les liens dans le menu de navigation.

Je vous mets le code complet car je ne vois vraiment pas ou pourrais ce trouver le problème :/

<!DOCTYPE html>
<html>
<head>
	<title>Quizz</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
	<div class="container">
		<div id="logo">RETRO</div>
		<div class="navigation-wrapper">
			<div class="navigation-button">
				<i class="fa fa-bars"></i>
			</div>
			<div class="navigation-menu">
				<ul>
					<li><a href="index.html">HOME</a></li>
					<li><a href="">GALLERY</a></li>
					<li><a href="">CONTACT</a></li>
					<li><a href="">LOCATION</a></li>
					<li><a href="registration.php">REGISTRATION</a></li>
					<li><a href="survey.php">SURVEY</a></li>
				</ul>
			</div>
		</div>
		<section class="hero">
			<h1>CREATIVE <br> 
			<span>INTRODUCTION</span></h1>
			<div class="button">
				<a href="" class="btn1">Get Started</a>
				<a href="" class="btn2">Get Featured</a>
			</div>
		</section>
	</div>
<script>
    var navButton = document.querySelector('.navigation-button');
	var navMenu = document.querySelector('.navigation-menu');
	var win = window;

	function openMenu(event) {
  
  	navButton.classList.toggle('active');
  	navMenu.classList.toggle('active');

 	 event.preventDefault();
 	 event.stopImmediatePropagation();
	}
  
	function closeMenu(event) {
  		if (navButton.classList.contains('active')) {
    	navButton.classList.remove('active');
    	navMenu.classList.remove('active');
  }
}
  		navButton.addEventListener('click', openMenu, false);

		win.addEventListener('click',closeMenu, false);
    
</script>
</body>
</html>

/*<---------- CSS MENU INDEX ----------->*/


body{background-image: url(img/fond.jpg); background-size: cover; height: 100vh;}

#logo{position: absolute; top: 0; left: 0; color: white; margin-top: -180px; font-family: arial;}

.container{width: 80%; height: 40px; position: relative; top: 40px; margin: 0 auto; }
.navigation-wrapper{position: relative;}
.navigation-button{will-change: transform; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; position: fixed; z-index: 1;  top: 40px; right: 100px; background: transparent; cursor: pointer; }
.navigation-button .fa{border: 2px solid; border-radius: 3px; padding: 10px; color: white;}
.navigation-menu ul li{list-style: none; font-family: impact; font-weight: 300; color: hsl(0,0%,70%); position: relative; z-index: 999; font-size: 32px; color: hsl(0,0%,10%); line-height: 64px;}
.navigation-menu{content: ''; position: fixed; top: 0; right: 0; width: 50%; background: white; height: 100%; transform: skewX(0deg) translate(100%,0); transform-origin: top right; transition: all .2s ease-in; z-index: -1;}
.navigation-menu ul{transform: skewX(-8deg); transform-origin: top left; position: fixed; right: 120px; top: 120px; width: 400px; text-align: right;}
.navigation-menu ul li a{border: none; color: hsl(0,0%,10%); text-decoration: none;}
.navigation-menu li{opacity: 0; transform: translate(0,10px); transition: all .0s ease-in .3s;}

.navigation-menu.active{transform: skewX(8deg) translate(0,0);}
.navigation-menu.active li{opacity: 1; transform: translate(0,0); transition: all 0.2s ease-in 0s;}
.navigation-menu.active li:nth-child(1){transition-delay: .3s;}
.navigation-menu.active li:nth-child(2){transition-delay: .4s;}
.navigation-menu.active li:nth-child(3){transition-delay: .5s;}
.navigation-menu.active li:nth-child(4){transition-delay: .6s;}
.navigation-menu.active li:nth-child(5){transition-delay: .7s;}
.navigation-menu.active li:nth-child(6){transition-delay: .8s;}

.hero h1{margin-top: 178px; text-transform: uppercase; font-family: impact; font-size: 26px; letter-spacing: 4px; color: white;}

span{font-size: 65px; letter-spacing: 2px; font-family: impact;}

.button{font-family: tahoma; font-weight: normal; font-size: 12px; margin-top: 40px;}
.btn1{padding: 12px 25px; background: #f20c4a; text-decoration: none; color: white; border-top-left-radius: 20px; border-bottom-left-radius: 20px;}
.btn2{padding: 12px 25px; background: #fff; text-decoration: none; color: black; border-top-right-radius: 20px; border-bottom-right-radius: 20px;}

/*<---------- CSS MENU INDEX ----------->*/

Et oui ma façon de développer en CSS est un peu spécial mais perso j'aime bien
Donc le problème ce passe à ce niveau la du code:

<div class="navigation-menu">
	<ul>
	        <li><a href="index.html">HOME</a></li>
		<li><a href="">GALLERY</a></li>
		<li><a href="">CONTACT</a></li>
		<li><a href="">LOCATION</a></li>
		<li><a href="registration.php">REGISTRATION</a></li>
		<li><a href="survey.php">SURVEY</a></li>
	</ul>
</div>

Voilà voilà j'espère que j'ai était clair, j'ai du mal à expliquer mon problème, je m'en excuse

TristanBouyer

6 janvier 2019 à 12:22:06

brizy

6 janvier 2019 à 12:36:32

Aucun lien n'est cliquable ou seulement certains ?

Certains n'ont pas de valeurs dans l'attribut href donc c'est normal qu'ils ne fonctionnent pas.

6 janvier 2019 à 13:03:35

brizy a écrit:

Aucun lien n'est cliquable ou seulement certains ?

Certains n'ont pas de valeurs dans l'attribut href donc c'est normal qu'ils ne fonctionnent pas.

Je parle de c'est lien là:

       <a href="index.html">HOME</a>
        <a href="">GALLERY</a>
        <a href="">CONTACT</a>
        <a href="">LOCATION</a>
        <a href="registration.php">REGISTRATION</a>
        <a href="survey.php">SURVEY</a>

Et je parle que des liens qui ont une valeurs dans l'attribut href, pas les autres.

Et j'ai déjà vérifié, les pages "index.html", "registration.php" et "survey.php" sont bien reliées mais non cliquable sur le menu.

6 janvier 2019 à 13:46:59

Je suis pas expert en JS mais peut-être que le event.stopImmediatePropagation() empêche tes liens de fonctionner.

Cherche du côté du JS car niveau html et css je vois aucun problème de ce côté là

6 janvier 2019 à 14:12:55

Je vais aller voir alors, merci pour ton aide !

Serkox

6 janvier 2019 à 15:41:19

Bonjour,

Je te conseil de refaire ce que tu désires avec ton propre code, tu comprendras mieux d'ou peut venir un problème

#Avgeek

EmmanuelBeziat

6 janvier 2019 à 22:15:32

Non, ça c'est quand il n'y a pas l'attribut. Si l'attribut est présent, même vide, le lien est cliquable.

Ici, le problème c'est que body passe devant le menu. Il suffit d'ajouter un z-index: 10; sur .navigation-menu.

Sinon, un min-height: 100vh; est plus adéquat qu'un height: 100vh;.

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

[HTML] Problème avec la balise <a>

Bonjour tous le monde ! Je suis un jeune débutant en programmation et j'ai un problème qui m'embête un peu...

[HTML] Problème avec la balise <a>

Supprimer

Modérer

Signaler le message aux modérateurs