bachir
/
drupal-quartiersdedemain
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

js header

This commit is contained in:
ouidade 2024-02-28 10:39:17 +01:00
parent 12903709d1
commit acf5638ebd
4 changed files with 57 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
web/themes/custom/quartiers_de_demain/css/quartiers_de_demain.css
View File

@ -198,9 +198,9 @@ header {
display: none; } display: none; }
header .header_nav_container .close-block { header .header_nav_container .close-block {
order: 1; } order: 1; }
header .close-block, header .open-block { header .close-block, header .open-block, header .open-block.opened {
cursor: pointer; } cursor: pointer; }
header .close-block span, header .open-block span { header .close-block span, header .open-block span, header .open-block.opened span {
display: block; display: block;
width: 33px; width: 33px;
height: 2px; height: 2px;
@ -208,17 +208,6 @@ header {
background: black; background: black;
border-radius: 3px; border-radius: 3px;
z-index: 1; } z-index: 1; }
header .close-block {
order: 1;
grid-column: 12;
display: none;
margin: auto; }
header .close-block span {
transform-origin: center; }
header .close-block > div > span:first-child {
transform: translateY(57%) rotate(45deg); }
header .close-block > div > span:nth-child(2) {
transform: rotate(-45deg); }
header .open-block { header .open-block {
height: 100%; height: 100%;
display: grid; display: grid;
@ -227,6 +216,17 @@ header {
header .open-block span { header .open-block span {
margin-bottom: 5px; margin-bottom: 5px;
transform-origin: 4px 0px; } transform-origin: 4px 0px; }
header .open-block.opened {
margin: auto; }
header .open-block.opened span {
transform-origin: center;
margin-bottom: 0; }
header .open-block.opened > div > span:first-child {
transform: translateY(57%) rotate(45deg); }
header .open-block.opened > div > span:nth-child(2) {
transform: rotate(-45deg); }
header .open-block.opened > div > span:nth-child(3) {
display: none; }
.footer { .footer {
display: grid; display: grid;

3
web/themes/custom/quartiers_de_demain/js/quartiers_de_demain.js
View File

@ -31,9 +31,12 @@
// }); // });
$('.open-block').click(function(){ $('.open-block').click(function(){
$(this).prev().css("display","grid"); $(this).prev().css("display","grid");
$(this).toggleClass('opened');
if(mobile == true){ if(mobile == true){
$("body").css("overflow","hidden"); $("body").css("overflow","hidden");
} }
}); });
// Hide the header_nav_container when a link inside it is clicked // Hide the header_nav_container when a link inside it is clicked

60
web/themes/custom/quartiers_de_demain/scss/partials/_header.scss
View File

@ -94,7 +94,7 @@ header{
} }
.close-block, .open-block{ .close-block, .open-block, .open-block.opened{
cursor:pointer; cursor:pointer;
span{ span{
display: block; display: block;
@ -106,28 +106,28 @@ header{
z-index: 1; z-index: 1;
} }
} }
.close-block{ // .close-block{
order: 1; // order: 1;
grid-column: 12; // grid-column: 12;
display: none; // display: none;
margin: auto; // margin: auto;
span{ // span{
transform-origin: center; // transform-origin: center;
} // }
&>div>span:first-child{ // &>div>span:first-child{
transform: translateY(57%)rotate(45deg); // transform: translateY(57%)rotate(45deg);
} // }
&>div>span:nth-child(2){ // &>div>span:nth-child(2){
transform: rotate(-45deg); // transform: rotate(-45deg);
} // }
// @include breakpoint(small down) { // // @include breakpoint(small down) {
// position: absolute; // // position: absolute;
// top: 1rem; // // top: 1rem;
// right: 1rem; // // right: 1rem;
// } // // }
} // }
.open-block{ .open-block{
height: 100%; height: 100%;
display: grid; display: grid;
@ -138,4 +138,22 @@ header{
transform-origin: 4px 0px; transform-origin: 4px 0px;
} }
} }
.open-block.opened {
margin: auto;
span {
transform-origin: center;
margin-bottom: 0;
}
&>div>span:first-child {
transform: translateY(57%) rotate(45deg);
}
&>div>span:nth-child(2) {
transform: rotate(-45deg);
}
&>div>span:nth-child(3) {
display: none;
}
}
} }

4
web/themes/custom/quartiers_de_demain/templates/region--header-nav.html.twig
View File

@ -17,12 +17,12 @@
{% if content %} {% if content %}
<div{{ attributes }}> <div{{ attributes }}>
{{ content }} {{ content }}
<div class="close-block" > {# <div class="close-block" >
<div> <div>
<span></span> <span></span>
<span></span> <span></span>
</div> </div>
</div> </div> #}
</div> </div>
<div class="open-block" > <div class="open-block" >
<div> <div>