css ancre

This commit is contained in:
2024-07-01 12:00:51 +02:00
parent 48beba1f5d
commit b32487c269
4 changed files with 114 additions and 19 deletions
File diff suppressed because one or more lines are too long
+29 -1
View File
@@ -2584,13 +2584,41 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
position: relative;
}
.page-programme .layout__region--first .block-region-first {
padding-left: 18%;
padding-left: 20%;
display: flex;
justify-content: flex-end;
position: -webkit-sticky;
position: sticky;
top: 10rem;
}
.page-programme .layout__region--first .block-region-first > .block-block-content {
width: 100%;
}
.page-programme .layout__region--first .block-region-first > .block-block-content ul {
padding-left: 0;
padding-right: 30%;
}
.page-programme .layout__region--first .block-region-first > .block-block-content ul li a {
display: flex;
flex-direction: column;
padding-bottom: 0.6rem;
padding-top: 0.6rem;
}
.page-programme .layout__region--first .block-region-first > .block-block-content ul li a::after {
content: "";
width: 25%;
margin-top: 0.6rem;
border-bottom: #fdc300 solid 1px;
}
.page-programme .layout__region--first .block-region-first > .block-block-content ul li a:hover, .page-programme .layout__region--first .block-region-first > .block-block-content ul li a.active {
font-weight: 800;
}
.page-programme .layout__region--first .block-region-first > .block-block-content ul li a:hover::after, .page-programme .layout__region--first .block-region-first > .block-block-content ul li a.active::after {
content: "";
width: 25%;
margin-top: 0.6rem;
border-bottom: #fdc300 solid 2px;
}
.page-programme .block-region-second h2 {
font-weight: 1000;
font-size: 1.8rem;
+47 -12
View File
@@ -194,19 +194,54 @@ jQuery(document).ready(function($){
//// ancre dans texte au click parragraphe correspondant arrive en dessous du header
// (function($, window) {
// var adjustAnchor = function() {
// var $anchor = $('.block-region-first'),
// fixedElementHeight = 500;
// if ($anchor.length > 0) {
// $('html, body').stop().animate({scrollTop: $anchor.offset().top - fixedElementHeight }, 0);
// }
// };
// $(window).on('hashchange', function() {
// adjustAnchor();
// });
// });
// function adjustAnchor() {
// var $anchor = $(window.location.hash); // Select the anchor element based on the hash in the URL
// var fixedElementHeight = $('.block-region-first').outerHeight(); // Get the height of the sticky element
// if ($anchor.length > 0) {
// $('html, body').stop().animate({
// scrollTop: $anchor.offset().top - fixedElementHeight // Adjust the scroll position to account for the sticky element height
// }, 0);
// }
// }
// // Call the function on page load if there's a hash
// if (window.location.hash) {
// adjustAnchor();
// }
// // Adjust the anchor on hash change
// $(window).on('hashchange', function() {
// adjustAnchor();
// });
//////////////////////////////////////////
// menu ancre paragraphe quand actif
jQuery(function($) {
// Function to set the active class based on the current path
function setActiveLink() {
var path = window.location.href;
console.log(path);
$(".layout__region--first .block-region-first li a").each(function() {
if (this.href === path) {
$(this).closest('a').addClass('active');
}
});
}
// Initially set the active link based on the current URL
setActiveLink();
// Update the active link on click
$(".layout__region--first .block-region-first li a").on('click', function() {
$(".layout__region--first .block-region-first li a").removeClass('active');
$(this).addClass('active');
});
});
})(jQuery, window);
@@ -4,13 +4,45 @@
position: relative;
.block-region-first{
padding-left: 18%;
padding-left: 20%;
display: flex;
justify-content: flex-end;
position: -webkit-sticky;
position: sticky;
top: 10rem;
> .block-block-content{
width: 100%;
ul{
padding-left: 0;
padding-right: 30%;
li{
a{
display: flex;
flex-direction: column;
padding-bottom: 0.6rem;
padding-top: 0.6rem;
&::after{
content:'';
width: 25%;
margin-top: 0.6rem;
border-bottom: $yellow-puca solid 1px;
}
&:hover,
&.active{
font-weight: 800;
&::after{
content:'';
width: 25%;
margin-top: 0.6rem;
border-bottom: $yellow-puca solid 2px;
}
}
}
}
}
}
}
}
.block-region-second{
@@ -28,7 +60,7 @@
padding-top: 1rem;
}
.block-config-pages-block{
.block-config-pages-block{
margin: 0;
width: 80%;
padding-top: 1rem;
@@ -69,11 +101,11 @@
.field--name-field-lien{
background-color: none;
}
}
}
}
}
}
}