valentineus/popov.link
valentineus/popov.link
0
Fork 0
Code Issues Pull Requests Actions Releases Activity

Add an animation menu on the only CSS

Browse Source 
Signed-off-by: Valentin Popov <info@valentineus.link>
This commit is contained in:
Valentin Popov 2019-03-24 19:46:33 +04:00
parent 456eeb794b
commit 9f1e42d525
Signed by: Valentin Popov
GPG Key ID: 269A00ACA90A8EA3
2 changed files with 90 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
_includes/navbar.html
View File

@ -1,26 +1,15 @@
{% assign pages = site.pages | where: "show", true %} {% assign pages = site.pages | where: "show", true %}
<nav role="navigation"> <div class="navigation-container">
<ul class="nav-pills"> <input id="toggle-button" class="toggle-button" type="checkbox" />
{% unless page.url == "/index.html" %}
<li role="presentation">
<strong>
<a class="nav-link" href="/">Home</a>
</strong>
</li>
{% endunless %}
<!-- Right side --> <label class="toggle-label" for="toggle-button">
<ul class="nav-pills nav-right"> <span></span>
{% for page in pages %} <span></span>
<li role="presentation"> <span></span>
<strong> </label>
<a class="nav-link" href="{{ page.url | strip_newlines | strip_html | strip | normalize_whitespace | relative_url | uri_escape }}">
{{ page.title | strip_newlines | strip_html | strip | normalize_whitespace | smartify | xml_escape }} <nav class="navigation" role="navigation">
</a> <ul class="navigation-pills"></ul>
</strong>
</li>
{% endfor %}
</ul>
</ul>
</nav> </nav>
</div>

103
_scss/components/_navigation.scss
View File

@ -1,36 +1,87 @@
.nav-pills { .navigation-container {
list-style-type: none; background: $color-bg;
margin: 0; border-left: 1px solid $color-bg-alt;
overflow: hidden; border-right: 1px solid $color-bg-alt;
height: 100px;
left: 0;
margin: auto;
max-width: 52em;
padding: 0; padding: 0;
text-align: center; position: fixed;
right: 0;
top: 0;
width: 100%;
}
li { .toggle-button {
float: left; display: none;
padding: .5em;
&:checked ~ .navigation {
transform: none;
transition: all .1s;
}
&:checked ~ .toggle-label {
span {
opacity: 0;
top: 50%;
}
span:first-child {
opacity: 1;
transform: rotate(405deg);
}
span:last-child {
opacity: 1;
transform: rotate(-405deg);
}
} }
} }
.nav-link { .toggle-label {
text-align: center;
text-decoration: none;
text-transform: uppercase;
&:active,
&:focus,
&:hover {
border: 0;
text-decoration: none;
}
}
.nav-right {
float: right; float: right;
height: 20px;
position: relative;
right: 40px;
top: 40px;
width: 15px;
&:hover {
cursor: pointer;
} }
@media (max-width: 382px) { span {
.nav-right, background: $color-text;
.nav-pills li { height: 2px;
float: none; position: absolute;
top: 50%;
width: 100%;
&:first-child {
top: 3px;
}
&:last-child {
top: 16px;
} }
} }
}
.navigation {
background: $color-bg;
border-left: 1px solid $color-bg-alt;
border-right: 1px solid $color-bg-alt;
height: 100%;
left: 0;
margin: auto;
max-width: 52em;
padding: 0;
position: fixed;
right: 0;
top: 100px;
transform: scale(.1, 0);
transform-origin: 100% 0%;
transition: none;
width: 100%;
}