Refining Mobile menu starter with submenus
This commit is contained in:
parent
80d2b6ee0e
commit
b138f60fc9
110
css/app.css
110
css/app.css
|
|
@ -982,25 +982,101 @@ article>*:not(.entry-content),
|
|||
padding-right: 2rem;
|
||||
}
|
||||
|
||||
.close_btn {
|
||||
display: none;
|
||||
/* li.current-page-parent,
|
||||
li.current-page-ancestor */
|
||||
|
||||
.primary-menu-container li.current-page-parent > a,
|
||||
.primary-menu-container li.current_page_item > a {
|
||||
font-weight: 700;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(20 184 166 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.menu-navlink {
|
||||
@media (min-width: 960px) {
|
||||
.primary-menu-container li.current-page-parent > a,
|
||||
.primary-menu-container li.current_page_item > a {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(14 165 233 / var(--tw-text-opacity));
|
||||
}
|
||||
}
|
||||
|
||||
/* Highlight using list element */
|
||||
|
||||
.primary-menu-container li.menu-item {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.primary-menu-container li.menu-item:hover > a {
|
||||
cursor: pointer;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(20 184 166 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
.primary-menu-container li.menu-item:hover > a {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(14 165 233 / var(--tw-text-opacity));
|
||||
}
|
||||
}
|
||||
|
||||
/* submenus */
|
||||
|
||||
.primary-menu-container li:has(.sub-menu) .sub-menu {
|
||||
position: absolute;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.primary-menu-container li:has(.sub-menu) > 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;
|
||||
}
|
||||
|
||||
.primary-menu-container li:has(.sub-menu):hover > a::after, .primary-menu-container li:has(.sub-menu):focus > a::after {
|
||||
transform: translateY(-2px) rotate(0deg);
|
||||
}
|
||||
|
||||
.primary-menu-container li:has(.sub-menu):hover .sub-menu, .primary-menu-container li:has(.sub-menu):focus .sub-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.close_btn {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* RESPONSIVE */
|
||||
|
||||
@media (max-width: 960px) {
|
||||
.primary-menu-container {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
max-height: 100vh;
|
||||
}
|
||||
|
||||
.primary-menu-container li:has(.sub-menu) .sub-menu {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
/* position: static !important; */
|
||||
position: static;
|
||||
}
|
||||
|
||||
#primary-menu {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
margin-top: 0px;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(14 165 233 / var(--tw-bg-opacity));
|
||||
transition: all 0.3s ease-in-out;
|
||||
transition: all 0.3s ease-out;
|
||||
transform: translateY(-110vh);
|
||||
z-index: 800;
|
||||
height: -webkit-fit-content;
|
||||
|
|
@ -1036,6 +1112,7 @@ article>*:not(.entry-content),
|
|||
/* BURGER MENU */
|
||||
|
||||
#primary-menu body:has(header.burger_menu_active) {
|
||||
max-height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
|
@ -1062,6 +1139,31 @@ article>*:not(.entry-content),
|
|||
}
|
||||
}
|
||||
|
||||
@media (max-width: 960px) and (hover: none) {
|
||||
body {
|
||||
background-color: red !important;
|
||||
}
|
||||
|
||||
/* ul {
|
||||
@apply w-max mx-auto;
|
||||
} */
|
||||
|
||||
.primary-menu-container li.menu-item {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.primary-menu-container li:has(.sub-menu) > a::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.primary-menu-container li:has(.sub-menu) .sub-menu {
|
||||
padding-left: 3rem;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
/* ########### BLOCKS ############ */
|
||||
|
||||
/* Home */
|
||||
|
|
|
|||
|
|
@ -19,9 +19,9 @@
|
|||
<?php do_action('tailpress_header'); ?>
|
||||
|
||||
<header id="primary-header">
|
||||
|
||||
<!-- <span>陠</span> -->
|
||||
<div class="primary-menu-container">
|
||||
<div class="lg:flex lg:justify-between lg:items-center border-b py-6">
|
||||
<div class="lg:flex lg:justify-between lg:items-center py-6">
|
||||
<div class="flex justify-between items-center">
|
||||
<div>
|
||||
<?php if (has_custom_logo()) { ?>
|
||||
|
|
|
|||
|
|
@ -1,22 +1,75 @@
|
|||
.primary-menu-container {
|
||||
@apply mx-auto max-w-screen-xl px-8;
|
||||
/* Highlight using list element */
|
||||
/* li.current-page-parent,
|
||||
li.current-page-ancestor */
|
||||
li.current-page-parent > a,
|
||||
li.current_page_item > a {
|
||||
@apply font-bold
|
||||
text-secondary
|
||||
lg:text-primary;
|
||||
}
|
||||
|
||||
li.menu-item {
|
||||
@apply font-medium text-sm uppercase;
|
||||
&:hover > a {
|
||||
@apply cursor-pointer
|
||||
text-secondary
|
||||
lg:text-primary;
|
||||
}
|
||||
}
|
||||
/* submenus */
|
||||
li:has(.sub-menu) {
|
||||
.sub-menu {
|
||||
position: absolute;
|
||||
display: none;
|
||||
}
|
||||
> 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;
|
||||
}
|
||||
}
|
||||
li:has(.sub-menu):hover,
|
||||
li:has(.sub-menu):focus {
|
||||
> a::after {
|
||||
transform: translateY(-2px) rotate(0deg);
|
||||
}
|
||||
.sub-menu {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.close_btn {
|
||||
display: none;
|
||||
}
|
||||
.menu-navlink {
|
||||
@apply font-medium
|
||||
text-sm
|
||||
uppercase;
|
||||
}
|
||||
|
||||
/* RESPONSIVE */
|
||||
@media (max-width: 960px) {
|
||||
.primary-menu-container {
|
||||
@apply my-0 max-h-screen;
|
||||
li:has(.sub-menu) {
|
||||
.sub-menu {
|
||||
@apply mx-auto;
|
||||
/* position: static !important; */
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#primary-menu {
|
||||
@apply bg-primary
|
||||
mt-0
|
||||
left-0
|
||||
absolute;
|
||||
transition: all 0.3s ease-in-out;
|
||||
transition: all 0.3s ease-out;
|
||||
transform: translateY(-110vh);
|
||||
z-index: 800;
|
||||
height: fit-content;
|
||||
|
|
@ -42,6 +95,7 @@
|
|||
}
|
||||
/* BURGER MENU */
|
||||
body:has(header.burger_menu_active) {
|
||||
@apply max-h-screen;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
|
@ -68,3 +122,25 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
@media (max-width: 960px) and (hover: none) {
|
||||
body {
|
||||
background-color: red !important;
|
||||
}
|
||||
/* ul {
|
||||
@apply w-max mx-auto;
|
||||
} */
|
||||
.primary-menu-container {
|
||||
li.menu-item {
|
||||
@apply mx-auto !text-left;
|
||||
}
|
||||
li:has(.sub-menu) {
|
||||
> a::after {
|
||||
display: none;
|
||||
}
|
||||
.sub-menu {
|
||||
@apply block pl-12;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
3
resources/img/arrow_down_white.svg
Normal file
3
resources/img/arrow_down_white.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="60.566" height="60.012" viewBox="0 0 60.566 60.012">
|
||||
<path id="Tracé_766" data-name="Tracé 766" d="M0,0,30.42,60.012,60.566,0Z" transform="translate(0 0)" fill="#fff"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 227 B |
3
resources/img/arrow_right_white.svg
Normal file
3
resources/img/arrow_right_white.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="14.52" height="27.04" viewBox="0 0 14.52 27.04">
|
||||
<path id="Tracé_139" data-name="Tracé 139" d="M24.565.354,12.459,12.46.354.354" transform="translate(1.061 25.979) rotate(-90)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 327 B |
Loading…
Reference in New Issue
Block a user