Avec un ami, on fait un site internet. Mais nous sommes face à un problème. Lorsque sur mobile, on ouvre le menu déroulant et que l'on scroll vers le bas, le menu déroulant dépop, et l'icone de l'hamburger menu reste dans sa position fermée.
(En responsive, il fonctionne et en simulation aussi, c'est vraiment lorsque nous sommes sur un téléphone que cela bug)
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width" /> <!-- Responsive mobile-->
<meta name="author" content="author" /> <!-- Auteur de la page -->
<meta name="description" content="description" /> <!-- Description de la page -->
<meta name="keywords" content="" /> <!-- Mot clé pour aider le référencement -->
<title>Lorem</title>
<link rel="shortcut icon" href="" /> <!-- Icone title -->
<link rel="stylesheet" type="text/css" href="includes/css/bootstrap.min.css">
<link ref="stylesheet" type="text/css" href="includes/css/normalize.min.css" />
<link rel="stylesheet" type="text/css" href="includes/css/style.css" />
<link href="https://fonts.googleapis.com/css?family=Oswald:500" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway:300" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!--[if lt IE 9]>
<script src="includes/js/html5-ie.js"></script>
<![endif]-->
</head>
<body id="body">
<header class="header">
<img class="logo" src="includes/images/logo.png" alt="Logo de l'entreprise" title="Logo de l'entreprise">
<h1 class="header_title">
Lorem ipsum dolor sit amet, consectetur adipisicing.
</h1>
<div class="nav__hamburger" id="nav__hamburger">
<span class="hamburger_line"></span>
<span class="hamburger_line"></span>
<span class="hamburger_line"></span>
</div>
</header>
<nav id="nav" class="nav">
<div class="nav_content container">
<div class="nav__menu">
<ul id="nav___ul" class="nav___ul">
<li><a class="nav____link" href="#1">Onglet 1</a></li>
<li><a class="nav____link" href="#2">Onglet 2</a></li>
<li><a class="nav____link" href="#3">Onglet 3</a></li>
<li><a class="nav____link" href="#4">Onglet 4</a></li>
</ul>
</div>
</div>
</nav>
<div id="web_page">
<section>
<article id="2">
<div class="container">
<div class="row">
<h2>Lorem</h2>
Lorem ipsum dumm is a simply text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
</article>
<article id="3" class="article_grey">
<div class="container">
<div class="row">
<h2>Lorem ipsum</h2>
<div class="col-sm-6">
<h3>Lorem</h3>
</div>
<div class="col-sm-6">
<h3>Lorem ipsum</h3>
</div>
</div>
</div>
</article>
<article id="4">
<div class="container">
<div class="row">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, enim, assumenda. Eos quaerat ex culpa quo at aliquid sequi quisquam dolorem, minima! Voluptas distinctio facilis, placeat doloremque aliquam labore optio.
</div>
</div>
</article>
<article class="article_grey">
<div class="container">
<div class="row">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, enim, assumenda. Eos quaerat ex culpa quo at aliquid sequi quisquam dolorem, minima! Voluptas distinctio facilis, placeat doloremque aliquam labore optio.
</div>
</div>
</article>
<article>
<div class="container">
<div class="row">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, enim, assumenda. Eos quaerat ex culpa quo at aliquid sequi quisquam dolorem, minima! Voluptas distinctio facilis, placeat doloremque aliquam labore optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur eligendi sint repellendus rerum ut porro reprehenderit minima eaque qui atque nemo at eos commodi rem id nihil ex dolores alias veritatis, sapiente beatae et voluptatem doloribus dignissimos. Inventore eaque iure quaerat nesciunt nulla praesentium dolore tenetur voluptate culpa, ratione odit ex blanditiis sint assumenda nobis in, error est, magnam excepturi suscipit ipsum corporis labore molestiae. Voluptas harum minima culpa recusandae, eos officia esse est nihil debitis placeat reiciendis cupiditate, nemo commodi totam id quae animi sint saepe inventore vitae illum. Voluptatum perferendis aliquid impedit eaque voluptates, sint itaque dicta corporis. Est at magnam, laudantium omnis sit quae repellat sapiente optio molestias hic quisquam consequatur necessitatibus eligendi perspiciatis repellendus numquam autem inventore! Tenetur modi blanditiis maxime esse expedita, cumque harum, obcaecati repudiandae iure commodi quibusdam eius, voluptatibus sed reprehenderit incidunt sint possimus natus explicabo iusto, labore magnam! Officiis, incidunt. Minus odit minima fugit officiis vitae obcaecati, modi debitis, sit natus repellendus adipisci mollitia consequatur, in vel nemo accusamus a corporis. Dignissimos, iste, tempora. Ipsa repudiandae in excepturi. Debitis, tempora consequatur laboriosam sequi laborum illo aliquam neque nisi dolorum autem. Laboriosam eaque quam dolore omnis excepturi consequuntur nesciunt illo aliquid delectus ullam tempora molestiae eligendi architecto voluptatibus, porro ad nisi sapiente modi nam autem neque minus iste iure. Sed veritatis id vel quod nemo ipsa natus voluptatum! Quaerat, error minus accusantium molestiae consequuntur incidunt excepturi ea! Voluptate esse facilis, ipsum rerum deleniti molestiae ad itaque quasi, beatae expedita nemo minima. Earum, exercitationem, tempora. Expedita maxime ipsum officia, possimus minus nesciunt omnis reiciendis perspiciatis velit harum ipsa eligendi magnam doloremque eius optio molestiae qui tempore eaque nisi fugiat veritatis ducimus. Facere perspiciatis voluptatem earum sit porro ducimus odit amet ratione nesciunt excepturi atque doloremque itaque veniam quia numquam facilis, error quidem ipsam expedita repellendus temporibus tempora eos! Dolore voluptatum eius dolor vel impedit vero possimus consectetur consequatur, facilis excepturi delectus dicta sint obcaecati, omnis voluptate inventore! Eum eveniet repudiandae distinctio tempora. Beatae suscipit, debitis nemo quia voluptatem ipsum. Tempore assumenda, atque voluptas. Asperiores eligendi, aliquam voluptate fugit dolorem quae distinctio natus sint atque nemo accusamus! Veritatis hic autem ab unde sunt facilis, dolores voluptatem asperiores ad assumenda beatae eaque impedit architecto voluptates! Voluptates consequuntur obcaecati, excepturi a sapiente ab. Porro itaque inventore odit, illum nam officiis ipsam quaerat, quae ut voluptatem. Sunt illum hic culpa quae distinctio maxime iure nisi, nobis, fuga placeat dignissimos quidem dicta doloribus! Eveniet voluptates nihil mollitia aut quaerat voluptatum vero similique culpa velit, sapiente ab placeat hic accusantium, harum! Consequatur, accusantium, quidem. Sit optio, porro magni libero similique impedit minima labore odit sed nostrum eligendi provident recusandae, iure! Provident sapiente neque animi facilis quo recusandae molestias tenetur officia dicta inventore! Nulla, possimus in laboriosam vel est, commodi maiores delectus veritatis ab nihil magni nemo voluptatum vitae doloribus perspiciatis a veniam, consequuntur dignissimos ad voluptatem quod mollitia soluta ipsum dolorem omnis. Consequuntur beatae quaerat commodi rem ab asperiores recusandae est quibusdam tempore nam rerum et maxime voluptate, quae magnam hic libero earum adipisci natus ea similique. Est quod similique, iusto rerum nesciunt ipsam expedita, soluta ut ipsum, perferendis id labore fugiat, consectetur illum quaerat repellendus eius culpa nulla assumenda totam. Ad fuga tempora totam alias perspiciatis autem accusamus vel illo, voluptatibus voluptatum dolorum provident unde, earum quasi deleniti consequuntur tempore, dicta facilis ipsa sapiente nesciunt molestias odit. Voluptatem quod tempora rem officiis itaque consequuntur, officia mollitia tenetur aspernatur aliquid dicta doloribus consectetur ut. Debitis impedit eius blanditiis molestiae voluptatem nobis deserunt asperiores excepturi, qui, a quo harum est quidem repellendus magnam incidunt, iusto corporis reiciendis perspiciatis voluptate, illo cupiditate?
</div>
</div>
</article>
</section>
</div>
</body>
<script src="includes/js/app.js"></script>
</html>
// #### Anchor ####
window.addEventListener("hashchange", function () {
this.scrollTo(window.scrollX, window.scrollY - 62); // On y retire 62px car --> nav = 62px
});
// #### Sticky menu ####
var navbar = document.getElementById("nav");
var sticky = navbar.offsetTop; // distance entre le header et le menu
var contentWebsite = document.getElementById("web_page");
window.addEventListener("scroll", function() {
//si le nombre de pixel scroll est supérieur ou égal au nombre de pixel entre le header et le menu alors
if (window.scrollY >= sticky) {
navbar.classList.add("sticky"); // on ajoute la classe sticky
contentWebsite.classList.add("content_margin");
} else {
navbar.classList.remove("sticky"); // sinon on la retire
contentWebsite.classList.remove("content_margin");
}
});
// #### Responsive menu ####
var hamburgerElt = document.getElementById("nav__hamburger");
var nav = document.getElementById("nav");
var navElt = document.getElementById("nav___ul");
var linkElt=document.getElementsByClassName("nav____link");
var removeScrollBar = document.getElementById("body");
hamburgerElt.addEventListener("click", function() {
this.classList.toggle("is-active"); // change au clique l'apparence de l'hamburger grâce a la classe is-active
// au clique de l'hamburger, si il la classe est égal a nav___ul
if(navElt.className === "nav___ul") {
navElt.className += " responsive"; // On lui ajoute la classe responsive
nav.style.display = "block"; // On affiche le menu (nav)
removeScrollBar.classList.add("remove_scrollbar");
// si on trouve la classe nav___ul et la classe responsive
if(navElt.className === "nav___ul responsive") {
// pour chaque menu quand on clique dessus
for(var i = 0; i < linkElt.length; i++) {
linkElt[i].addEventListener("click", function() {
navElt.classList.remove("responsive"); // On enleve la classe responsive
hamburgerElt.classList.remove("is-active"); // On remet l'hamburger a son état d'origine
nav.style.display = "none"; // on enleve le menu (nav)
removeScrollBar.classList.remove("remove_scrollbar");
});
}
}
//sinon
} else {
navElt.className = "nav___ul" ;// On lui remet sa classe de base
nav.style.display = "none"; // on enleve le menu (nav)
removeScrollBar.classList.remove("remove_scrollbar");
}
});
// #### Resize website ####
window.addEventListener("resize", function() {
if(window.innerWidth >= 960) {
navElt.className = "nav___ul"; // On lui remet sa classe par défaut
hamburgerElt.className = "nav__hamburger"; // On lui remet sa classe par défaut
removeScrollBar.classList.remove("remove_scrollbar");
nav.style.display = "block"; // on enleve le menu (nav)
} else {
contentWebsite.classList.remove("content_margin"); //supprime la marge en mode tablette/mobile
nav.style.display ="none";
}
});
Merci d'avance si vous prenez le temps de me répondre.
Version mobile dropdown menu, bug.
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
