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; }
header .header_nav_container .close-block {
order: 1; }
header .close-block, header .open-block {
header .close-block, header .open-block, header .open-block.opened {
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;
width: 33px;
height: 2px;
@ -208,17 +208,6 @@ header {
background: black;
border-radius: 3px;
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 {
height: 100%;
display: grid;
@ -227,6 +216,17 @@ header {
header .open-block span {
margin-bottom: 5px;
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 {
display: grid;

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

@ -31,9 +31,12 @@
// });
$('.open-block').click(function(){
$(this).prev().css("display","grid");
$(this).toggleClass('opened');
if(mobile == true){
$("body").css("overflow","hidden");
}
});
// 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;
span{
display: block;
@ -106,28 +106,28 @@ header{
z-index: 1;
}
}
.close-block{
order: 1;
grid-column: 12;
display: none;
margin: auto;
span{
transform-origin: center;
}
&>div>span:first-child{
transform: translateY(57%)rotate(45deg);
}
&>div>span:nth-child(2){
transform: rotate(-45deg);
}
// @include breakpoint(small down) {
// position: absolute;
// top: 1rem;
// right: 1rem;
// .close-block{
// order: 1;
// grid-column: 12;
// display: none;
// margin: auto;
// span{
// transform-origin: center;
// }
// &>div>span:first-child{
}
// transform: translateY(57%)rotate(45deg);
// }
// &>div>span:nth-child(2){
// transform: rotate(-45deg);
// }
// // @include breakpoint(small down) {
// // position: absolute;
// // top: 1rem;
// // right: 1rem;
// // }
// }
.open-block{
height: 100%;
display: grid;
@ -138,4 +138,22 @@ header{
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 %}
<div{{ attributes }}>
{{ content }}
<div class="close-block" >
{# <div class="close-block" >
<div>
<span></span>
<span></span>
</div>
</div>
</div> #}
</div>
<div class="open-block" >
<div>