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 */
/* Colors used for EQL */
.layout-container {
position: absolute;
font-family: "Marianne", sans-serif;
margin: none;
top: 0%;
@@ -217,6 +216,7 @@ a {
display: flex;
flex-direction: column; }
#header-top #block-burger {
z-index: 1;
background-color: #009ee3;
font-size: 0.7rem;
color: white;
@@ -224,40 +224,42 @@ a {
width: 7rem;
height: 7rem;
margin-top: 0; }
#header-top #block-burger :hover {
cursor: pointer; }
#header-top #block-burger h2::after {
display: block;
font-family: 'Font Awesome';
content: "\f0c9";
font-size: 5rem; }
height: 60px;
font-size: 1rem; }
#header-top #block-burger #block-burger-menu {
display: block;
margin-top: 0;
margin: 0;
align-self: center;
text-align: center; }
text-align: center;
height: 7rem; }
#header-top #block-burger ul {
display: none; }
#header-top #block-burger ul .open {
width: 100vw;
position: relative;
bottom: 8%;
left: calc(-30vw + 50%);
display: block;
height: fit-content;
padding-bottom: 1rem;
padding-top: 1rem;
background-color: #009ee3;
line-height: 2rem;
list-style: none; }
#header-top #block-burger ul .open .ul1 .sous-liste {
left: calc(-50vw + 50%);
padding-top: 0; }
#header-top #block-burger ul .open .ul1 .sous-liste a {
opacity: 1; }
#header-top #block-burger ul .open a {
color: white;
font-weight: 800;
font-size: 1.7rem;
opacity: 0.7; }
display: none;
width: 100vw;
position: relative;
bottom: 8%;
left: calc(-30vw + 50%);
height: fit-content;
padding-bottom: 1rem;
padding-top: 1rem;
background-color: #009ee3;
line-height: 2rem;
list-style: none; }
#header-top #block-burger ul .ul1 .sous-liste {
left: calc(-50vw + 50%);
padding-top: 0; }
#header-top #block-burger ul .ul1 .sous-liste a {
opacity: 1; }
#header-top #block-burger ul a {
color: white;
font-weight: 800;
font-size: 1.7rem;
opacity: 0.7; }
#fotter-bottom {
display: flex;
web/themes/custom/eql/eql.libraries.yml
-2
View File
@@ -7,10 +7,8 @@ global-css:
global-js:
js:
theme:
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;
// var mod = btn.parentNode.querySelector('.ul1');
// mod.classList.add('.open')
// menu burger open
// });
// document.getElementById("block-burger").addEventListener("click", menuOpen);
// $(".ul1, .ul1 a").click(function(event){
// $ (".ul1").removeClass(".open");
// return false;
// });
// function menuOpen() {
// document.querySelector("ul").style.display = "block";
// }
// });
remove.onClick = () => {
const ul1 = document.querySelector('.ul1');
var burgerButon = document.getElementById('block-burger-menu');
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 {
position: absolute;
// position: absolute;
font-family: $font-family-default;
margin: none;
top: 0%;
web/themes/custom/eql/scss/partials/_header.scss
+35 -41
View File
@@ -57,69 +57,63 @@
// }
#block-burger {
z-index: 1;
background-color: $blue-light;
font-size: 0.7rem;
color: $white;
display: block;
width: 7rem;
height: 7rem;
margin-top: 0;
:hover{
cursor: pointer;
}
h2::after{
display: block;
font-family: 'Font Awesome';
content: "\f0c9";
height: 60px;
font-size: 5rem;
font-size: 1rem;
}
#block-burger-menu{
display: block;
// content: url(../../images/pictos/icons8-menu.svg);
margin-top: 0;
margin: 0;
align-self: center;
text-align: center;
height:7rem;
}
ul {
display: none;
.open{
width: 100vw;
position: relative;
bottom:8%;;
left: calc(-30vw + 50%);
display: block;
height: fit-content;
padding-bottom: 1rem;
padding-top: 1rem;
background-color: $blue-light;
line-height: 2rem;
list-style: none;
.ul1 .sous-liste{
left: calc(-50vw + 50%);
padding-top: 0;
a{
opacity: 1;
}
}
a{
color: $white;
font-weight: 800;
font-size: 1.7rem;
opacity: 0.7;
}
}
// ul {display: none;}
ul {
display: none;
width: 100vw;
position: relative;
bottom:8%;;
left: calc(-30vw + 50%);
height: fit-content;
padding-bottom: 1rem;
padding-top: 1rem;
background-color: $blue-light;
line-height: 2rem;
list-style: none;
.ul1 .sous-liste{
left: calc(-50vw + 50%);
padding-top: 0;
a{
opacity: 1;
}
}
a{
color: $white;
font-weight: 800;
font-size: 1.7rem;
opacity: 0.7;
}
}
}
}