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 --> </section><!-- .site-branding -->
<nav id="site-navigation"> <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 <?php
wp_nav_menu( wp_nav_menu(
array( array(

146
style.css
View file

@ -67,7 +67,8 @@ header#masthead .site-description {
header#masthead { header#masthead {
position: relative; position: relative;
max-width: 100vw; width: 100vw;
max-width: 1200px;
overflow: hidden; overflow: hidden;
} }
@ -76,70 +77,71 @@ header#masthead nav div.menu-main-menu-container {
display: none; display: none;
} }
header#masthead nav button.menu-toggle { header#masthead nav label.menu-toggle,
header#masthead nav input.menu-toggle {
position: absolute; position: absolute;
width: 5em; width: 5em;
height: 5em; height: 5em;
right: 1em; right: 1em;
top: 1em; top: 4.5em;
background-color: transparent; background-color: var(--bg);
border: none; border: none;
color: var(--text-accent); color: var(--text-accent);
overflow: hidden; overflow: hidden;
font-size: .5em; font-size: .5em;
font-variant: small-caps; font-variant: small-caps;
text-align: center; text-align: center;
padding-top: 3em; padding-top: 3.2em;
color: var(--text-light); color: var(--text-light);
} }
header#masthead nav button.menu-toggle:before { header#masthead nav label.menu-toggle:before {
content: '|||'; content: '|||';
display: block; display: block;
position: absolute; position: absolute;
width: 1em; width: 1em;
height: 1em; height: 1em;
top: -10px; top: -8px;
left: 0; left: 2px;
right: 0; right: 0;
bottom: 0; bottom: 0;
margin: 0; margin: 0;
transform: rotate(90deg); transform: rotate(90deg);
font-size:4em; font-size:2rem;
font-family: var(--mono-font); font-family: var(--mono-font);
letter-spacing: -12px; letter-spacing: -12px;
line-height: 0.85; line-height: 0.85;
color: var(--text-light); color: var(--text-light);
} }
header#masthead nav div.menu-main-menu-container:before { header#masthead nav input.menu-toggle:checked ~ div.menu-main-menu-container {
content: '+';
display: block; 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 { header#masthead nav input.menu-toggle:checked + label.menu-toggle:before {
display: block; 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 { header#masthead div.menu-main-menu-container ul {
list-style: none; list-style: none;
padding: 0 1em; padding: 0 1em;
background-color: var(--accent-bg);
margin-bottom: 0; margin-bottom: 0;
} }
@ -149,26 +151,19 @@ header#masthead div.menu-main-menu-container a {
text-align: center; 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 { 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 { header#masthead div.menu-main-menu-container ul.menu > li > a {
font-size: 1.3em; font-size: 1.5em;
margin-bottom: .2em; margin-bottom: .2em;
display: block; 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;
} }
@ -210,6 +205,73 @@ main#primary nav.post-navigation .nav-next:after{
margin-left: .2em; 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 /* Various
--------------------------------------------- */ --------------------------------------------- */