J'ai un petit problème lorsque que je navigue avec les ancres sur mon site. J'ai fixé mon menu en haut, mais le problème c'étais que quand je cliquais sur mes liens (ancré chacun à une section) tout fonctionnais bien à par que le menu venait recouvrir le haut de mes sections donc le titre était caché derrière:/
Pour régler se problème j'ai vu qu'on pouvait (en js) mettre une sorte de marge négative aux ancres (j'y connais pas grand chose en js) pour compenser la largeur du menu :
$('nav a').click( function(e) {
e.preventDefault()
var page = $(this).attr('href');
var speed = 750; // gérer la vitesse de défliement
// Ici on retranche la hauteur du bandeau
$('html, body').animate(
{ scrollTop: $(page).offset().top - 110 },
speed
);
});
Mais le problème maintenant c'est que quand je clique sur un lien du menu tout fonctionne correctement à part que les propriétés active sur mes liens sont décalées, si je clique sur le deuxième lien ben c'est le premier qui restera actif ainsi de suite :/
Mon code HTML avec le CSS :
<!doctype html>
<html lang="fr">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>SARI Menuiserie</title>
<style type="text/css">
body{
padding-top:96px;
}
.row{
margin: 0;
}
.background_top img{
width: 100%;
}
.background img{
width: 100%;
}
.page-header {
padding-bottom: 9px;
margin: 30px 10px 40px 10px;
border-bottom: 5px solid rgb(255, 193, 7);
}
section p{
border-left: 3px solid rgb(255, 193, 7);
margin-top: 20px;
padding-left: 10px;
}
section a:hover {
opacity: 0.5 ;
}
</style>
</head>
<body id="home" data-spy="scroll" data-target=".navbar">
<header>
<!-- Navigation
================================================== -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="assets/img/logo-sari.png" width="150px" alt=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#service">Service</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#a_propos">A propos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#projets">Projets</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Recherche" aria-label="Search">
<button class="btn btn-outline-warning my-2 my-sm-0" type="submit" class="btn btn-warning btn-xs"><span class="glyphicon glyphicon-eye-open"></span> Chercher</button>
</form>
</div>
</div>
</nav>
</header>
<!-- Contenu
================================================== -->
<div class="container-fluide">
<a class="background_top"><img src="assets/img/background_top.png" alt="Architecture"></a>
<section id="service">
<header class="page-header">
<h1>SERVICES</h1>
</header>
<div class="row text-center">
<div class="col-sm-6 col-md-4 text-left">
<h4>Menuiserie</h4>
<a class="background" href="#menuiserie"><img src="assets/img/carousel.png" alt="Architecture"></a>
<p class="text-justify">Les fenêtres et portes fenêtres <strong>Menuiserie SARI</strong> donnent à votre maison l'élégance de leurs profilés discret et design. Ainsi que la performance
thermique afin de vous offrir le meilleur de la menuiserie PVC ALU BOIS.</p>
</div>
<div class="col-sm-6 col-md-4 text-left">
<h4>Agencement</h4>
<a class="background" href="#agencement"><img src="assets/img/carousel_2.png" alt="Architecture"></a>
<p class="text-justify">Votre spécialiste de la cuisine a d'abord été séletionné pour son professionnalisme reconnu. Il s'engage à tout mettre en oeuvre pour vous garantir les meilleurs
prestations et les meilleurs services pour la création de votre aménagement</p>
</div>
<div class="col-sm-6 col-md-4 text-left">
<h4>SARI Store</h4>
<a class="background" href="#sari_store"><img src="assets/img/carousel_3.png" alt="Architecture"></a>
<p class="text-justify"><strong>SARI Store,</strong> un nouvel univers de la vente Online d'éléments pour votre maison.</p>
</div>
</div>
</section>
<section id="a_propos">
<header class="page-header">
<h1>A PROPOS</h1>
</header>
<div class="row text-center">
<div class="col-sm-6 col-md-4 text-left">
<h4>Menuiserie</h4>
<a class="background" href="#menuiserie"><img src="assets/img/carousel.png" alt="Architecture"></a>
<p class="text-justify">Les fenêtres et portes fenêtres <strong>Menuiserie SARI</strong> donnent à votre maison l'élégance de leurs profilés discret et design. Ainsi que la performance
thermique afin de vous offrir le meilleur de la menuiserie PVC ALU BOIS.</p>
</div>
<div class="col-sm-6 col-md-4 text-left">
<h4>Agencement</h4>
<a class="background" href="#agencement"><img src="assets/img/carousel_2.png" alt="Architecture"></a>
<p class="text-justify">Votre spécialiste de la cuisine a d'abord été séletionné pour son professionnalisme reconnu. Il s'engage à tout mettre en oeuvre pour vous garantir les meilleurs
prestations et les meilleurs services pour la création de votre aménagement</p>
</div>
<div class="col-sm-6 col-md-4 text-left">
<h4>SARI Store</h4>
<a class="background" href="#sari_store"><img src="assets/img/carousel_3.png" alt="Architecture"></a>
<p class="text-justify"><strong>SARI Store,</strong> un nouvel univers de la vente Online d'éléments pour votre maison.</p>
</div>
</div>
</section>
<section id="projets">
<header class="page-header">
<h1>PROJETS</h1>
</header>
<div class="row text-center">
<div class="col-sm-6 col-md-4 text-left">
<h4>Menuiserie</h4>
<a class="background" href="#menuiserie"><img src="assets/img/carousel.png" alt="Architecture"></a>
<p class="text-justify">Les fenêtres et portes fenêtres <strong>Menuiserie SARI</strong> donnent à votre maison l'élégance de leurs profilés discret et design. Ainsi que la performance
thermique afin de vous offrir le meilleur de la menuiserie PVC ALU BOIS.</p>
</div>
<div class="col-sm-6 col-md-4 text-left">
<h4>Agencement</h4>
<a class="background" href="#agencement"><img src="assets/img/carousel_2.png" alt="Architecture"></a>
<p class="text-justify">Votre spécialiste de la cuisine a d'abord été séletionné pour son professionnalisme reconnu. Il s'engage à tout mettre en oeuvre pour vous garantir les meilleurs
prestations et les meilleurs services pour la création de votre aménagement</p>
</div>
<div class="col-sm-6 col-md-4 text-left">
<h4>SARI Store</h4>
<a class="background" href="#sari_store"><img src="assets/img/carousel_3.png" alt="Architecture"></a>
<p class="text-justify"><strong>SARI Store,</strong> un nouvel univers de la vente Online d'éléments pour votre maison.</p>
</div>
</div>
</section>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$('nav a').click( function(e) {
e.preventDefault()
var page = $(this).attr('href');
var speed = 750; // gérer la vitesse de défliement
// Ici on retranche la hauteur du bandeau
$('html, body').animate(
{ scrollTop: $(page).offset().top - 110 },
speed
);
});
</script>
</body>
</html>
Sur l'image j'ai cliqué sur "A propos" qui m'a bien redirigé mais par contre c'est le lien "Service" qui est actif :
Salut, ce que tu peux rajouter c'est que au click, tu enlèves toutes les balises active de tes classes nav a, et au click, tu l'ajoutes sur ton élément courant :
$('nav a').click( function(e) {
e.preventDefault()
$('nav a').removeClass('active');
$(this).addClass('active');
var page = $(this).attr('href');
var speed = 750; // gérer la vitesse de défliement
// Ici on retranche la hauteur du bandeau
$('html, body').animate(
{ scrollTop: $(page).offset().top - 110 },
speed
);
});
---------- Rien ne sert d'écrire vite si l'algorithme est mauvais ----------
Merci pour ta réponse mais lorsque que je fait avec se code le lien sur lequel je clic devient bien actif sur le moment mais une fois arrivé à l'ancre il se désactive et c'est de nouveaux l'autre d'avant qui s'active. :b
J'ai changé le jquery, en mettant le complet au lieu du slim, parce qu'il y a pas la fonction animate sinon, et enlevé le jquery en trop, et j'ai appliqué le active sur la balise parent du link, car c'est sur elle qu'il fallait la mettre.
Je te mets le code complet
<!doctype html>
<html lang="fr">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>SARI Menuiserie</title>
<style type="text/css">
body{
padding-top:96px;
}
.row{
margin: 0;
}
.background_top img{
width: 100%;
}
.background img{
width: 100%;
}
.page-header {
padding-bottom: 9px;
margin: 30px 10px 40px 10px;
border-bottom: 5px solid rgb(255, 193, 7);
}
section p{
border-left: 3px solid rgb(255, 193, 7);
margin-top: 20px;
padding-left: 10px;
}
section a:hover {
opacity: 0.5 ;
}
</style>
</head>
<body id="home" data-spy="scroll" data-target=".navbar">
<header>
<!-- Navigation
================================================== -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="assets/img/logo-sari.png" width="150px" alt=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#service">Service</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#a_propos">A propos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#projets">Projets</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Recherche" aria-label="Search">
<button class="btn btn-outline-warning my-2 my-sm-0" type="submit" class="btn btn-warning btn-xs"><span class="glyphicon glyphicon-eye-open"></span> Chercher</button>
</form>
</div>
</div>
</nav>
</header>
<!-- Contenu
================================================== -->
<div class="container-fluide">
<a class="background_top"><img src="assets/img/background_top.png" alt="Architecture"></a>
<section id="service">
<header class="page-header">
<h1>SERVICES</h1>
</header>
<div class="row text-center">
<div class="col-sm-6 col-md-4 text-left">
<h4>Menuiserie</h4>
<a class="background" href="#menuiserie"><img src="assets/img/carousel.png" alt="Architecture"></a>
<p class="text-justify">Les fenêtres et portes fenêtres <strong>Menuiserie SARI</strong> donnent à votre maison l'élégance de leurs profilés discret et design. Ainsi que la performance
thermique afin de vous offrir le meilleur de la menuiserie PVC ALU BOIS.</p>
</div>
<div class="col-sm-6 col-md-4 text-left">
<h4>Agencement</h4>
<a class="background" href="#agencement"><img src="assets/img/carousel_2.png" alt="Architecture"></a>
<p class="text-justify">Votre spécialiste de la cuisine a d'abord été séletionné pour son professionnalisme reconnu. Il s'engage à tout mettre en oeuvre pour vous garantir les meilleurs
prestations et les meilleurs services pour la création de votre aménagement</p>
</div>
<div class="col-sm-6 col-md-4 text-left">
<h4>SARI Store</h4>
<a class="background" href="#sari_store"><img src="assets/img/carousel_3.png" alt="Architecture"></a>
<p class="text-justify"><strong>SARI Store,</strong> un nouvel univers de la vente Online d'éléments pour votre maison.</p>
</div>
</div>
</section>
<section id="a_propos">
<header class="page-header">
<h1>A PROPOS</h1>
</header>
<div class="row text-center">
<div class="col-sm-6 col-md-4 text-left">
<h4>Menuiserie</h4>
<a class="background" href="#menuiserie"><img src="assets/img/carousel.png" alt="Architecture"></a>
<p class="text-justify">Les fenêtres et portes fenêtres <strong>Menuiserie SARI</strong> donnent à votre maison l'élégance de leurs profilés discret et design. Ainsi que la performance
thermique afin de vous offrir le meilleur de la menuiserie PVC ALU BOIS.</p>
</div>
<div class="col-sm-6 col-md-4 text-left">
<h4>Agencement</h4>
<a class="background" href="#agencement"><img src="assets/img/carousel_2.png" alt="Architecture"></a>
<p class="text-justify">Votre spécialiste de la cuisine a d'abord été séletionné pour son professionnalisme reconnu. Il s'engage à tout mettre en oeuvre pour vous garantir les meilleurs
prestations et les meilleurs services pour la création de votre aménagement</p>
</div>
<div class="col-sm-6 col-md-4 text-left">
<h4>SARI Store</h4>
<a class="background" href="#sari_store"><img src="assets/img/carousel_3.png" alt="Architecture"></a>
<p class="text-justify"><strong>SARI Store,</strong> un nouvel univers de la vente Online d'éléments pour votre maison.</p>
</div>
</div>
</section>
<section id="projets">
<header class="page-header">
<h1>PROJETS</h1>
</header>
<div class="row text-center">
<div class="col-sm-6 col-md-4 text-left">
<h4>Menuiserie</h4>
<a class="background" href="#menuiserie"><img src="assets/img/carousel.png" alt="Architecture"></a>
<p class="text-justify">Les fenêtres et portes fenêtres <strong>Menuiserie SARI</strong> donnent à votre maison l'élégance de leurs profilés discret et design. Ainsi que la performance
thermique afin de vous offrir le meilleur de la menuiserie PVC ALU BOIS.</p>
</div>
<div class="col-sm-6 col-md-4 text-left">
<h4>Agencement</h4>
<a class="background" href="#agencement"><img src="assets/img/carousel_2.png" alt="Architecture"></a>
<p class="text-justify">Votre spécialiste de la cuisine a d'abord été séletionné pour son professionnalisme reconnu. Il s'engage à tout mettre en oeuvre pour vous garantir les meilleurs
prestations et les meilleurs services pour la création de votre aménagement</p>
</div>
<div class="col-sm-6 col-md-4 text-left">
<h4>SARI Store</h4>
<a class="background" href="#sari_store"><img src="assets/img/carousel_3.png" alt="Architecture"></a>
<p class="text-justify"><strong>SARI Store,</strong> un nouvel univers de la vente Online d'éléments pour votre maison.</p>
</div>
</div>
</section>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script>
$('.nav-link').click(function(e) {
e.preventDefault()
$('.nav-item').removeClass('active');
$(this).parent().addClass('active');
var page = $(this).attr('href');
var speed = 750; // gérer la vitesse de défliement
// Ici on retranche la hauteur du bandeau
$('html,body').animate(
{ scrollTop: $(page).offset().top - 110 },
speed
);
});
</script>
</body>
</html>
- Edité par Damien.O 17 novembre 2018 à 14:57:47
---------- Rien ne sert d'écrire vite si l'algorithme est mauvais ----------
Cependant, j'ai un autre petit problème, j'essaye de réduire proportionnellement toutes les polices en fonctions des tailles (sm md lg) donc je suis avec attention la marche à suivre sur Bootstrapqui explique qu'il faut des @include suivant le breakpoint que l'on souhaite avec à l'intérieur une taille globale en rem entre les moustaches html.
Code :
html {
font-size: 1rem;
}
@include media-breakpoint-up(sm) {
html {
font-size: 1.2rem;
}
}
@include media-breakpoint-up(md) {
html {
font-size: 1.4rem;
}
}
@include media-breakpoint-up(lg) {
html {
font-size: 1.6rem;
}
}
Mais le problème c'est que @include n'est pas reconnu, et j'ai le message suivant sur visual studio code : "unknown at rule @include".
Je ne comprends pas car j'ai justement pris le modèle de départ (v.4.1) pour justement ne pas avoir se genre de problème !
Sinon tu utilises les media queries de bases dans ton css (à la fin de ton style, ou dans un fichier media appelé après ton style), pour faire plus simple, en respectant les breakpoints de bootstrap, qui sont 1199, 991, 767 et 575 si tu utilises max width :
@media screen and (max-width:1199px) {
}
@media screen and (max-width:991px) {
}
@media screen and (max-width:767px) {
}
@media screen and (max-width:575px) {
}
ou 1 px de plus si tu utilises min width, tout en respectant l'ordre d'appel
@media screen and (min-width:576px) {
}
@media screen and (min-width:768px) {
}
@media screen and (min-width:992px) {
}
@media screen and (min-width:1200px) {
}
---------- Rien ne sert d'écrire vite si l'algorithme est mauvais ----------
---------- Rien ne sert d'écrire vite si l'algorithme est mauvais ----------
Lien actif du menu décalé avec les ancres [BOOTSTR
× 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.
---------- Rien ne sert d'écrire vite si l'algorithme est mauvais ----------
---------- Rien ne sert d'écrire vite si l'algorithme est mauvais ----------
---------- Rien ne sert d'écrire vite si l'algorithme est mauvais ----------
---------- Rien ne sert d'écrire vite si l'algorithme est mauvais ----------