bachir/d9-eql
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

js menu burger

Browse Source
This commit is contained in:
ouidade
2021-11-17 11:54:57 +01:00
parent b93bd15b78
commit 42a28c2e5a
5 changed files with 78 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/themes/custom/eql/css-compiled/styles.css
+29 -27
View File
@@ -82,7 +82,6 @@
/* Manifont Grotesk */ /* Manifont Grotesk */
/* Colors used for EQL */ /* Colors used for EQL */
.layout-container { .layout-container {
position: absolute;
font-family: "Marianne", sans-serif; font-family: "Marianne", sans-serif;
margin: none; margin: none;
top: 0%; top: 0%;
@@ -217,6 +216,7 @@ a {
display: flex; display: flex;
flex-direction: column; } flex-direction: column; }
#header-top #block-burger { #header-top #block-burger {
z-index: 1;
background-color: #009ee3; background-color: #009ee3;
font-size: 0.7rem; font-size: 0.7rem;
color: white; color: white;
@@ -224,40 +224,42 @@ a {
width: 7rem; width: 7rem;
height: 7rem; height: 7rem;
margin-top: 0; } margin-top: 0; }
#header-top #block-burger :hover {
cursor: pointer; }
#header-top #block-burger h2::after { #header-top #block-burger h2::after {
display: block; display: block;
font-family: 'Font Awesome'; font-family: 'Font Awesome';
content: "\f0c9"; content: "\f0c9";
font-size: 5rem; } height: 60px;
font-size: 1rem; }
#header-top #block-burger #block-burger-menu { #header-top #block-burger #block-burger-menu {
display: block; display: block;
margin-top: 0; margin: 0;
align-self: center; align-self: center;
text-align: center; } text-align: center;
height: 7rem; }
#header-top #block-burger ul { #header-top #block-burger ul {
display: none; } display: none;
#header-top #block-burger ul .open { width: 100vw;
width: 100vw; position: relative;
position: relative; bottom: 8%;
bottom: 8%; left: calc(-30vw + 50%);
left: calc(-30vw + 50%); height: fit-content;
display: block; padding-bottom: 1rem;
height: fit-content; padding-top: 1rem;
padding-bottom: 1rem; background-color: #009ee3;
padding-top: 1rem; line-height: 2rem;
background-color: #009ee3; list-style: none; }
line-height: 2rem; #header-top #block-burger ul .ul1 .sous-liste {
list-style: none; } left: calc(-50vw + 50%);
#header-top #block-burger ul .open .ul1 .sous-liste { padding-top: 0; }
left: calc(-50vw + 50%); #header-top #block-burger ul .ul1 .sous-liste a {
padding-top: 0; } opacity: 1; }
#header-top #block-burger ul .open .ul1 .sous-liste a { #header-top #block-burger ul a {
opacity: 1; } color: white;
#header-top #block-burger ul .open a { font-weight: 800;
color: white; font-size: 1.7rem;
font-weight: 800; opacity: 0.7; }
font-size: 1.7rem;
opacity: 0.7; }
#fotter-bottom { #fotter-bottom {
display: flex; display: flex;
web/themes/custom/eql/eql.libraries.yml
-2
View File
@@ -7,10 +7,8 @@ global-css:
global-js: global-js:
js: js:
theme:
js/eql-menu-burger.js: {} js/eql-menu-burger.js: {}
web/themes/custom/eql/js/eql-menu-burger.js
+13 -22
View File
@@ -1,29 +1,20 @@
// jQuery(document).ready(function($){
// $("#block-burger").click(function(event){
// var mods = document.querySelectorAll('.ul1');
// mods.forEach((m, i) => {
// m.classList.remove('.open')
// });
// var btn = event.currentTarget; // menu burger open
// var mod = btn.parentNode.querySelector('.ul1');
// mod.classList.add('.open')
// }); // document.getElementById("block-burger").addEventListener("click", menuOpen);
// $(".ul1, .ul1 a").click(function(event){ // function menuOpen() {
// $ (".ul1").removeClass(".open"); // document.querySelector("ul").style.display = "block";
// return false; // }
// });
// });
remove.onClick = () => { var burgerButon = document.getElementById('block-burger-menu');
const ul1 = document.querySelector('.ul1'); var blockMenuOpen = document.querySelector(/html/body/div/div/header/section/div[2]/nav/ul.ul1);
ul1.classList.add("open"); function menuOpen() {
if (blockMenuOpen.style.display === 'none') {
blockMenuOpen.style.display = 'block';
} else {
blockMenuOpen.style.display = 'none';
}
} }
web/themes/custom/eql/scss/global/_layout.scss
+1 -1
View File
@@ -5,7 +5,7 @@
.layout-container { .layout-container {
position: absolute; // position: absolute;
font-family: $font-family-default; font-family: $font-family-default;
margin: none; margin: none;
top: 0%; top: 0%;
web/themes/custom/eql/scss/partials/_header.scss
+35 -41
View File
@@ -57,69 +57,63 @@
// } // }
#block-burger { #block-burger {
z-index: 1;
background-color: $blue-light; background-color: $blue-light;
font-size: 0.7rem; font-size: 0.7rem;
color: $white; color: $white;
display: block; display: block;
width: 7rem; width: 7rem;
height: 7rem; height: 7rem;
margin-top: 0; margin-top: 0;
:hover{
cursor: pointer;
}
h2::after{ h2::after{
display: block; display: block;
font-family: 'Font Awesome'; font-family: 'Font Awesome';
content: "\f0c9"; content: "\f0c9";
height: 60px;
font-size: 5rem; font-size: 1rem;
} }
#block-burger-menu{ #block-burger-menu{
display: block; display: block;
// content: url(../../images/pictos/icons8-menu.svg); margin: 0;
margin-top: 0;
align-self: center; align-self: center;
text-align: center; text-align: center;
height:7rem;
} }
ul { // ul {display: none;}
display: none; ul {
.open{ display: none;
width: 100vw; width: 100vw;
position: relative; position: relative;
bottom:8%;; bottom:8%;;
left: calc(-30vw + 50%); left: calc(-30vw + 50%);
display: block; height: fit-content;
height: fit-content; padding-bottom: 1rem;
padding-bottom: 1rem; padding-top: 1rem;
padding-top: 1rem; background-color: $blue-light;
background-color: $blue-light; line-height: 2rem;
line-height: 2rem; list-style: none;
list-style: none;
.ul1 .sous-liste{
.ul1 .sous-liste{ left: calc(-50vw + 50%);
left: calc(-50vw + 50%); padding-top: 0;
padding-top: 0; a{
a{ opacity: 1;
opacity: 1; }
}
}
a{
color: $white;
font-weight: 800;
font-size: 1.7rem;
opacity: 0.7;
}
}
} }
a{
color: $white;
font-weight: 800;
font-size: 1.7rem;
opacity: 0.7;
}
}
} }
} }