js & css header

This commit is contained in:
ouidade 2024-02-28 11:08:13 +01:00
parent acf5638ebd
commit 95d1071547
3 changed files with 20 additions and 45 deletions

View File

@ -179,8 +179,6 @@ header {
content: "/"; } content: "/"; }
header .header_nav_container { header .header_nav_container {
display: none; display: none;
grid-template-columns: repeat(12, 1fr);
grid-gap: 10px;
grid-row: 3; grid-row: 3;
grid-column: 1 /span 12; grid-column: 1 /span 12;
position: absolute; position: absolute;
@ -196,11 +194,13 @@ header {
margin: auto; } margin: auto; }
header .header_nav_container #block-quartiers-de-demain-entete h2 { header .header_nav_container #block-quartiers-de-demain-entete h2 {
display: none; } display: none; }
header .header_nav_container .close-block { header .display-nav-opened {
order: 1; } display: grid;
header .close-block, header .open-block, header .open-block.opened { grid-template-columns: repeat(12, 1fr);
grid-gap: 10px; }
header .open-block, header .open-block.opened {
cursor: pointer; } cursor: pointer; }
header .close-block span, header .open-block span, header .open-block.opened span { header .open-block span, header .open-block.opened span {
display: block; display: block;
width: 33px; width: 33px;
height: 2px; height: 2px;

View File

@ -21,18 +21,11 @@
jQuery(document).ready(function($){ jQuery(document).ready(function($){
// $('.close-block').click(function(){
// $(this).parent().fadeOut();
// if(mobile == true){
// $("body").css("overflow","auto");
// }
// });
$('.open-block').click(function(){ $('.open-block').click(function(){
$(this).prev().css("display","grid");
$(this).toggleClass('opened'); $(this).toggleClass('opened');
$('.header_nav_container').toggleClass('display-nav-opened');
if(mobile == true){ if(mobile == true){
$("body").css("overflow","hidden"); $("body").css("overflow","hidden");
} }
@ -43,6 +36,7 @@
$('.header_nav_container li').click(function() { $('.header_nav_container li').click(function() {
$('.header_nav_container').fadeOut(); $('.header_nav_container').fadeOut();
}); });
}); });

View File

@ -64,8 +64,8 @@ header{
.header_nav_container{ .header_nav_container{
display: none; display: none;
// display: grid; // display: grid;
grid-template-columns: repeat(12, 1fr); // grid-template-columns: repeat(12, 1fr);
grid-gap: 10px; // grid-gap: 10px;
grid-row: 3; grid-row: 3;
grid-column: 1 /span 12; grid-column: 1 /span 12;
@ -88,13 +88,16 @@ header{
display: none; display: none;
} }
} }
.close-block{
order: 1;
} }
.display-nav-opened{
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-gap: 10px;
} }
.close-block, .open-block, .open-block.opened{
.open-block, .open-block.opened{
cursor:pointer; cursor:pointer;
span{ span{
display: block; display: block;
@ -106,28 +109,6 @@ header{
z-index: 1; 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;
// // }
// }
.open-block{ .open-block{
height: 100%; height: 100%;
display: grid; display: grid;