heimoshuiyu/aether
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add classes to hamburger menu elements and fix scrollbar on overlay menu

Browse Source
This commit is contained in:
Joseph Hutchinson
2018-05-01 13:35:00 -04:00
parent a41ab67dc1
commit ecef4c9abf
2 changed files with 12 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
layouts/partials/nav-bar.html
View File

@@ -4,10 +4,10 @@
<input type="checkbox" onclick="hamburgerMenuPressed()"/> <input type="checkbox" onclick="hamburgerMenuPressed()"/>
<span></span> <span></span>
<span></span> <span></span>
<ul class="hamburger-menu-view"> <ul class="hamburger-menu-overlay">
<li><a href="/">Home</a></li> <li><a href="/" class="hamburger-menu-overlay-link">Home</a></li>
{{ range $key, $value := .Site.Taxonomies.categories }} {{ range $key, $value := .Site.Taxonomies.categories }}
<li><a href="/categories/{{ $key | urlize }}">{{ $key | humanize }}</a></li> <li><a href="/categories/{{ $key | urlize }}" class="hamburger-menu-overlay-link">{{ $key | humanize }}</a></li>
{{ end }} {{ end }}
</ul> </ul>
</div> </div>

27
static/css/style.css
View File

@@ -58,61 +58,52 @@ strong {
width: 33px; width: 33px;
height: 4px; height: 4px;
position: relative; position: relative;
background: #3A3B3C; background-color: #3A3B3C;
border-radius: 3px; border-radius: 3px;
z-index: 105; z-index: 105;
transform-origin: center; transform-origin: center;
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), background-color 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
opacity 0.55s ease;
} }
.hamburger-menu span:first-of-type { .hamburger-menu span:first-of-type {
margin-bottom: 5px; margin-bottom: 5px;
} }
.hamburger-menu input:checked ~ span { .hamburger-menu input:checked ~ span {
opacity: 1; background-color: white;
background: white;
transform: rotate(45deg) translate(3.2px , 3.2px); transform: rotate(45deg) translate(3.2px , 3.2px);
} }
.hamburger-menu input:checked ~ span:nth-last-child(2) { .hamburger-menu input:checked ~ span:nth-last-child(2) {
transform: rotate(-45deg) translate(3.2px , -3.2px); transform: rotate(-45deg) translate(3.2px , -3.2px);
} }
.hamburger-menu input ~ ul { .hamburger-menu-overlay {
display: block; display: block;
position: fixed; position: fixed;
box-sizing: border-box; box-sizing: border-box;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100vw;
height: 100%; height: 100%;
z-index: 100; z-index: 100;
text-align: center; text-align: center;
visibility: hidden; visibility: hidden;
overflow-y: hidden; overflow-y: auto;
margin: 0; margin: 0;
padding: 3em 0 0 0; padding: 3em 0 0 0;
background-color: rgb(0, 0, 0); background-color: #000;
opacity: 0; opacity: 0;
transition: visibility 0.3s ease-out, opacity 0.3s ease-out; transition: visibility 0.3s ease-out, opacity 0.3s ease-out;
} }
.hamburger-menu input:checked ~ ul { input:checked ~ .hamburger-menu-overlay {
visibility: visible; visibility: visible;
opacity: 0.9; opacity: 0.9;
overflow-y: scroll;
} }
.hamburger-menu > ul > li > a { .hamburger-menu-overlay-link {
text-decoration: none; text-decoration: none;
text-transform: uppercase; text-transform: uppercase;
font-size: 2em; font-size: 2em;
line-height: 1.7; line-height: 1.7;
color: white; color: white;
transition: all 0.5s ease-out;
/* opacity: 0; */
} }
/* .hamburger-menu input:checked ~ ul li a {
font-size: 1.8em;
opacity: 1;
} */
.post { .post {
margin: 0 0 1em 0; margin: 0 0 1em 0;
line-height: 1.5; line-height: 1.5;