mirror of
https://codeberg.org/angestoepselt/homepage.git
synced 2025-05-24 14:46:16 +00:00
Use details elements for the mobile navigation
This commit is contained in:
parent
8b78fe1690
commit
5c1826eea2
3 changed files with 93 additions and 73 deletions
|
|
@ -13,13 +13,11 @@
|
|||
<link rel="alternate" href="{{ metadata.jsonfeed.path | url }}" type="application/json" title="{{ metadata.title }}">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<header id="navigation" class="site-header">
|
||||
<a class="site-logo" href="{{ '/' | url }}">{{ metadata.title }}</a>
|
||||
|
||||
<a class="navigation-toggle show" href="#navigation">Menü</a>
|
||||
<a class="navigation-toggle hide" href="#">Schließen</a>
|
||||
<header class="site-header">
|
||||
<a class="site-logo" href="{{ '/' | url }}">{{ metadata.title }}</a>
|
||||
|
||||
<details class="site-mobile-navigation">
|
||||
<summary>Menü</summary>
|
||||
<nav class="site-navigation">
|
||||
<ul>
|
||||
{% for entry in collections.topNavigation | eleventyNavigation %}
|
||||
|
|
@ -31,7 +29,19 @@
|
|||
{% endfor %}
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
</details>
|
||||
|
||||
<nav class="site-navigation horizontal">
|
||||
<ul>
|
||||
{% for entry in collections.topNavigation | eleventyNavigation %}
|
||||
<li{% if entry.url == page.url %} class="active"{% endif %}>
|
||||
<a href="{{ entry.url }}">
|
||||
{{ entry.title }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main id="content" {% if templateClass %} class="{{ templateClass }}"{% endif %}>
|
||||
|
|
|
|||
7
second.md
Normal file
7
second.md
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
layout: layouts/page.njk
|
||||
eleventyNavigation:
|
||||
key: Zweite Seite
|
||||
order: 2
|
||||
---
|
||||
## Das ist die zweite Seite
|
||||
|
|
@ -6,50 +6,9 @@
|
|||
// Site-wide components
|
||||
// --------------------
|
||||
|
||||
// CSS-Only navigation toggle. This works by hiding the navigation on small
|
||||
// screens and only revealing it when the link has been clicked (and the URL
|
||||
// hash points to #navigation). On larger screens, it is always shown and the
|
||||
// toggle is hidden. This should probably be switched to a <details> element.
|
||||
#navigation {
|
||||
.site-navigation {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:target {
|
||||
.navigation-toggle {
|
||||
&.show {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.hide {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.site-navigation {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media (screen and min-width: layout.$breakpoint) {
|
||||
.site-navigation {
|
||||
flex: 0;
|
||||
display: block;
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
margin-bottom: 0;
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-toggle {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@mixin header-item {
|
||||
padding: 0 layout.$normal-gap;
|
||||
line-height: 3rem;
|
||||
}
|
||||
|
||||
// The site logo text. More specific styles for this element are also present
|
||||
|
|
@ -63,9 +22,19 @@
|
|||
// the footer. The former also has some specific styles (see .site-header
|
||||
// below).
|
||||
.site-navigation {
|
||||
flex-basis: 100%;
|
||||
&.horizontal {
|
||||
> ul {
|
||||
display: flex;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
a {
|
||||
display: inline-block;
|
||||
@include header-item;
|
||||
}
|
||||
}
|
||||
|
||||
> ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
|
@ -73,6 +42,7 @@
|
|||
|
||||
a {
|
||||
display: block;
|
||||
padding: layout.$small-gap;
|
||||
font-size: typography.$large-size;
|
||||
font-weight: typography.$emphasized-weight;
|
||||
text-align: center;
|
||||
|
|
@ -81,40 +51,73 @@
|
|||
}
|
||||
}
|
||||
|
||||
.site-mobile-navigation {
|
||||
cursor: pointer;
|
||||
|
||||
> summary {
|
||||
display: block;
|
||||
@include header-item;
|
||||
}
|
||||
|
||||
&[open] {
|
||||
flex-basis: 100%;
|
||||
|
||||
> summary {
|
||||
// The positioning requires that the header component has relative
|
||||
// positioning.
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
color: colors.$blue-800;
|
||||
}
|
||||
}
|
||||
|
||||
// This is the next site navigation block (the one that's visible on desktop),
|
||||
// while...
|
||||
+ .site-navigation {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// ... this here is the one inside the mobile-only <details> block.
|
||||
> .site-navigation {
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
width: calc(100% - #{2 * layout.$normal-gap});
|
||||
height: 1px;
|
||||
background-color: colors.$gray-300;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: layout.$breakpoint) {
|
||||
display: none;
|
||||
|
||||
+ .site-navigation {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.site-header {
|
||||
display: flex;
|
||||
// This container needs to wrap because when the navigation is open on small
|
||||
// screens, we want it to overflow into its own line.
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
// Relative positioning is required here so that we can fake the menu button's
|
||||
// location on mobile.
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
background-color: colors.$main-background;
|
||||
@include colors.block-shadow;
|
||||
|
||||
a {
|
||||
padding: 0 layout.$normal-gap;
|
||||
line-height: 3rem;
|
||||
}
|
||||
|
||||
.site-logo {
|
||||
> .site-logo {
|
||||
flex-grow: 1;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: typography.$large-size;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.site-navigation ul {
|
||||
margin: 0 0 layout.$small-gap 0;
|
||||
}
|
||||
|
||||
.navigation-toggle {
|
||||
display: block;
|
||||
padding: 0 layout.$normal-gap;
|
||||
|
||||
&.hide {
|
||||
display: none;
|
||||
}
|
||||
@include header-item;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue