REFACTOR Menu structure
This commit is contained in:
Antoine M
parent
89666a2a3a
commit
dfe3f9f164
|
|
@ -27,10 +27,13 @@
|
|||
|
||||
/* ########### LAYOUT ############ */
|
||||
@import './layout/nav.css';
|
||||
@import './layout/nav/header.css';
|
||||
@import './layout/nav/secondary-menu.css';
|
||||
@import './layout/nav/primary-menu.css';
|
||||
|
||||
@import './layout/footer.css';
|
||||
@import './layout/section.css';
|
||||
@import './layout/gutenberg.css';
|
||||
|
||||
/* ########### PAGES ############ */
|
||||
@import './pages/archive-dbmob.css';
|
||||
|
||||
|
|
|
|||
224
resources/css/layout/nav/primary-menu.css
Normal file
224
resources/css/layout/nav/primary-menu.css
Normal file
|
|
@ -0,0 +1,224 @@
|
|||
.primary-menu-container {
|
||||
@apply mx-auto
|
||||
bg-primary
|
||||
text-white
|
||||
relative
|
||||
h-fit
|
||||
py-0
|
||||
lg:py-8
|
||||
px-8
|
||||
2xl:px-20
|
||||
my-0;
|
||||
|
||||
.website_logo {
|
||||
@apply hidden lg:block;
|
||||
}
|
||||
|
||||
.tools-container {
|
||||
@apply hidden lg:flex;
|
||||
}
|
||||
|
||||
a {
|
||||
@apply text-white;
|
||||
}
|
||||
|
||||
nav#primary-menu-nav {
|
||||
@apply max-w-screen-2xl lg:w-full mx-auto;
|
||||
}
|
||||
.logo {
|
||||
@apply mr-12
|
||||
w-[190px]
|
||||
xl:w-[222px];
|
||||
}
|
||||
#primary-menu {
|
||||
@apply flex
|
||||
flex-col
|
||||
lg:flex-row
|
||||
items-center
|
||||
justify-around
|
||||
lg:justify-between;
|
||||
|
||||
ul {
|
||||
@apply lg:flex
|
||||
gap-x-2
|
||||
lg:gap-x-4
|
||||
xl:gap-x-8
|
||||
pr-0;
|
||||
}
|
||||
|
||||
/* Highlight using list element */
|
||||
li.current-page-parent > a,
|
||||
li.current_page_item > a {
|
||||
@apply font-medium
|
||||
text-white
|
||||
decoration-secondary
|
||||
underline
|
||||
underline-offset-8;
|
||||
}
|
||||
|
||||
li.menu-item {
|
||||
@apply font-medium
|
||||
text-lg
|
||||
text-center;
|
||||
|
||||
&:hover > a,
|
||||
a:focus {
|
||||
@apply cursor-pointer
|
||||
underline
|
||||
underline-offset-8
|
||||
decoration-1
|
||||
text-white;
|
||||
}
|
||||
a:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* IF SUBMENU CHILD */
|
||||
.menu-item-submenu-toggle {
|
||||
&:hover,
|
||||
&:focus {
|
||||
@apply text-secondary;
|
||||
}
|
||||
@apply relative pr-4;
|
||||
&:after {
|
||||
@apply absolute right-0;
|
||||
content: '▼';
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
line-height: 0.5;
|
||||
height: 10px;
|
||||
top: calc(50% - 4px);
|
||||
width: 10px;
|
||||
margin-left: 20px;
|
||||
transform-origin: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
transition: all 0.3s ease-out;
|
||||
}
|
||||
}
|
||||
.menu-item-submenu-toggle[aria-expanded='false']:after {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
.menu-item-submenu-toggle[aria-expanded='true']:after {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
li.menu-item.has-page-icon {
|
||||
@apply flex flex-row lg:flex-col items-center justify-start lg:justify-end gap-4 font-normal tracking-wide;
|
||||
.page_icon {
|
||||
@apply w-7 h-7 object-contain object-center;
|
||||
}
|
||||
}
|
||||
li.menu-item.menu-item-has-children:hover {
|
||||
@screen lg {
|
||||
.menu-item-submenu-toggle:after {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.sub-menu {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* submenus */
|
||||
li .sub-menu {
|
||||
@apply bg-primary
|
||||
p-6
|
||||
mx-auto
|
||||
lg:mx-0
|
||||
static
|
||||
lg:absolute;
|
||||
z-index: 999;
|
||||
display: none;
|
||||
|
||||
&.sub-menu-open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
li {
|
||||
@apply py-2 lg:text-left;
|
||||
}
|
||||
|
||||
> a::after {
|
||||
transform: translateY(-2px) rotate(-90deg);
|
||||
content: '';
|
||||
display: inline-block;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
margin-left: 20px;
|
||||
background-image: url('../resources/img/arrow_down_white.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
transition: all 0.3s ease-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* RESPONSIVE */
|
||||
@media (max-width: 960px) {
|
||||
.primary-menu-container {
|
||||
@apply w-fit mx-0;
|
||||
#primary-menu {
|
||||
@apply mt-0
|
||||
left-0
|
||||
z-40
|
||||
hidden;
|
||||
|
||||
/* min-height: 100vh; */
|
||||
height: fit-content;
|
||||
top: 0;
|
||||
width: fit-content;
|
||||
|
||||
> ul {
|
||||
@apply max-w-xs
|
||||
mx-auto;
|
||||
/* min-height: 96vh; */
|
||||
padding-top: 5vh;
|
||||
}
|
||||
li.menu-item {
|
||||
@apply mt-0
|
||||
text-center
|
||||
text-white
|
||||
font-medium
|
||||
py-8
|
||||
text-lg
|
||||
|
||||
pb-0;
|
||||
|
||||
.sub-menu li {
|
||||
@apply text-sm;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* BURGER MENU */
|
||||
body:has(.nav-open) {
|
||||
@apply max-h-screen
|
||||
overflow-hidden;
|
||||
|
||||
/* #content,
|
||||
footer,
|
||||
.wpml-ls-statics-footer {
|
||||
@apply !hidden;
|
||||
} */
|
||||
}
|
||||
|
||||
.cta_plain_secondary,
|
||||
.switch_language {
|
||||
/* @apply self-end; */
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 960px) and (hover: none) {
|
||||
/* ul {
|
||||
@apply w-max mx-auto;
|
||||
} */
|
||||
.primary-menu-container {
|
||||
li.menu-item {
|
||||
@apply mx-auto
|
||||
/* !text-left */;
|
||||
}
|
||||
}
|
||||
}
|
||||
57
resources/css/layout/nav/secondary-menu.css
Normal file
57
resources/css/layout/nav/secondary-menu.css
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
.secondary-menu-container {
|
||||
@apply bg-primary items-center px-8 py-4
|
||||
2xl:px-32;
|
||||
|
||||
a {
|
||||
@apply text-white;
|
||||
}
|
||||
|
||||
.secondary-menu-nav {
|
||||
@apply max-w-screen-2xl w-full mx-auto flex justify-between items-center;
|
||||
|
||||
ul {
|
||||
@apply block lg:flex justify-between gap-4;
|
||||
}
|
||||
a {
|
||||
@apply font-normal text-xl;
|
||||
}
|
||||
li.menu-item > a:hover {
|
||||
@apply underline underline-offset-8 decoration-1;
|
||||
}
|
||||
.network-redirector {
|
||||
@apply lg:block hidden;
|
||||
a {
|
||||
@apply flex items-center gap-4;
|
||||
&:after {
|
||||
transition: all 0.3s ease-out;
|
||||
@apply w-8 h-8 bg-no-repeat bg-contain bg-center text-xl;
|
||||
filter: invert(1);
|
||||
content: '';
|
||||
background-image: url('../resources/img/carhop-fleche-lien-externe-full.svg');
|
||||
display: inline-block;
|
||||
}
|
||||
&:hover {
|
||||
&:after {
|
||||
@apply translate-x-2 rotate-45;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.secondary-menu-container {
|
||||
@apply hidden lg:block;
|
||||
}
|
||||
|
||||
/* @media (max-width: 1024px) {
|
||||
header[nav-open='true'] .secondary-menu-container {
|
||||
@apply block;
|
||||
}
|
||||
} */
|
||||
|
||||
@media (max-width: 960px) {
|
||||
.secondary-menu-container {
|
||||
@apply w-fit mx-0;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user