forked from shadowfacts/shadowfacts.net
Add Other dropdown menu
This commit is contained in:
parent
6a4d50f362
commit
7ca373b020
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue