premiers resultats concrets sur le menus
This commit is contained in:
parent
a103e01286
commit
55efd70f34
529
css/app.css
529
css/app.css
|
|
@ -974,6 +974,166 @@ video {
|
|||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
@-webkit-keyframes fade-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes fade-out {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-out {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes slide-in {
|
||||
0% {
|
||||
transform: translateY(-80%);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(0%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-in {
|
||||
0% {
|
||||
transform: translateY(-80%);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(0%);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes slide-out {
|
||||
0% {
|
||||
transform: translateY(0%);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(-10%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-out {
|
||||
0% {
|
||||
transform: translateY(0%);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(-10%);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes height-in {
|
||||
0% {
|
||||
max-height: 0px;
|
||||
}
|
||||
|
||||
100% {
|
||||
max-height: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes height-in {
|
||||
0% {
|
||||
max-height: 0px;
|
||||
}
|
||||
|
||||
100% {
|
||||
max-height: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes height-out {
|
||||
0% {
|
||||
max-height: 300px;
|
||||
}
|
||||
|
||||
100% {
|
||||
max-height: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes height-out {
|
||||
0% {
|
||||
max-height: 300px;
|
||||
}
|
||||
|
||||
100% {
|
||||
max-height: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes translate-in {
|
||||
0% {
|
||||
transform: translateY(0%);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes translate-in {
|
||||
0% {
|
||||
transform: translateY(0%);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes translate-out {
|
||||
0% {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(60%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes translate-out {
|
||||
0% {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(60%);
|
||||
}
|
||||
}
|
||||
|
||||
/* ########### BASE ############ */
|
||||
|
||||
body:not(.wp-admin) {
|
||||
|
|
@ -1367,6 +1527,7 @@ button:focus {
|
|||
position: absolute;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
z-index: 10;
|
||||
width: 100%;
|
||||
--tw-translate-y: 100%;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
|
|
@ -1376,6 +1537,28 @@ button:focus {
|
|||
padding-right: 4rem;
|
||||
padding-top: 1.5rem;
|
||||
padding-bottom: 1.5rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* transition: all 0.5s;
|
||||
transition-timing-function: cubic-bezier(0, 0.51, 0.23, 0.99); */
|
||||
|
||||
.search-module[mobile-closed] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.search-module[mobile-closing] {
|
||||
/* animation: translate-out 400ms forwards cubic-bezier(0, 0.51, 0.23, 0.99),
|
||||
fade-out 800ms forwards ease-in; */
|
||||
-webkit-animation: translate-out 800ms forwards ease-in, fade-out 600ms forwards ease-in;
|
||||
animation: translate-out 800ms forwards ease-in, fade-out 600ms forwards ease-in;
|
||||
}
|
||||
|
||||
.search-module[mobile-opened] {
|
||||
-webkit-animation: translate-in 700ms forwards cubic-bezier(0, 0.51, 0.23, 0.99),
|
||||
fade-in 600ms forwards ease-out;
|
||||
animation: translate-in 700ms forwards cubic-bezier(0, 0.51, 0.23, 0.99),
|
||||
fade-in 600ms forwards ease-out;
|
||||
}
|
||||
|
||||
.search-module__wrapper-container {
|
||||
|
|
@ -1469,32 +1652,6 @@ button:focus {
|
|||
text-underline-offset: 4px;
|
||||
}
|
||||
|
||||
.search-module {
|
||||
display: block;
|
||||
transition: all 0.5s;
|
||||
transition-timing-function: cubic-bezier(0, 0.51, 0.23, 0.99);
|
||||
}
|
||||
|
||||
.search-module[aria-hidden='true'] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.search-module-closed {
|
||||
/* transition: all 0.3s ease-in-out; */
|
||||
pointer-events: none;
|
||||
--tw-translate-y: 50%;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
opacity: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.search-module-open {
|
||||
/* transition: all 0.3s ease-in-out; */
|
||||
--tw-translate-y: 100%;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.card-frequent-question {
|
||||
position: relative;
|
||||
border-radius: 1.5rem;
|
||||
|
|
@ -1663,12 +1820,16 @@ header#main-header {
|
|||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
@media (min-width: 782px) {
|
||||
@media (min-width: 960px) {
|
||||
header#main-header {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.sub-menu {
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
margin-top: 3rem;
|
||||
display: grid;
|
||||
|
|
@ -1815,8 +1976,6 @@ article > *:not(.entry-content),
|
|||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(254 252 232 / var(--tw-bg-opacity));
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 2rem;
|
||||
padding-left: 4rem;
|
||||
|
|
@ -1826,13 +1985,14 @@ article > *:not(.entry-content),
|
|||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
|
||||
.menu-renovateur .logo {
|
||||
.menu-renovateur .website_logo {
|
||||
order: 1;
|
||||
margin-right: 3rem;
|
||||
width: 190px;
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
.menu-renovateur .logo {
|
||||
.menu-renovateur .website_logo {
|
||||
width: 222px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1842,24 +2002,28 @@ article > *:not(.entry-content),
|
|||
} */
|
||||
|
||||
.menu-renovateur__navlist {
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
gap: 2rem;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(187 247 208 / var(--tw-bg-opacity));
|
||||
background-color: rgb(240 171 252 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
@media (min-width: 782px) {
|
||||
@media (min-width: 960px) {
|
||||
.menu-renovateur__navlist {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-renovateur__navlist > li .page_icon {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
.menu-renovateur__navlist > .menu-item:hover > a,
|
||||
.menu-renovateur__navlist > .menu-item:hover > button,
|
||||
.menu-renovateur__navlist > .menu-item > a:focus,
|
||||
.menu-renovateur__navlist > .menu-item > button:focus {
|
||||
background-color: rgb(239, 239, 239, 0.6);
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(223 30 30 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.menu-renovateur__navlist > li {
|
||||
.menu-renovateur__navlist > .menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -1869,7 +2033,7 @@ article > *:not(.entry-content),
|
|||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
.menu-renovateur__navlist > li {
|
||||
.menu-renovateur__navlist > .menu-item {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
|
@ -1877,14 +2041,26 @@ article > *:not(.entry-content),
|
|||
/* Generic Submenu Item */
|
||||
|
||||
.menu-renovateur__navlist .sub-menu {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
z-index: 50;
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
||||
transform: translateY(100%);
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
.menu-renovateur__navlist .sub-menu {
|
||||
position: absolute;
|
||||
min-height: 0px;
|
||||
width: 100vw;
|
||||
max-width: 48rem;
|
||||
padding: 2rem;
|
||||
bottom: -31px;
|
||||
transform: translateY(100%);
|
||||
top: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-renovateur__navlist .sub-menu--closed {
|
||||
|
|
@ -1897,22 +2073,18 @@ article > *:not(.entry-content),
|
|||
|
||||
/* Conseils — Thamtiques Submenu Item */
|
||||
|
||||
.menu-renovateur__navlist li#menu-item-168 hr {
|
||||
margin-top: 0.75rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.menu-renovateur__navlist li#menu-item-168 .sub-menu {
|
||||
/* @apply hidden; */
|
||||
}
|
||||
|
||||
.menu-renovateur__navlist li#menu-item-168 .sub-menu__navlist {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.menu-renovateur__navlist li#menu-item-168 .sub-menu__navlist__item {
|
||||
@media (min-width: 782px) {
|
||||
.menu-renovateur__navlist li#menu-item-168 .sub-menu__navlist {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
.menu-renovateur__navlist li#menu-item-168 .sub-menu__navlist__item a {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
|
@ -1945,19 +2117,165 @@ article > *:not(.entry-content),
|
|||
text-underline-offset: 4px;
|
||||
}
|
||||
|
||||
@media (min-width: 782px) {
|
||||
.menu-renovateur__navlist-container {
|
||||
order: 3;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
.menu-renovateur__navlist-container {
|
||||
order: 2;
|
||||
width: -webkit-fit-content;
|
||||
width: -moz-fit-content;
|
||||
width: fit-content;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 960px) {
|
||||
.menu-renovateur__navlist-container {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.menu-renovateur__navlist-container[opened] {
|
||||
-webkit-animation: height-in 400ms forwards ease-out, fade-in 800ms forwards ease-in;
|
||||
animation: height-in 400ms forwards ease-out, fade-in 800ms forwards ease-in;
|
||||
}
|
||||
|
||||
.menu-renovateur__navlist-container[closing] {
|
||||
-webkit-animation: height-out 500ms forwards ease-out, fade-out 800ms forwards ease-in;
|
||||
animation: height-out 500ms forwards ease-out, fade-out 800ms forwards ease-in;
|
||||
}
|
||||
|
||||
.menu-renovateur__navlist-container[closed] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-renovateur__interaction_toggles {
|
||||
order: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
.menu-renovateur__interaction_toggles {
|
||||
order: 3;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-renovateur__mobile-menu-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
.menu-renovateur__mobile-menu-toggle {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-renovateur__mobile-menu-toggle {
|
||||
/* &:after {
|
||||
@apply block w-8 h-8;
|
||||
content: url('../resources/images/menu.svg');
|
||||
} */
|
||||
}
|
||||
|
||||
.menu-renovateur__mobile-menu-toggle .toggle-icon {
|
||||
/* transform: translate(0, 7px); */
|
||||
position: relative;
|
||||
height: 1rem;
|
||||
width: 1.5rem;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.menu-renovateur__mobile-menu-toggle .toggle-icon__bar {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
|
||||
height: 3px;
|
||||
}
|
||||
|
||||
.menu-renovateur__mobile-menu-toggle .toggle-icon__bar--top {
|
||||
top: 0;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.menu-renovateur__mobile-menu-toggle .toggle-icon__bar--middle {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.menu-renovateur__mobile-menu-toggle .toggle-icon__bar--bottom {
|
||||
bottom: 0;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.menu-renovateur__mobile-menu-toggle[aria-expanded] .toggle-icon {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.menu-renovateur__mobile-menu-toggle[aria-expanded] .toggle-icon__bar--top {
|
||||
top: 50%;
|
||||
transform: translateY(-50%) rotate(45deg);
|
||||
}
|
||||
|
||||
.menu-renovateur__mobile-menu-toggle[aria-expanded] .toggle-icon__bar--middle {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.menu-renovateur__mobile-menu-toggle[aria-expanded] .toggle-icon__bar--bottom {
|
||||
top: 50%;
|
||||
transform: translateY(-50%) rotate(-45deg);
|
||||
}
|
||||
|
||||
.menu-renovateur__search-module-toggle {
|
||||
z-index: 50;
|
||||
height: -webkit-fit-content;
|
||||
height: -moz-fit-content;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.menu-renovateur .menu-item .page_icon {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.menu-renovateur .menu-item__submenu-title {
|
||||
margin-bottom: 1rem;
|
||||
border-bottom-width: 1px;
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(118 117 117 / var(--tw-border-opacity));
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.menu-renovateur .menu-item__submenu-toggle,
|
||||
.menu-renovateur .menu-item > a {
|
||||
border-radius: 1.5rem;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.menu-renovateur .menu-item__submenu-toggle {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.menu-renovateur .menu-item__submenu-close {
|
||||
position: absolute;
|
||||
top: 2rem;
|
||||
right: 2rem;
|
||||
height: auto;
|
||||
border-radius: 9999px;
|
||||
text-align: right;
|
||||
outline-offset: 4px;
|
||||
width: -webkit-fit-content;
|
||||
width: -moz-fit-content;
|
||||
width: fit-content;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.menu-renovateur--footer {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
|
|
@ -1992,6 +2310,7 @@ article > *:not(.entry-content),
|
|||
height: -webkit-fit-content;
|
||||
height: -moz-fit-content;
|
||||
height: fit-content;
|
||||
width: 100%;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(47 1 84 / var(--tw-bg-opacity));
|
||||
padding-top: 1rem;
|
||||
|
|
@ -2064,40 +2383,13 @@ article > *:not(.entry-content),
|
|||
} */
|
||||
}
|
||||
|
||||
.menu-homegrade__wrapper-container {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
max-width: 1440px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
.menu-homegrade__wrapper-container {
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-homegrade__wrapper-container {
|
||||
/* li.menu-item.menu-item-has-children:hover {
|
||||
@screen lg {
|
||||
.menu-item-submenu-toggle:after {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.sub-menu {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
} */
|
||||
}
|
||||
|
||||
/* submenus */
|
||||
|
||||
.menu-homegrade__wrapper-container li .sub-menu {
|
||||
.menu-homegrade .sub-menu[open] {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.menu-homegrade li .sub-menu {
|
||||
position: static;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
|
@ -2107,34 +2399,34 @@ article > *:not(.entry-content),
|
|||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
.menu-homegrade__wrapper-container li .sub-menu {
|
||||
.menu-homegrade li .sub-menu {
|
||||
position: absolute;
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-homegrade__wrapper-container li .sub-menu {
|
||||
.menu-homegrade li .sub-menu {
|
||||
z-index: 999;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu-homegrade__wrapper-container li .sub-menu.sub-menu-open {
|
||||
/* &.sub-menu--open {
|
||||
display: block;
|
||||
}
|
||||
} */
|
||||
|
||||
.menu-homegrade__wrapper-container li .sub-menu li {
|
||||
.menu-homegrade li .sub-menu li {
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
.menu-homegrade__wrapper-container li .sub-menu li {
|
||||
.menu-homegrade li .sub-menu li {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-homegrade__wrapper-container li .sub-menu > a::after {
|
||||
.menu-homegrade li .sub-menu > a::after {
|
||||
transform: translateY(-2px) rotate(-90deg);
|
||||
content: '';
|
||||
display: inline-block;
|
||||
|
|
@ -2147,7 +2439,15 @@ article > *:not(.entry-content),
|
|||
transition: all 0.3s ease-out;
|
||||
}
|
||||
|
||||
/* &__wrapper-container {
|
||||
} */
|
||||
|
||||
.menu-homegrade__navlist {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 100%;
|
||||
max-width: 1440px;
|
||||
justify-content: flex-end;
|
||||
padding-right: 0px;
|
||||
}
|
||||
|
||||
|
|
@ -2193,18 +2493,18 @@ article > *:not(.entry-content),
|
|||
|
||||
/* IF SUBMENU CHILD */
|
||||
|
||||
.menu-homegrade__navlist li.menu-item .menu-item-submenu-toggle:hover,
|
||||
.menu-homegrade__navlist li.menu-item .menu-item-submenu-toggle:focus {
|
||||
.menu-homegrade__navlist li.menu-item .menu-item__submenu-toggle:hover,
|
||||
.menu-homegrade__navlist li.menu-item .menu-item__submenu-toggle:focus {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(223 30 30 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.menu-homegrade__navlist li.menu-item .menu-item-submenu-toggle {
|
||||
.menu-homegrade__navlist li.menu-item .menu-item__submenu-toggle {
|
||||
position: relative;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.menu-homegrade__navlist li.menu-item .menu-item-submenu-toggle:after {
|
||||
.menu-homegrade__navlist li.menu-item .menu-item__submenu-toggle:after {
|
||||
right: 0px;
|
||||
content: '▼';
|
||||
position: absolute;
|
||||
|
|
@ -2220,11 +2520,11 @@ article > *:not(.entry-content),
|
|||
transition: all 0.3s ease-out;
|
||||
}
|
||||
|
||||
.menu-homegrade__navlist li.menu-item .menu-item-submenu-toggle[aria-expanded='false']:after {
|
||||
.menu-homegrade__navlist li.menu-item .menu-item__submenu-toggle[aria-expanded='false']:after {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
.menu-homegrade__navlist li.menu-item .menu-item-submenu-toggle[aria-expanded='true']:after {
|
||||
.menu-homegrade__navlist li.menu-item .menu-item__submenu-toggle[aria-expanded='true']:after {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
|
|
@ -2293,6 +2593,26 @@ article > *:not(.entry-content),
|
|||
fill: #DF1E1E;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 960px) {
|
||||
.menu-homegrade {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.menu-homegrade[opened] {
|
||||
-webkit-animation: height-in 400ms forwards ease-out, fade-in 800ms forwards ease-in;
|
||||
animation: height-in 400ms forwards ease-out, fade-in 800ms forwards ease-in;
|
||||
}
|
||||
|
||||
.menu-homegrade[closing] {
|
||||
-webkit-animation: height-out 500ms forwards ease-in, fade-out 800ms forwards ease-in;
|
||||
animation: height-out 500ms forwards ease-in, fade-out 800ms forwards ease-in;
|
||||
}
|
||||
|
||||
.menu-homegrade[closed] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-homegrade--header {
|
||||
}
|
||||
|
||||
|
|
@ -2365,6 +2685,11 @@ article > *:not(.entry-content),
|
|||
}
|
||||
}
|
||||
|
||||
.home-header {
|
||||
isolation: isolate;
|
||||
/* relative */
|
||||
}
|
||||
|
||||
/* background-color: #fbfff5a6; */
|
||||
|
||||
.home-header__titling {
|
||||
|
|
@ -2413,6 +2738,8 @@ article > *:not(.entry-content),
|
|||
/* cubic-bezier(0.18, 0.89, 0.3, 1); */
|
||||
}
|
||||
|
||||
/* bg-red-100 */
|
||||
|
||||
.home-header__fresque {
|
||||
width: 100%;
|
||||
z-index: -1;
|
||||
|
|
|
|||
|
|
@ -25,7 +25,9 @@
|
|||
<?php get_template_part('template-components/header/menu-homegrade'); ?>
|
||||
|
||||
<!-- MENU RENOVATEUR -->
|
||||
<?php get_template_part('template-components/header/menu-renovateur'); ?>
|
||||
<?php
|
||||
get_template_part('template-components/header/menu-renovateur');
|
||||
?>
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -6,13 +6,10 @@
|
|||
|
||||
function wrap_parent_menu_item_buttons($output, $item, $depth, $args)
|
||||
{
|
||||
// write_log($item);
|
||||
|
||||
// $item->classes = array_merge($item->classes, array('menu-item-' . $item->ID));
|
||||
|
||||
// #### MENU HOMEGRADE HEADER
|
||||
if ($args->theme_location === "homegrade" && $args->menu_id === "menu-homegrade-navlist" && in_array('menu-item-has-children', $item->classes, true)) {
|
||||
$output = '<button type="button" class="menu-item-submenu-toggle" aria-expanded="false" aria-controls="sub-menu-' . $item->ID . '">' . $item->title . '</button>';
|
||||
$output = '<button type="button" class="menu-item__submenu-toggle" aria-expanded="false" aria-controls="sub-menu-' . $item->ID . '">' . $item->title . '</button>';
|
||||
}
|
||||
|
||||
// #### MENU HOMEGRADE FOOTER
|
||||
|
|
@ -21,12 +18,12 @@ function wrap_parent_menu_item_buttons($output, $item, $depth, $args)
|
|||
}
|
||||
|
||||
|
||||
|
||||
// #### MENU RENOVATEUR
|
||||
if ($args->theme_location === "renovateur") {
|
||||
$page_icon = get_field('page_icon', $item->object_id);
|
||||
|
||||
if (in_array('menu-item-has-children', $item->classes, true)) {
|
||||
$output = '<button type="button" class="menu-item-submenu-toggle" aria-expanded="false" aria-controls="sub-menu-' . $item->ID . '">' . $item->title . '</button>';
|
||||
$output = '<button type="button" class="menu-item__submenu-toggle" aria-expanded="false" aria-controls="sub-menu-' . $item->ID . '">' . $item->title . '</button>';
|
||||
}
|
||||
|
||||
// #### ICONE DE PAGE FOR TOP LEVEL MENU ITEMS
|
||||
|
|
@ -36,7 +33,6 @@ function wrap_parent_menu_item_buttons($output, $item, $depth, $args)
|
|||
$output = $icon . $link;
|
||||
}
|
||||
|
||||
write_log($output);
|
||||
|
||||
// #### TAXONOMY : GET ICON & INFOS ABOUT TAX
|
||||
|
||||
|
|
@ -58,47 +54,3 @@ function wrap_parent_menu_item_buttons($output, $item, $depth, $args)
|
|||
return $output;
|
||||
}
|
||||
add_filter('walker_nav_menu_start_el', 'wrap_parent_menu_item_buttons', 10, 4);
|
||||
|
||||
/* -----------------------------------------------------------
|
||||
Pass Specific submenus-classnames for menu renovateur
|
||||
-----------------------------------------------------------*/
|
||||
|
||||
|
||||
|
||||
function customize_submenu_classnames($classes, $args, $depth)
|
||||
{
|
||||
// Here we can additionally use menu arguments.
|
||||
// if ($args->theme_location === "renovateur") {
|
||||
// $default_class_name_key = array_search('sub-menu', $classes);
|
||||
|
||||
// if (false !== $default_class_name_key) {
|
||||
// unset($classes[$default_class_name_key]);
|
||||
// }
|
||||
// $classes[] = 'header-submenu';
|
||||
// $classes[] = "depth-{$depth}";
|
||||
// $classes[] = 'sub-menu';
|
||||
// $classes[] = 'test';
|
||||
// }
|
||||
// write_log($classes);
|
||||
// write_log($classes);
|
||||
|
||||
return $classes;
|
||||
}
|
||||
add_filter('nav_menu_submenu_css_class', 'customize_submenu_classnames', 10, 3);
|
||||
|
||||
|
||||
/* -----------------------------------------------------------
|
||||
TEST
|
||||
-----------------------------------------------------------*/
|
||||
|
||||
|
||||
function wpdocs_unset_menu_items($menu_objects, $args)
|
||||
{
|
||||
|
||||
if ($args->theme_location === "renovateur") {
|
||||
// write_log($args);
|
||||
// write_log($menu_objects);
|
||||
return $menu_objects;
|
||||
}
|
||||
}
|
||||
add_filter('wp_nav_menu_objects', 'wpdocs_unset_menu_items', 10, 2);
|
||||
121
js/app.js
121
js/app.js
|
|
@ -2,63 +2,132 @@
|
|||
// resources/js/header.js
|
||||
function menuInit() {
|
||||
const header = document.querySelector("#main-header");
|
||||
searchModule = header.querySelector(".search-module");
|
||||
const searchModule = header.querySelector(".search-module");
|
||||
const searchModuleToggle = header.querySelector("#search-module-toggle");
|
||||
const submenuToggles = header.querySelectorAll(".menu-item-submenu-toggle");
|
||||
const submenusItems = header.querySelectorAll(".sub-menu");
|
||||
const mobileMenuToggle = header.querySelector("#mobile-menu-toggle");
|
||||
const submenuToggles = header.querySelectorAll(".menu-item__submenu-toggle");
|
||||
const submenuCloseBtns = header.querySelectorAll(".menu-item__submenu-close");
|
||||
function isSubmenuOpen() {
|
||||
return header.querySelector("sub-menu-open") !== null;
|
||||
}
|
||||
function openSubmenu(buttonToggle) {
|
||||
closeSubmenus();
|
||||
let isExpanded = buttonToggle.getAttribute("aria-expanded") === "true";
|
||||
buttonToggle.setAttribute("aria-expanded", !isExpanded);
|
||||
buttonToggle.parentElement.querySelector(".sub-menu").classList.toggle("sub-menu-open");
|
||||
buttonToggle.parentElement.querySelector(".sub-menu").classList.toggle("sub-menu--open");
|
||||
buttonToggle.parentElement.querySelector(".sub-menu").classList.toggle("sub-menu--closed");
|
||||
}
|
||||
function closeSubmenus() {
|
||||
const openSubmenus = header.querySelectorAll(".sub-menu-open");
|
||||
const openSubmenus = header.querySelectorAll(".sub-menu--open");
|
||||
openSubmenus.forEach((submenu) => {
|
||||
submenu.classList.remove("sub-menu-open");
|
||||
submenu.parentElement.querySelector(".menu-item-submenu-toggle").setAttribute("aria-expanded", "false");
|
||||
console.log(submenu.parentElement);
|
||||
submenu.classList.remove("sub-menu--open");
|
||||
submenu.classList.add("sub-menu--closed");
|
||||
submenu.parentElement.querySelector(".menu-item__submenu-toggle").setAttribute("aria-expanded", "false");
|
||||
});
|
||||
}
|
||||
function handleSubmenuToggle(buttonToggle) {
|
||||
let isExpanded = buttonToggle.getAttribute("aria-expanded") === "true";
|
||||
if (!isExpanded) {
|
||||
closeSubmenus();
|
||||
openSubmenu(buttonToggle);
|
||||
} else {
|
||||
closeSubmenus();
|
||||
}
|
||||
}
|
||||
function closeCurrentSubmenu(buttonClose) {
|
||||
console.log("close submenu");
|
||||
console.log(buttonClose.parentElement);
|
||||
const currentOpenedSubmenu = buttonClose.parentElement;
|
||||
currentOpenedSubmenu.classList.remove("sub-menu--open");
|
||||
currentOpenedSubmenu.classList.add("sub-menu--closed");
|
||||
currentOpenedSubmenu.parentElement.querySelector(".menu-item__submenu-toggle").setAttribute("aria-expanded", "false");
|
||||
}
|
||||
submenuToggles.forEach((button) => {
|
||||
button.addEventListener("click", () => {
|
||||
if (isSearchOpen() === true) {
|
||||
closeSearch();
|
||||
}
|
||||
handleSubmenuToggle(button);
|
||||
});
|
||||
});
|
||||
submenuCloseBtns.forEach((button) => {
|
||||
button.addEventListener("click", () => closeCurrentSubmenu(button));
|
||||
});
|
||||
function isSearchOpen() {
|
||||
return searchModule.getAttribute("aria-hidden") === "true";
|
||||
if (searchModule.getAttribute("mobile-closed") != null && searchModule.getAttribute("aria-hidden") != null && searchModule.getAttribute("mobile-opened") === null) {
|
||||
return false;
|
||||
}
|
||||
if (searchModule.getAttribute("mobile-opened") != null && searchModule.getAttribute("mobile-closed") === null && searchModule.getAttribute("aria-hidden") === null) {
|
||||
return true;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
function openSearch() {
|
||||
searchModule.classList.remove("search-module-open");
|
||||
searchModule.classList.add("search-module-closed");
|
||||
searchModuleToggle.setAttribute("aria-expanded", "");
|
||||
searchModule.setAttribute("mobile-opened", "");
|
||||
searchModule.removeAttribute("mobile-closed");
|
||||
setTimeout(() => {
|
||||
searchModule.setAttribute("aria-hidden", "true");
|
||||
searchModule.removeAttribute("aria-hidden");
|
||||
}, 400);
|
||||
}
|
||||
function closeSearch() {
|
||||
searchModule.setAttribute("aria-hidden", "false");
|
||||
setTimeout(() => {
|
||||
searchModule.classList.remove("search-module-closed");
|
||||
searchModule.classList.add("search-module-open");
|
||||
}, 50);
|
||||
searchModule.setAttribute("aria-hidden", "");
|
||||
searchModule.removeAttribute("mobile-opened", "");
|
||||
searchModule.setAttribute("mobile-closing", "");
|
||||
searchModule.addEventListener("animationend", () => {
|
||||
searchModule.setAttribute("mobile-closed", "");
|
||||
searchModule.removeAttribute("mobile-closing", "");
|
||||
}, { once: true });
|
||||
searchModuleToggle.toggleAttribute("aria-expanded");
|
||||
}
|
||||
searchModuleToggle.addEventListener("click", function(e) {
|
||||
closeSubmenus();
|
||||
if (isSearchOpen()) {
|
||||
closeSearch();
|
||||
if (isSearchOpen() === false) {
|
||||
openSearch();
|
||||
return;
|
||||
}
|
||||
if (!isSearchOpen()) {
|
||||
openSearch();
|
||||
if (isSearchOpen() === true) {
|
||||
closeSearch();
|
||||
}
|
||||
});
|
||||
submenuToggles.forEach((button) => {
|
||||
button.addEventListener("click", () => openSubmenu(button));
|
||||
const renovateurNavListContainer = header.querySelector(".menu-renovateur__navlist-container");
|
||||
const HomegradeNavListContainer = header.querySelector(".menu-homegrade");
|
||||
function openMenu(menuContainer) {
|
||||
menuContainer.removeAttribute("closed", "");
|
||||
menuContainer.setAttribute("opened", "");
|
||||
menuContainer.removeAttribute("aria-hidden", "");
|
||||
menuContainer.setAttribute("opening", "");
|
||||
menuContainer.addEventListener("animationend", () => {
|
||||
menuContainer.removeAttribute("opening", "");
|
||||
}, { once: true });
|
||||
}
|
||||
function closeMenu(menuContainer) {
|
||||
menuContainer.removeAttribute("opened");
|
||||
menuContainer.setAttribute("aria-hidden", "");
|
||||
menuContainer.setAttribute("closing", "");
|
||||
menuContainer.addEventListener("animationend", () => {
|
||||
menuContainer.setAttribute("closed", "");
|
||||
menuContainer.removeAttribute("closing", "");
|
||||
}, { once: true });
|
||||
}
|
||||
mobileMenuToggle.addEventListener("click", function(e) {
|
||||
const isNavOpened = renovateurNavListContainer.hasAttribute("opened");
|
||||
const textContent = mobileMenuToggle.querySelector("span.text-content");
|
||||
const dataTextOpen = mobileMenuToggle.getAttribute("data-text-open");
|
||||
const dataTextClose = mobileMenuToggle.getAttribute("data-text-close");
|
||||
textContent.textContent = isNavOpened ? dataTextOpen : dataTextClose;
|
||||
mobileMenuToggle.toggleAttribute("aria-expanded");
|
||||
if (isNavOpened) {
|
||||
closeMenu(renovateurNavListContainer);
|
||||
closeMenu(HomegradeNavListContainer);
|
||||
}
|
||||
if (!isNavOpened) {
|
||||
openMenu(renovateurNavListContainer);
|
||||
openMenu(HomegradeNavListContainer);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// resources/js/app.js
|
||||
console.log("menuInit");
|
||||
console.log("menuIniteeeee");
|
||||
window.addEventListener("load", function() {
|
||||
menuInit();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
|
||||
/* ########### UTILITIES ############ */
|
||||
@import './utilities/shadows.css';
|
||||
@import './utilities/animation.css';
|
||||
|
||||
/* ########### BASE ############ */
|
||||
@import './base/typography.css';
|
||||
|
|
|
|||
|
|
@ -2,11 +2,30 @@
|
|||
@apply w-full absolute
|
||||
bg-white
|
||||
left-0
|
||||
bottom-0
|
||||
px-16
|
||||
py-6
|
||||
z-10
|
||||
bottom-0
|
||||
transform translate-y-full;
|
||||
|
||||
@apply block;
|
||||
/* transition: all 0.5s;
|
||||
transition-timing-function: cubic-bezier(0, 0.51, 0.23, 0.99); */
|
||||
|
||||
&[mobile-closed] {
|
||||
@apply hidden;
|
||||
}
|
||||
|
||||
&[mobile-closing] {
|
||||
/* animation: translate-out 400ms forwards cubic-bezier(0, 0.51, 0.23, 0.99),
|
||||
fade-out 800ms forwards ease-in; */
|
||||
animation: translate-out 800ms forwards ease-in, fade-out 600ms forwards ease-in;
|
||||
}
|
||||
&[mobile-opened] {
|
||||
animation: translate-in 700ms forwards cubic-bezier(0, 0.51, 0.23, 0.99),
|
||||
fade-in 600ms forwards ease-out;
|
||||
}
|
||||
|
||||
&__wrapper-container {
|
||||
@apply max-w-screen-xl mx-auto;
|
||||
}
|
||||
|
|
@ -42,24 +61,3 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-module {
|
||||
@apply block;
|
||||
transition: all 0.5s;
|
||||
transition-timing-function: cubic-bezier(0, 0.51, 0.23, 0.99);
|
||||
}
|
||||
.search-module[aria-hidden='true'] {
|
||||
@apply hidden;
|
||||
}
|
||||
|
||||
.search-module-closed {
|
||||
/* transition: all 0.3s ease-in-out; */
|
||||
@apply transform translate-y-1/2 opacity-0 pointer-events-none;
|
||||
z-index: -1;
|
||||
}
|
||||
.search-module-open {
|
||||
/* transition: all 0.3s ease-in-out; */
|
||||
|
||||
@apply transform translate-y-full;
|
||||
z-index: 20;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
header#main-header {
|
||||
@apply flex
|
||||
flex-col-reverse
|
||||
md:flex-col;
|
||||
lg:flex-col;
|
||||
}
|
||||
|
||||
.sub-menu {
|
||||
@apply z-10;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,34 +5,17 @@
|
|||
bg-primary
|
||||
text-white
|
||||
relative
|
||||
w-full
|
||||
h-fit
|
||||
py-4
|
||||
px-8
|
||||
2xl:px-32
|
||||
my-0;
|
||||
|
||||
&__wrapper-container {
|
||||
@apply max-w-screen-2xl
|
||||
w-full
|
||||
mx-auto
|
||||
flex
|
||||
flex-col
|
||||
lg:flex-row
|
||||
items-center
|
||||
justify-around
|
||||
lg:justify-end;
|
||||
|
||||
/* li.menu-item.menu-item-has-children:hover {
|
||||
@screen lg {
|
||||
.menu-item-submenu-toggle:after {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.sub-menu {
|
||||
/* submenus */
|
||||
.sub-menu[open] {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
} */
|
||||
/* submenus */
|
||||
li .sub-menu {
|
||||
@apply bg-primary
|
||||
p-6
|
||||
|
|
@ -43,9 +26,9 @@
|
|||
z-index: 999;
|
||||
display: none;
|
||||
|
||||
&.sub-menu-open {
|
||||
/* &.sub-menu--open {
|
||||
display: block;
|
||||
}
|
||||
} */
|
||||
|
||||
li {
|
||||
@apply py-2 lg:text-left;
|
||||
|
|
@ -64,10 +47,12 @@
|
|||
transition: all 0.3s ease-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* &__wrapper-container {
|
||||
} */
|
||||
|
||||
&__navlist {
|
||||
@apply lg:flex pr-0;
|
||||
@apply w-full
|
||||
max-w-screen-2xl mx-auto lg:flex justify-end pr-0;
|
||||
|
||||
/* Highlight using list element */
|
||||
li.current-page-parent > a,
|
||||
|
|
@ -95,7 +80,7 @@
|
|||
}
|
||||
|
||||
/* IF SUBMENU CHILD */
|
||||
.menu-item-submenu-toggle {
|
||||
.menu-item__submenu-toggle {
|
||||
&:hover,
|
||||
&:focus {
|
||||
@apply text-secondary;
|
||||
|
|
@ -117,10 +102,10 @@
|
|||
transition: all 0.3s ease-out;
|
||||
}
|
||||
}
|
||||
.menu-item-submenu-toggle[aria-expanded='false']:after {
|
||||
.menu-item__submenu-toggle[aria-expanded='false']:after {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
.menu-item-submenu-toggle[aria-expanded='true']:after {
|
||||
.menu-item__submenu-toggle[aria-expanded='true']:after {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
|
@ -176,7 +161,19 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 960px) {
|
||||
@apply overflow-hidden;
|
||||
|
||||
&[opened] {
|
||||
animation: height-in 400ms forwards ease-out, fade-in 800ms forwards ease-in;
|
||||
}
|
||||
&[closing] {
|
||||
animation: height-out 500ms forwards ease-in, fade-out 800ms forwards ease-in;
|
||||
}
|
||||
&[closed] {
|
||||
@apply hidden;
|
||||
}
|
||||
}
|
||||
/*##### RESPONSIVE */
|
||||
|
||||
/* @media (max-width: 960px) {
|
||||
|
|
|
|||
|
|
@ -2,27 +2,35 @@
|
|||
@apply py-8
|
||||
px-16
|
||||
relative
|
||||
bg-yellow-50
|
||||
shadow-md
|
||||
flex
|
||||
flex-wrap
|
||||
justify-between;
|
||||
|
||||
.logo {
|
||||
@apply mr-12
|
||||
.website_logo {
|
||||
@apply order-1
|
||||
mr-12
|
||||
w-[190px]
|
||||
xl:w-[222px];
|
||||
}
|
||||
/* &__main-elements {
|
||||
@apply w-full bg-red-200 flex justify-between items-center;
|
||||
} */
|
||||
&__navlist {
|
||||
@apply md:flex justify-center gap-8 bg-green-200;
|
||||
|
||||
> li {
|
||||
.page_icon {
|
||||
@apply w-[50px] h-[50px];
|
||||
&__navlist {
|
||||
@apply lg:flex
|
||||
bg-fuchsia-300
|
||||
justify-center
|
||||
relative;
|
||||
|
||||
> .menu-item {
|
||||
&:hover > a,
|
||||
&:hover > button,
|
||||
> a:focus,
|
||||
> button:focus {
|
||||
@apply text-secondary bg-gray;
|
||||
}
|
||||
|
||||
@apply text-black
|
||||
flex
|
||||
lg:relative
|
||||
|
|
@ -32,9 +40,24 @@
|
|||
}
|
||||
/* Generic Submenu Item */
|
||||
.sub-menu {
|
||||
@apply absolute bottom-0 bg-white;
|
||||
@apply fixed
|
||||
bg-white
|
||||
z-50
|
||||
top-0
|
||||
min-h-screen
|
||||
w-full
|
||||
p-8
|
||||
lg:absolute
|
||||
lg:min-h-0
|
||||
lg:w-screen
|
||||
lg:max-w-3xl;
|
||||
|
||||
@screen lg {
|
||||
bottom: -31px;
|
||||
transform: translateY(100%);
|
||||
@apply max-w-3xl w-screen p-8;
|
||||
top: unset;
|
||||
}
|
||||
|
||||
&--closed {
|
||||
@apply hidden;
|
||||
}
|
||||
|
|
@ -45,15 +68,9 @@
|
|||
|
||||
/* Conseils — Thamtiques Submenu Item */
|
||||
li#menu-item-168 {
|
||||
hr {
|
||||
@apply my-3 mb-6;
|
||||
}
|
||||
.sub-menu {
|
||||
/* @apply hidden; */
|
||||
}
|
||||
.sub-menu__navlist {
|
||||
@apply grid grid-cols-2 gap-4;
|
||||
&__item {
|
||||
@apply grid md:grid-cols-2 gap-4;
|
||||
&__item a {
|
||||
@apply flex gap-4;
|
||||
}
|
||||
|
||||
|
|
@ -80,11 +97,101 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
&__navlist-container {
|
||||
@apply /* bg-white */
|
||||
order-3
|
||||
lg:order-2
|
||||
w-full
|
||||
lg:w-fit;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 960px) {
|
||||
&__navlist-container {
|
||||
@apply overflow-hidden;
|
||||
}
|
||||
|
||||
&__navlist-container[opened] {
|
||||
animation: height-in 400ms forwards ease-out, fade-in 800ms forwards ease-in;
|
||||
}
|
||||
&__navlist-container[closing] {
|
||||
animation: height-out 500ms forwards ease-out, fade-out 800ms forwards ease-in;
|
||||
}
|
||||
&__navlist-container[closed] {
|
||||
@apply hidden;
|
||||
}
|
||||
}
|
||||
|
||||
&__interaction_toggles {
|
||||
@apply order-2 lg:order-3 flex items-center justify-start gap-4;
|
||||
}
|
||||
&__mobile-menu-toggle {
|
||||
@apply md:hidden;
|
||||
@apply lg:hidden flex items-center gap-4;
|
||||
.toggle-icon {
|
||||
/* transform: translate(0, 7px); */
|
||||
@apply w-6 h-4 relative opacity-80;
|
||||
&__bar {
|
||||
@apply bg-black w-full absolute;
|
||||
|
||||
height: 3px;
|
||||
}
|
||||
&__bar--top {
|
||||
top: 0;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
&__bar--middle {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
&__bar--bottom {
|
||||
bottom: 0;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
/* &:after {
|
||||
@apply block w-8 h-8;
|
||||
content: url('../resources/images/menu.svg');
|
||||
} */
|
||||
}
|
||||
&__mobile-menu-toggle[aria-expanded] {
|
||||
.toggle-icon {
|
||||
@apply relative;
|
||||
&__bar--top {
|
||||
top: 50%;
|
||||
transform: translateY(-50%) rotate(45deg);
|
||||
}
|
||||
&__bar--middle {
|
||||
opacity: 0;
|
||||
}
|
||||
&__bar--bottom {
|
||||
top: 50%;
|
||||
transform: translateY(-50%) rotate(-45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
&__search-module-toggle {
|
||||
@apply z-50 h-fit;
|
||||
@apply h-fit;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
.page_icon {
|
||||
@apply w-[50px] h-[50px];
|
||||
}
|
||||
&__submenu-title {
|
||||
@apply pb-4 mb-4 border-b border-gray-dark;
|
||||
}
|
||||
&__submenu-toggle,
|
||||
> a {
|
||||
@apply p-6 rounded-3xl;
|
||||
}
|
||||
&__submenu-toggle {
|
||||
@apply text-left;
|
||||
}
|
||||
&__submenu-close {
|
||||
@apply absolute text-right top-8 right-8 w-fit h-auto rounded-full outline-offset-4;
|
||||
width: fit-content;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
67
resources/css/utilities/animation.css
Normal file
67
resources/css/utilities/animation.css
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
@keyframes fade-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes fade-out {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-in {
|
||||
0% {
|
||||
transform: translateY(-80%);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0%);
|
||||
}
|
||||
}
|
||||
@keyframes slide-out {
|
||||
0% {
|
||||
transform: translateY(0%);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(-10%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes height-in {
|
||||
0% {
|
||||
max-height: 0px;
|
||||
}
|
||||
100% {
|
||||
max-height: 300px;
|
||||
}
|
||||
}
|
||||
@keyframes height-out {
|
||||
0% {
|
||||
max-height: 300px;
|
||||
}
|
||||
100% {
|
||||
max-height: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes translate-in {
|
||||
0% {
|
||||
transform: translateY(0%);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
}
|
||||
@keyframes translate-out {
|
||||
0% {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(60%);
|
||||
}
|
||||
}
|
||||
12
resources/img/graphic-assets/close_submenu_icon.svg
Normal file
12
resources/img/graphic-assets/close_submenu_icon.svg
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="27" height="27" viewBox="0 0 27 27">
|
||||
<g id="Groupe_1505" data-name="Groupe 1505" transform="translate(-953 -6187)">
|
||||
<g id="Groupe_1477" data-name="Groupe 1477">
|
||||
<g id="Ellipse_225" data-name="Ellipse 225" transform="translate(953 6187)" fill="#fff" stroke="#000" stroke-width="2">
|
||||
<circle cx="13.5" cy="13.5" r="13.5" stroke="none"/>
|
||||
<circle cx="13.5" cy="13.5" r="12.5" fill="none"/>
|
||||
</g>
|
||||
<path id="Tracé_3611" data-name="Tracé 3611" d="M-3940.773,6207.279l8.909-8.884" transform="translate(4903.115 -2)" fill="none" stroke="#000" stroke-linecap="round" stroke-width="2"/>
|
||||
</g>
|
||||
<path id="Tracé_3612" data-name="Tracé 3612" d="M-3931.864,6207.279l-8.909-8.884" transform="translate(4903.115 -2)" fill="none" stroke="#000" stroke-linecap="round" stroke-width="2"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 877 B |
|
|
@ -1,6 +1,5 @@
|
|||
import menuInit from './header';
|
||||
console.log('menuInit');
|
||||
console.log('menuIniteeeee');
|
||||
|
||||
window.addEventListener('load', function () {
|
||||
menuInit();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -2,109 +2,212 @@ export default function menuInit() {
|
|||
const header = document.querySelector('#main-header');
|
||||
|
||||
// Search module
|
||||
searchModule = header.querySelector('.search-module');
|
||||
const searchModule = header.querySelector('.search-module');
|
||||
const searchModuleToggle = header.querySelector('#search-module-toggle');
|
||||
|
||||
// Submenus
|
||||
const submenuToggles = header.querySelectorAll('.menu-item-submenu-toggle');
|
||||
const submenusItems = header.querySelectorAll('.sub-menu');
|
||||
// Mobile Menu
|
||||
const mobileMenuToggle = header.querySelector('#mobile-menu-toggle');
|
||||
|
||||
/* -----------------------------------------------------------
|
||||
HANDLE SUBMENUS
|
||||
-----------------------------------------------------------*/
|
||||
// SubmenusToggles
|
||||
const submenuToggles = header.querySelectorAll('.menu-item__submenu-toggle');
|
||||
const submenuCloseBtns = header.querySelectorAll('.menu-item__submenu-close');
|
||||
|
||||
function isSubmenuOpen() {
|
||||
return header.querySelector('sub-menu-open') !== null;
|
||||
}
|
||||
|
||||
function openSubmenu(buttonToggle) {
|
||||
closeSubmenus();
|
||||
let isExpanded = buttonToggle.getAttribute('aria-expanded') === 'true';
|
||||
buttonToggle.setAttribute('aria-expanded', !isExpanded);
|
||||
buttonToggle.parentElement.querySelector('.sub-menu').classList.toggle('sub-menu-open');
|
||||
buttonToggle.parentElement.querySelector('.sub-menu').classList.toggle('sub-menu--open');
|
||||
buttonToggle.parentElement.querySelector('.sub-menu').classList.toggle('sub-menu--closed');
|
||||
}
|
||||
function closeSubmenus() {
|
||||
const openSubmenus = header.querySelectorAll('.sub-menu-open');
|
||||
const openSubmenus = header.querySelectorAll('.sub-menu--open');
|
||||
openSubmenus.forEach((submenu) => {
|
||||
submenu.classList.remove('sub-menu-open');
|
||||
submenu.classList.remove('sub-menu--open');
|
||||
submenu.classList.add('sub-menu--closed');
|
||||
submenu.parentElement
|
||||
.querySelector('.menu-item-submenu-toggle')
|
||||
.querySelector('.menu-item__submenu-toggle')
|
||||
.setAttribute('aria-expanded', 'false');
|
||||
console.log(submenu.parentElement);
|
||||
});
|
||||
}
|
||||
|
||||
function handleSubmenuToggle(buttonToggle) {
|
||||
let isExpanded = buttonToggle.getAttribute('aria-expanded') === 'true';
|
||||
if (!isExpanded) {
|
||||
closeSubmenus();
|
||||
openSubmenu(buttonToggle);
|
||||
} else {
|
||||
closeSubmenus();
|
||||
}
|
||||
}
|
||||
|
||||
function closeCurrentSubmenu(buttonClose) {
|
||||
console.log('close submenu');
|
||||
console.log(buttonClose.parentElement);
|
||||
const currentOpenedSubmenu = buttonClose.parentElement;
|
||||
|
||||
currentOpenedSubmenu.classList.remove('sub-menu--open');
|
||||
currentOpenedSubmenu.classList.add('sub-menu--closed');
|
||||
currentOpenedSubmenu.parentElement
|
||||
.querySelector('.menu-item__submenu-toggle')
|
||||
.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
// SUBMENU TOGGGLES open/close
|
||||
submenuToggles.forEach((button) => {
|
||||
button.addEventListener('click', () => {
|
||||
if (isSearchOpen() === true) {
|
||||
closeSearch();
|
||||
}
|
||||
handleSubmenuToggle(button);
|
||||
// closeSearch();
|
||||
});
|
||||
});
|
||||
|
||||
submenuCloseBtns.forEach((button) => {
|
||||
button.addEventListener('click', () => closeCurrentSubmenu(button));
|
||||
});
|
||||
|
||||
/* -----------------------------------------------------------
|
||||
HANDLE SEARCH
|
||||
-----------------------------------------------------------*/
|
||||
function isSearchOpen() {
|
||||
return searchModule.getAttribute('aria-hidden') === 'true';
|
||||
// IF CLOSED
|
||||
if (
|
||||
searchModule.getAttribute('mobile-closed') != null &&
|
||||
searchModule.getAttribute('aria-hidden') != null &&
|
||||
searchModule.getAttribute('mobile-opened') === null
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// IF OPENED
|
||||
if (
|
||||
searchModule.getAttribute('mobile-opened') != null &&
|
||||
searchModule.getAttribute('mobile-closed') === null &&
|
||||
searchModule.getAttribute('aria-hidden') === null
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
// IF TRANSITIONNING OR PROBLEM
|
||||
return null;
|
||||
}
|
||||
function openSearch() {
|
||||
searchModule.classList.remove('search-module-open');
|
||||
searchModule.classList.add('search-module-closed');
|
||||
searchModuleToggle.setAttribute('aria-expanded', '');
|
||||
searchModule.setAttribute('mobile-opened', '');
|
||||
searchModule.removeAttribute('mobile-closed');
|
||||
setTimeout(() => {
|
||||
searchModule.setAttribute('aria-hidden', 'true');
|
||||
searchModule.removeAttribute('aria-hidden');
|
||||
}, 400);
|
||||
}
|
||||
function closeSearch() {
|
||||
searchModule.setAttribute('aria-hidden', 'false');
|
||||
searchModule.setAttribute('aria-hidden', '');
|
||||
searchModule.removeAttribute('mobile-opened', '');
|
||||
|
||||
setTimeout(() => {
|
||||
searchModule.classList.remove('search-module-closed');
|
||||
searchModule.classList.add('search-module-open');
|
||||
}, 50);
|
||||
searchModule.setAttribute('mobile-closing', '');
|
||||
|
||||
searchModule.addEventListener(
|
||||
'animationend',
|
||||
() => {
|
||||
searchModule.setAttribute('mobile-closed', '');
|
||||
searchModule.removeAttribute('mobile-closing', '');
|
||||
},
|
||||
{ once: true }
|
||||
);
|
||||
// setTimeout(() => {
|
||||
// searchModule.setAttribute('mobile-closed', '');
|
||||
// searchModule.removeAttribute('mobile-opened', '');
|
||||
// }, 50);
|
||||
|
||||
searchModuleToggle.toggleAttribute('aria-expanded');
|
||||
}
|
||||
|
||||
// SEARCH TOGGLE open/close
|
||||
searchModuleToggle.addEventListener('click', function (e) {
|
||||
// const isSearchOpen = searchModule.getAttribute('aria-hidden') === 'true';
|
||||
closeSubmenus();
|
||||
// MENU IS OPEN --> CLOSE IT
|
||||
if (isSearchOpen()) {
|
||||
closeSearch();
|
||||
|
||||
// SEARCH IS CLOSED --> OPEN IT
|
||||
if (isSearchOpen() === false) {
|
||||
openSearch();
|
||||
return;
|
||||
}
|
||||
// MENU IS CLOSED --> OPEN IT
|
||||
if (!isSearchOpen()) {
|
||||
openSearch();
|
||||
|
||||
// SEARCH IS OPEN --> CLOSE IT
|
||||
if (isSearchOpen() === true) {
|
||||
closeSearch();
|
||||
}
|
||||
});
|
||||
|
||||
// SEARCH TOGGLE open/close
|
||||
submenuToggles.forEach((button) => {
|
||||
button.addEventListener('click', () => openSubmenu(button));
|
||||
});
|
||||
/* -----------------------------------------------------------
|
||||
HANDLE MOBILE
|
||||
-----------------------------------------------------------*/
|
||||
const renovateurNavListContainer = header.querySelector('.menu-renovateur__navlist-container');
|
||||
const HomegradeNavListContainer = header.querySelector('.menu-homegrade');
|
||||
|
||||
// #### BURGER TOGGLE open/close
|
||||
// const burgerMenuToggle = header.querySelector('#burger-menu-toggle');
|
||||
// burgerMenuToggle.addEventListener('click', function (e) {
|
||||
// e.preventDefault();
|
||||
// header.classList.toggle('nav-open');
|
||||
// burgerMenuToggle.toggleAttribute('aria-expanded');
|
||||
// gsap.from(primary_menu, {
|
||||
// opacity: 20,
|
||||
// y: '-100vh',
|
||||
// duration: 0.5,
|
||||
// ease: Power4.easeOut,
|
||||
// });
|
||||
// });
|
||||
function openMenu(menuContainer) {
|
||||
// header.removeAttribute('closed', '');
|
||||
// header.setAttribute('opened', '');
|
||||
// header.removeAttribute('aria-hidden', '');
|
||||
// header.setAttribute('opening', '');
|
||||
|
||||
// #### SUBMENUS TOGGLE open/close
|
||||
// const submenuToggles = primary_menu.querySelectorAll(
|
||||
// '.menu-item-submenu-toggle'
|
||||
// );
|
||||
// RENOVATEUR
|
||||
menuContainer.removeAttribute('closed', '');
|
||||
menuContainer.setAttribute('opened', '');
|
||||
menuContainer.removeAttribute('aria-hidden', '');
|
||||
menuContainer.setAttribute('opening', '');
|
||||
|
||||
// #### Close nav when reaching the end of the menu with tab
|
||||
|
||||
// document.addEventListener(
|
||||
// 'focusin',
|
||||
// (e) => {
|
||||
// const header = document.querySelector('#primary-header');
|
||||
// console.log(header.contains(document.activeElement));
|
||||
// if (header.classList.contains('nav-open') && !header.contains(document.activeElement)) {
|
||||
// header.classList.remove('nav-open');
|
||||
// burgerMenuToggle.setAttribute('aria-expanded', false);
|
||||
|
||||
// burgerMenuToggle.focus();
|
||||
// }
|
||||
// },
|
||||
// true
|
||||
// );
|
||||
menuContainer.addEventListener(
|
||||
'animationend',
|
||||
() => {
|
||||
menuContainer.removeAttribute('opening', '');
|
||||
},
|
||||
{ once: true }
|
||||
);
|
||||
}
|
||||
function closeMenu(menuContainer) {
|
||||
// header.removeAttribute('opened');
|
||||
// header.setAttribute('aria-hidden', '');
|
||||
// header.setAttribute('closing', '');
|
||||
|
||||
menuContainer.removeAttribute('opened');
|
||||
menuContainer.setAttribute('aria-hidden', '');
|
||||
menuContainer.setAttribute('closing', '');
|
||||
|
||||
menuContainer.addEventListener(
|
||||
'animationend',
|
||||
() => {
|
||||
menuContainer.setAttribute('closed', '');
|
||||
menuContainer.removeAttribute('closing', '');
|
||||
},
|
||||
{ once: true }
|
||||
);
|
||||
}
|
||||
mobileMenuToggle.addEventListener('click', function (e) {
|
||||
const isNavOpened = renovateurNavListContainer.hasAttribute('opened');
|
||||
|
||||
// Button Text Content
|
||||
const textContent = mobileMenuToggle.querySelector('span.text-content');
|
||||
const dataTextOpen = mobileMenuToggle.getAttribute('data-text-open');
|
||||
const dataTextClose = mobileMenuToggle.getAttribute('data-text-close');
|
||||
|
||||
// Change Text button
|
||||
textContent.textContent = isNavOpened ? dataTextOpen : dataTextClose;
|
||||
|
||||
// Toggle Aria-expanded
|
||||
mobileMenuToggle.toggleAttribute('aria-expanded');
|
||||
|
||||
// Handle Visibility
|
||||
if (isNavOpened) {
|
||||
closeMenu(renovateurNavListContainer);
|
||||
closeMenu(HomegradeNavListContainer);
|
||||
}
|
||||
if (!isNavOpened) {
|
||||
openMenu(renovateurNavListContainer);
|
||||
openMenu(HomegradeNavListContainer);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,5 +3,5 @@ Theme Name: Homegrade_Theme
|
|||
Author: Deligraph
|
||||
Author URI: https://deligraph.com/
|
||||
Version: 1.0.0
|
||||
|
||||
Text Domain: homegrade-theme__texte-fonctionnel
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
.home-header {
|
||||
@apply max-w-screen-xl mx-auto px-6 lg:px-16 pt-16 xl:pt-20
|
||||
mb-24
|
||||
mb-24;
|
||||
isolation: isolate;
|
||||
|
||||
/* relative */
|
||||
/* bg-red-100 */;
|
||||
/* bg-red-100 */
|
||||
/* aspect-ratio: 1.5; */
|
||||
|
||||
/* min-height: 80vh; */
|
||||
|
|
|
|||
|
|
@ -1,8 +1,5 @@
|
|||
window.addEventListener('DOMContentLoaded', (event) => {
|
||||
const cardThematiques = document.querySelectorAll(
|
||||
'.swiper-slide .card-thematique'
|
||||
);
|
||||
console.log(`cardThematiques`, cardThematiques);
|
||||
const cardThematiques = document.querySelectorAll('.swiper-slide .card-thematique');
|
||||
|
||||
mySwiper = new Swiper('.swiper-container', {
|
||||
grabCursor: false,
|
||||
|
|
@ -21,10 +18,7 @@ window.addEventListener('DOMContentLoaded', (event) => {
|
|||
el: '.swiper-pagination',
|
||||
clickable: true,
|
||||
renderBullet: function (index, className) {
|
||||
const ariaLabel =
|
||||
cardThematiques[index].getAttribute(
|
||||
'data-taxonomy'
|
||||
);
|
||||
const ariaLabel = cardThematiques[index].getAttribute('data-taxonomy');
|
||||
|
||||
return `<button class="${className}" aria-label="${ariaLabel}"></button>`;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -2,15 +2,9 @@
|
|||
|
||||
?>
|
||||
|
||||
<nav class="menu-homegrade menu-homegrade--header">
|
||||
<div class="menu-homegrade__wrapper-container">
|
||||
<nav class="menu-homegrade menu-homegrade--header" closed>
|
||||
<!-- <div class="menu-homegrade__wrapper-container"> -->
|
||||
|
||||
<button class="menu-homegrade__burger-menu-toggle" aria-label="<?php echo esc_html_e("Ouvrir le menu", 'deligraph-theme') ?>">
|
||||
<div class="menu-toggle-bar menu-toggle-bar--top"></div>
|
||||
<div class="menu-toggle-bar menu-toggle-bar--middle"></div>
|
||||
<div class="menu-toggle-bar menu-toggle-bar--bottom"></div>
|
||||
<!-- <?php echo get_template_part('resources/svg/burger-menu-icon.svg'); ?> -->
|
||||
</button>
|
||||
<?php
|
||||
wp_nav_menu(
|
||||
array(
|
||||
|
|
|
|||
|
|
@ -7,16 +7,8 @@ $menuitems = wp_get_nav_menu_items($menu->term_id, array('order' => 'DESC'));
|
|||
// print_r($menuitems);
|
||||
// echo '</pre>';
|
||||
?>
|
||||
<!-- MENU RENOV NEW -->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- MENU RENOV ANCIEN -->
|
||||
|
||||
<div class="menu-renovateur">
|
||||
|
||||
<div class="website_logo">
|
||||
|
|
@ -36,17 +28,40 @@ $menuitems = wp_get_nav_menu_items($menu->term_id, array('order' => 'DESC'));
|
|||
|
||||
|
||||
</div>
|
||||
<div class="menu-renovateur__interaction_toggles">
|
||||
<button id="search-module-toggle" class="menu-renovateur__search-module-toggle cta cta--circular cta--outline cta--outline-secondary !border border-secondary " title="<?php echo __("Ouvrir la recherche", "homegrade-theme__texte-fonctionnel") ?>" aria-label="<?php echo __("Ouvrir la recherche", "homegrade-theme__texte-fonctionnel") ?>" aria-controls="search-module">
|
||||
<img src="<?php echo get_template_directory_uri() . '/resources/img/graphic-assets/search-icon.svg' ?>" alt="">
|
||||
</button>
|
||||
<button id="mobile-menu-toggle" class="menu-renovateur__mobile-menu-toggle cta cta--outline cta--button" data-text-open="<?php echo __("Menu", 'homegrade-theme__texte-fonctionnel') ?>" data-text-close="<?php echo __("Fermer", 'homegrade-theme__texte-fonctionnel') ?>" aria-label="<?php echo __("Ouvrir le menu", "homegrade-theme__texte-fonctionnel") ?>" aria-controls="menu-renovateur-navlist-container">
|
||||
<span class="text-content">
|
||||
<?php echo __("Menu", 'homegrade-theme__texte-fonctionnel') ?>
|
||||
</span>
|
||||
<div class="toggle-icon">
|
||||
<div class="toggle-icon__bar toggle-icon__bar--top"></div>
|
||||
<div class="toggle-icon__bar toggle-icon__bar--middle"></div>
|
||||
<div class="toggle-icon__bar toggle-icon__bar--bottom"></div>
|
||||
</div>
|
||||
|
||||
<ul id="menu-menu-renovateur" class="menu-renovateur__navlist">
|
||||
</button>
|
||||
</div>
|
||||
<div id="menu-renovateur-navlist-container" class="menu-renovateur__navlist-container" closed>
|
||||
|
||||
<ul id="menu-menu-renovateur" class="menu-renovateur__navlist mobile-navlist">
|
||||
<?php
|
||||
$count = 0;
|
||||
$submenu = false;
|
||||
|
||||
|
||||
foreach ($menuitems as $key => $item) :
|
||||
// write_log("item");
|
||||
// write_log($item);
|
||||
$link = $item->url;
|
||||
$title = $item->title;
|
||||
$pageIcon = get_field('page_icon', $object->ID);
|
||||
// echo '<pre>';
|
||||
// print_r($item);
|
||||
// print_r($pageIcon);
|
||||
// echo '</pre>';
|
||||
// item does not have a parent so menu_item_parent equals 0 (false)
|
||||
?>
|
||||
|
||||
|
|
@ -59,14 +74,14 @@ $menuitems = wp_get_nav_menu_items($menu->term_id, array('order' => 'DESC'));
|
|||
|
||||
<!-- HAS SUBMENU -->
|
||||
<?php if ($menuitems[$key + 1]->menu_item_parent == $item->ID) : ?>
|
||||
<li id="menu-item-<?php echo $item->ID ?>" class="menu-item-has-children">
|
||||
<button>
|
||||
<li id="menu-item-<?php echo $item->ID ?>" class="menu-item menu-item-has-children">
|
||||
<button type="button" class="menu-item__submenu-toggle" aria-expanded="false">
|
||||
<?php echo $title; ?>
|
||||
</button>
|
||||
|
||||
<!-- NO SUBMENU -->
|
||||
<!-- HAS NO SUBMENU -->
|
||||
<?php else : ?>
|
||||
<li id="menu-item-<?php echo $item->ID ?>">
|
||||
<li id="menu-item-<?php echo $item->ID ?>" class="menu-item ">
|
||||
|
||||
<a href=" <?php echo $link; ?>" class="title">
|
||||
<?php echo $title; ?>
|
||||
|
|
@ -80,40 +95,48 @@ $menuitems = wp_get_nav_menu_items($menu->term_id, array('order' => 'DESC'));
|
|||
/* -----------------------------------------------------------
|
||||
IF IS A SUBMENU
|
||||
-----------------------------------------------------------*/
|
||||
write_log($item);
|
||||
// write_log($item);
|
||||
// echo '<pre>';
|
||||
// print_r(168);
|
||||
// print_r(gettype($item->ID));
|
||||
// echo '</pre>';
|
||||
if ($parent_id == $item->menu_item_parent) : ?>
|
||||
<?php if (!$submenu) : $submenu = true; ?>
|
||||
<div class="sub-menu sub-menu--closed">
|
||||
<div class="sub-menu sub-menu--closed" id="submenu-<?php echo $item->menu_item_parent ?>">
|
||||
|
||||
<button class="menu-item__submenu-close" id="submenu-toggle-<?php echo $item->menu_item_parent ?>" aria-label="<?php echo __("Fermer le sous-menu", "homegrade-theme__texte-fonctionnel") ?>" aria-controls="submenu-<?php echo $item->menu_item_parent ?>">
|
||||
<img src="<?php echo get_template_directory_uri() . '/resources/img/graphic-assets/close_submenu_icon.svg' ?>" alt="">
|
||||
</button>
|
||||
<?php /* NOS CONSEILS — TAXONOMY SUBMENU TITLE */
|
||||
if ($item->menu_item_parent === "168") : ?>
|
||||
<h5>Découvrez nos conseils par thématique</h5>
|
||||
<hr>
|
||||
<h5 class="menu-item__submenu-title">Découvrez nos conseils par thématique</h5>
|
||||
<?php endif; ?>
|
||||
<?php /* AIDES FINANCIERES SUBMENU TITLE */
|
||||
if ($item->menu_item_parent === "169") : ?>
|
||||
<h5>Quelles sont les aides financières disponibles pour votre logement ?</h5>
|
||||
<hr>
|
||||
<h5 class="menu-item__submenu-title">Quelles sont les aides financières disponibles pour votre logement ?</h5>
|
||||
|
||||
<?php endif; ?>
|
||||
|
||||
<ul class="sub-menu__navlist">
|
||||
<?php endif; ?>
|
||||
|
||||
<li class="sub-menu__navlist__item">
|
||||
<li class="submenu-item sub-menu__navlist__item">
|
||||
|
||||
<?php
|
||||
// #### IF IS TAXONOMY SUB-ITEM
|
||||
if ($item->type === "taxonomy") :
|
||||
|
||||
$term = get_term_by('id', $item->object_id, 'thematiques');
|
||||
$cover = get_field('taxonomy_pictures', "thematiques_" . $item->object_id);
|
||||
|
||||
?>
|
||||
<a href="<?php echo get_term_link($term) ?>">
|
||||
<img class="sub-menu__navlist__thematique-icon" src="<?php echo $cover['icon']['url'] ?>" alt="">
|
||||
<div class="details">
|
||||
<h6><?php echo $title; ?></h6>
|
||||
<p class="sub-menu__navlist__description"><?php echo $term->description ?></p>
|
||||
</div>
|
||||
</a>
|
||||
<?php else : ?>
|
||||
|
||||
<a href="<?php echo $link; ?>" class="title"><?php echo $title; ?></a>
|
||||
|
|
@ -137,16 +160,10 @@ $menuitems = wp_get_nav_menu_items($menu->term_id, array('order' => 'DESC'));
|
|||
endforeach; ?>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<button id="search-module-toggle" class="menu-renovateur__search-module-toggle cta cta--circular cta--outline cta--outline-secondary !border border-secondary " title="<?php echo __('Facebook', "homegrade-theme-terminologie") ?>" href="<?php echo $social_networks['facebook_profile_url'] ?>">
|
||||
<img src="<?php echo get_template_directory_uri() . '/resources/img/graphic-assets/search-icon.svg' ?>" alt="">
|
||||
</button>
|
||||
<button id="mobile-menu-toggle" class="menu-renovateur__mobile-menu-toggle cta cta--outline cta--button">
|
||||
Menu
|
||||
</button>
|
||||
|
||||
|
||||
<!-- SEARCH MODULE -->
|
||||
<?php get_template_part('template-components/header/search-module'); ?>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
?>
|
||||
|
||||
<div class="search-module search-module-closed" aria-hidden="true">
|
||||
<div id="search-module" class="search-module" mobile-closed aria-hidden role="search">
|
||||
<div class="search-module__wrapper-container">
|
||||
<?php get_search_form(); ?>
|
||||
<div class="search-module__suggestions">
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user