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

header menus déroulant et burger

Browse Source
This commit is contained in:
ouidade
2021-11-22 13:18:58 +01:00
parent 6995382dcb
commit 1b24bf8167
5 changed files with 238 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/themes/custom/eql/scss/partials/_header copy.scss
+154
View File
@@ -0,0 +1,154 @@
.layout-container{
position: relative;
}
header{
display: block;
position: sticky; // sticky marche pas :(
}
#header-top {
height: 7rem;
background-color: $white;
box-shadow: 1px 0px 8px $black;
display: flex;
flex-direction: row;
justify-content: space-between;
color: $black;
position: sticky;
top:0%;
.region-header-top-left { // logo + menu déroulant
display:flex;
flex-direction: row;
padding: 1rem;
align-items:start;
color: $black;
font-weight: 800;
#block-logogouv{
display: flex;
height: 100%;
align-items: center;
}
ul{
// position: absolute;
list-style: none;
display: flex;
flex-direction: column;
li {
padding-right: 1rem;
a {
color: $black;
// font-weight: 800;
}
.is-active {
color: $blue-light;
}
}
.ul2{
flex-direction: column;
display: none;
}
:hover{
color: $blue-light;
}
}
li:not(ul):not(.ul2){
display: block;
position: relative;
}
// .ul:not(:-moz-first-node){
// display: none;
// }
:hover {
.ul2{
display: block;
background-color: $white;
padding: 1rem;
}
}
}
li .ul1 {
display: flex;
flex-direction: column;
}
#block-burger { // menu burger à droite
z-index: 1;
background-color: $blue-light;
font-size: 0.7rem;
color: $white;
display: block;
width: 7rem;
height: 100%;
margin-top: 0;
:hover{
cursor: pointer;
}
h2{
padding-top: 1rem;
}
h2:after{
display: block;
margin:auto;
height: 60px;
content:url('data:image/svg+xml,<svg width="160" height="160" xmlns="http://www.w3.org/2000/svg" version="1.1"> <path id="path930" d="M 30,10 H 90" stroke-linecap="round" stroke="white" stroke-width="4"/><path id="path930-3" d="M 30,25 H 90" stroke-linecap="round" stroke="white" stroke-width="4"/><path id="path930-6" d="M 30,40 H 90" stroke-linecap="round" stroke="white" stroke-width="4"/></svg>');
}
#block-burger-menu{
display: block;
margin: 0;
align-self: center;
text-align: center;
height:7rem;
}
.ul1:not(.sous-liste){
width: 300%;
position: relative;
right: 260px;
margin: 0;
padding-top: 2rem;
z-index: 99;
}
ul {
display: none;
background-color: $blue-light;
line-height: 2rem;
list-style: none;
.ul1 .sous-liste{
a{
opacity: 1;
}
}
a{
opacity: 0.6;
color: $white;
font-weight: 800;
font-size: 1rem;
}
}
&.opened ul {
display: block;
}
}
}
web/themes/custom/eql/scss/partials/_header.scss
+28 -41
View File
@@ -20,7 +20,7 @@ header{
top:0%;
.region-header-top-left { // logo + menu déroulant
.region-header-top-left { // logo + menu déroulant
display:flex;
flex-direction: row;
padding: 1rem;
@@ -35,60 +35,43 @@ header{
}
ul{
position: absolute;
list-style: none;
display: flex;
flex-direction: row;
li {
padding-right: 1rem;
:is(.sous-liste){
display: flex;
flex-direction: column;
padding: 1rem;
}
.ul1.sous-liste{
padding-right: 2rem;
}
li{
a {
color: $black;
// font-weight: 800;
}
.is-active {
.is-active{
color:$blue-light;
}
:hover{
color: $blue-light;
}
}
.ul2{
flex-direction: column;
display: none;
}
:hover{
color: $blue-light;
}
}
li:not(ul):not(.ul2){
display: block;
position: relative;
ul:is(.ul1 .sous-liste .ul2){
display: none;
}
:hover {
.ul2{
ul:is(.ul1 .sous-liste .ul2){
display: block;
background-color: $white;
padding: 1rem;
// a{
// color: $white;
// }
// position: relative;
// transition: ease-in-out 2s;
}
}
}
}
li .ul1 {
display: flex;
flex-direction: column;
}
#block-burger { // menu burger à droite
#block-burger { // menu burger à droite
z-index: 1;
background-color: $blue-light;
font-size: 0.7rem;
@@ -106,8 +89,8 @@ header{
h2:after{
display: block;
margin:auto;
height: 60px;
content:url('data:image/svg+xml,<svg width="160" height="160" xmlns="http://www.w3.org/2000/svg" version="1.1"> <path id="path930" d="M 30,10 H 90" stroke-linecap="round" stroke="white" stroke-width="4"/><path id="path930-3" d="M 30,25 H 90" stroke-linecap="round" stroke="white" stroke-width="4"/><path id="path930-6" d="M 30,40 H 90" stroke-linecap="round" stroke="white" stroke-width="4"/></svg>');
// height: 60px;
content:url('data:image/svg+xml,<svg width="100" height="70" xmlns="http://www.w3.org/2000/svg" version="1.1"> <path id="path930" d="M 20,10 H 80" stroke-linecap="round" stroke="white" stroke-width="4"/><path id="path930-3" d="M 20,25 H 80" stroke-linecap="round" stroke="white" stroke-width="4"/><path id="path930-6" d="M 20,40 H 80" stroke-linecap="round" stroke="white" stroke-width="4"/></svg>');
}
#block-burger-menu{
@@ -115,15 +98,19 @@ header{
margin: 0;
align-self: center;
text-align: center;
height:7rem;
// height:7rem;
}
.ul1:not(.sous-liste){
// block menu open fond bleu
.ul1:not(.sous-liste){
width: 300%;
position: relative;
right: 260px;
margin: 0;
padding-top: 2rem;
padding-bottom: 2rem;
z-index: 99;
}