jakub/jakubb-hugo
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add anims. to menu and clened up a few things

Browse Source
This commit is contained in:
worktop 2024-02-02 13:42:27 -05:00
parent be6208af22
commit 64aba78917
2 changed files with 63 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
layouts/partials/nav.html
View File

@ -1,30 +1,33 @@
<header class="header"> <header class="header">
<input class="menu-btn" type="checkbox" id="menu-btn" /> <input class="menu-btn" type="checkbox" id="menu-btn" />
<ul class="menu" > <ul class="menu" >
<li> <li>
<a href="/" class="logo" >{{ .Site.Title }}</a> <a href="/" class="logo" >{{ .Site.Title }}</a>
<label class="menu-icon" for="menu-btn">
<div class="hamburger" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<script>
function myFunction(x) {
x.classList.toggle("change");
}
</script>
</label>
<span class="menu-entries">
<a href="/" class="home-link" >Home</a>
{{ range.Site.Menus.main }}
<a href="{{ .URL }}">{{ .Name }}</a>
{{ end }}
</span>
</li> </li>
<li>
<label class="menu-icon" for="menu-btn">
<div class="hamburger" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<script>
function myFunction(x) {
x.classList.toggle("change");
}
</script>
</label>
</li>
<li>
<ul class="menu-entries">
<li><a href="/" class="home-link" >Home</a> </li>
{{ range.Site.Menus.main }}
<li><a href="{{ .URL }}">{{ .Name }}</a></li>
{{ end }}
</ul>
</li>
</ul> </ul>
</header> </header>

43
static/css/style.css
View File

@ -40,10 +40,13 @@ a{
display: none; display: none;
} }
.menu-entries a{
transition: 400ms;
}
.menu-entries a:hover{ .menu-entries a:hover{
background-color: var(--acc-1); background-color: var(--acc-1);
color: var(--alt-bg); color: var(--alt-bg);
transition: 400ms;
box-shadow: inset 0 -20px 20px -20px var(--shadow); box-shadow: inset 0 -20px 20px -20px var(--shadow);
} }
@ -51,10 +54,15 @@ a{
.menu { .menu {
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style: none;
} }
.menu li {
list-style-type: none;
}
.menu-entries { .menu-entries {
float: right; float: right;
padding: inherit;
} }
.menu-btn { .menu-btn {
@ -91,11 +99,16 @@ footer {
.menu-entries { .menu-entries {
text-align: center; text-align: center;
float: none; float: none;
display: none; height: 0;
max-height: 0;
transition-property: all;
transition-duration: 400ms;
overflow: hidden;
} }
a.logo { a.logo {
display: block; display: block;
transition: 400ms;
} }
.menu-btn:checked ~ .menu-btn:checked ~
@ -104,7 +117,16 @@ a.logo {
display: block; display: block;
} }
.menu-btn:checked ~ .menu .logo, .menu-entries a:hover { .menu-btn:checked ~
.menu li .menu-entries {
height: auto;
max-height: 200px;
transition-property: all;
transition-duration: 400ms;
}
.menu-btn:checked ~ .menu .logo, .menu-entries a:hover {
background-color: var(--acc-1); background-color: var(--acc-1);
color: var(--alt-bg); color: var(--alt-bg);
transition: 400ms; transition: 400ms;
@ -138,7 +160,7 @@ a.logo {
.change .bar1 { .change .bar1 {
background-color: var(--alt-bg); background-color: var(--alt-bg);
transform: translate(0, 11px) rotate(-45deg); transform: translate(0, 11px) rotate(45deg);
} }
.change .bar2 { .change .bar2 {
@ -146,7 +168,7 @@ a.logo {
} }
.change .bar3 { .change .bar3 {
transform: translate(0, -11px) rotate(45deg); transform: translate(0, -11px) rotate(-45deg);
background-color: var(--alt-bg); background-color: var(--alt-bg);
} }
@ -162,6 +184,15 @@ a.logo {
}
@media screen and (min-width: 755px) and (max-width: 1040px) {
.menu-entries {
position: absolute;
top: 0;
right: 0;
}
} }
@media screen and (min-width: 1040px) { @media screen and (min-width: 1040px) {