shadowfacts
/
shadowfacts.net
1
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

Add Other dropdown menu

This commit is contained in:
Shadowfacts 2019-02-16 14:43:41 -05:00
parent 6a4d50f362
commit 7ca373b020
Signed by: shadowfacts
GPG Key ID: 94A5AB95422746E5
2 changed files with 67 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
site/css/main.scss
View File

@ -237,13 +237,70 @@ figure {
.site-nav ul {
padding: 0;
margin: 0;
display: inline-block;
position: relative;
li {
list-style: none;
display: inline;
margin-right: 1em;
font-variant: small-caps;
font-weight: bold;
&:not(:last-child) {
margin-right: 1em;
}
a.dropdown-link {
color: black;
text-decoration: none;
.arrow-down {
display: inline-block;
width: 0.5em;
height: 0.5em;
margin-bottom: 2px;
margin-left: 2px;
border-bottom: 2px solid var(--ui-text-color);
border-right: 2px solid var(--ui-text-color);
transform: rotate(45deg);
}
}
ul {
visibility: hidden;
opacity: 0;
min-width: 5rem;
position: absolute;
transition: all 0.5s ease;
right: -1em;
display: none;
padding: 1em;
background-color: white;
box-shadow: 0 10px 15px -5px var(--shadow-color), // bottom
10px 0 15px -5px var(--shadow-color), // right
-10px 0 15px -5px var(--shadow-color); // left
z-index: 10;
li {
width: 100%;
display: block;
margin-right: 0px;
text-align: right;
&:not(:last-child) {
margin-bottom: 1em;
}
}
}
&:hover > ul,
&:focus-within > ul,
ul:hover,
ul:focus {
visibility: visible;
opacity: 1;
display: block;
}
}
}

11
site/layouts/default.html.ejs
View File

@ -50,10 +50,17 @@
<p class="site-description">The outper part of a shadow is called the penumbra.</p>
<nav class="site-nav" role="navigation">
<ul>
<li><%- fancyLink("Meme Machine", "https://mememachine.shadowfacts.net") %></li>
<li><%- fancyLink("Tutorials", "/tutorials/") %></li>
<li><%- fancyLink("RTFM", "https://rtfm.shadowfacts.net") %></li>
<li><%- fancyLink("Type", "https://type.shadowfacts.net") %></li>
<li><%- fancyLink("Tutorials", "/tutorials/") %></li>
<li>
<a href="#" class="dropdown-link" aria-haspopup="true">Other <span class="arrow arrow-down" aria-hidden="true"></span></a>
<ul aria-label="other links">
<li><%- fancyLink("Gitea", "https://git.shadowfacts.net") %></li>
<li><%- fancyLink("Maven", "https://maven.shadowfacts.net") %></li>
<li><%- fancyLink("Meme Machine", "https://mememachine.shadowfacts.net") %></li>
</ul>
</li>
</ul>
</nav>
</div>