Matt/EcoWP
0
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Update mobile menu with checkbox + wide screen menu

Browse source
This commit is contained in:
Matt Marcha 2022-09-25 20:08:46 +13:00
parent 2cd916746e
commit 017bc4940c
2 changed files with 107 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
header.php
View file

@ -43,7 +43,8 @@
</section><!-- .site-branding -->
<nav id="site-navigation">
<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">Menu</button>
<input type="checkbox" id='mainmenu' class="menu-toggle" />
<label for="mainmenu" class="menu-toggle">Menu</label>
<?php
wp_nav_menu(
array(

148
style.css
View file

@ -67,7 +67,8 @@ header#masthead .site-description {
header#masthead {
position: relative;
max-width: 100vw;
width: 100vw;
max-width: 1200px;
overflow: hidden;
}
@ -76,70 +77,71 @@ header#masthead nav div.menu-main-menu-container {
display: none;
}
header#masthead nav button.menu-toggle {
header#masthead nav label.menu-toggle,
header#masthead nav input.menu-toggle {
position: absolute;
width: 5em;
height: 5em;
right: 1em;
top: 1em;
background-color: transparent;
top: 4.5em;
background-color: var(--bg);
border: none;
color: var(--text-accent);
overflow: hidden;
font-size: .5em;
font-variant: small-caps;
text-align: center;
padding-top: 3em;
padding-top: 3.2em;
color: var(--text-light);
}
header#masthead nav button.menu-toggle:before {
header#masthead nav label.menu-toggle:before {
content: '|||';
display: block;
position: absolute;
width: 1em;
height: 1em;
top: -10px;
left: 0;
top: -8px;
left: 2px;
right: 0;
bottom: 0;
margin: 0;
transform: rotate(90deg);
font-size:4em;
font-size:2rem;
font-family: var(--mono-font);
letter-spacing: -12px;
line-height: 0.85;
color: var(--text-light);
}
header#masthead nav div.menu-main-menu-container:before {
content: '+';
header#masthead nav input.menu-toggle:checked ~ div.menu-main-menu-container {
display: block;
width: 1em;
height: 1em;
font-size: 4em;
line-height: 1;
text-align: center;
z-index: 1;
color: var(--text-accent);
transform: rotate(45deg);
position: absolute;
right: -0.03em;
top: -0.15em;
background-color: var(--bg);
}
header#masthead nav button.menu-toggle:focus + div.menu-main-menu-container {
display: block;
header#masthead nav input.menu-toggle:checked + label.menu-toggle:before {
content: '+';
transform: rotate(45deg);
font-size: 4rem;
left: -23px;
top: -18px;
-webkit-text-stroke: 2px var(--bg);
}
header#masthead div.menu-main-menu-container {
position: fixed;
width: 100vw;
height: 100%;
z-index: 9;
overflow: scroll;
background-color: var(--bg);
padding-bottom: 10rem;
}
header#masthead div.menu-main-menu-container ul {
list-style: none;
padding: 0 1em;
background-color: var(--accent-bg);
margin-bottom: 0;
}
@ -149,26 +151,19 @@ header#masthead div.menu-main-menu-container a {
text-align: center;
}
header#masthead div.menu-main-menu-container ul.menu > li > a:before,
header#masthead div.menu-main-menu-container ul.menu > li > a:after {
content: '-------';
display: inline-block;
margin-top: -.5em;
padding: 0 .5em;
}
header#masthead div.menu-main-menu-container ul.menu {
padding: 1em;
}
header#masthead div.menu-main-menu-container ul.menu > li {
margin-bottom: .5em;
margin-bottom: 1.5em;
}
header#masthead div.menu-main-menu-container ul.menu > li > a {
font-size: 1.3em;
font-size: 1.5em;
margin-bottom: .2em;
display: block;
font-variant: small-caps;
}
header#masthead div.menu-main-menu-container ul.menu > li > ul.sub-menu {
border: 1px solid var(--text-light);
padding: 1em;
}
@ -180,7 +175,7 @@ header#masthead div.menu-main-menu-container ul.sub-menu > li > a {
main#primary nav.posts-navigation .nav-links,
main#primary nav.post-navigation .nav-links{
position: relative;
position: relative;
display: flex;
flex-direction: row;
flex-wrap: wrap;
@ -210,6 +205,73 @@ main#primary nav.post-navigation .nav-next:after{
margin-left: .2em;
}
@media only screen and (min-width : 764px) {
header#masthead {
overflow: visible;
}
header#masthead nav div.menu-main-menu-container {
display: block;
position: static;
overflow: visible;
padding: 0 1em;
text-align: right;
margin-top: -2.6em;
background-color: transparent;
}
header#masthead nav label.menu-toggle,
header#masthead nav input.menu-toggle {
display: none;
}
header#masthead div.menu-main-menu-container > ul.menu {
text-align: right;
}
header#masthead div.menu-main-menu-container > ul.menu > li {
display: inline-block;
position: relative;
margin: 0 1em;
text-align: left;
}
header#masthead div.menu-main-menu-container > ul.menu > li > a {
font-size: 1.3em;
}
header#masthead div.menu-main-menu-container > ul.menu > li > ul.sub-menu {
display: none;
}
header#masthead div.menu-main-menu-container > ul.menu > li:hover > ul.sub-menu {
display: block;
position: absolute;
z-index: 1000;
right: -2em;
width: fit-content;
background-color: var(--bg);
box-shadow: 0 0 10px 5px var(--bg);
}
header#masthead div.menu-main-menu-container > ul.menu > li:hover > ul.sub-menu > li {
width: auto;
left: 0;
width: fit-content;
padding: 0;
margin: 0;
}
header#masthead div.menu-main-menu-container > ul.menu > li:hover > ul.sub-menu > li a {
white-space: nowrap;
font-size: 1em;
letter-spacing: -.5px;
}
}
/* Various
--------------------------------------------- */