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

35
_includes/navbar.html
View File

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

105
_scss/components/_navigation.scss
View File

@ -1,36 +1,87 @@
.nav-pills {
list-style-type: none;
margin: 0;
overflow: hidden;
.navigation-container {
background: $color-bg;
border-left: 1px solid $color-bg-alt;
border-right: 1px solid $color-bg-alt;
height: 100px;
left: 0;
margin: auto;
max-width: 52em;
padding: 0;
text-align: center;
position: fixed;
right: 0;
top: 0;
width: 100%;
}
li {
float: left;
padding: .5em;
.toggle-button {
display: none;
&: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 {
text-align: center;
text-decoration: none;
text-transform: uppercase;
&:active,
&:focus,
&:hover {
border: 0;
text-decoration: none;
}
}
.nav-right {
.toggle-label {
float: right;
}
height: 20px;
position: relative;
right: 40px;
top: 40px;
width: 15px;
@media (max-width: 382px) {
.nav-right,
.nav-pills li {
float: none;
&:hover {
cursor: pointer;
}
span {
background: $color-text;
height: 2px;
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%;
}