yacloud/gohugo-theme-ananke
1
0
Fork 0
mirror of https://github.com/theNewDynamic/gohugo-theme-ananke.git synced 2025-06-08 17:22:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add style for "hamburger" (3 bar) menu in mobile view

Browse Source 
* add some IDs to elements of the main navigation
* add styles for mobile view (up to 768px wide) for collapsing the menu
  items into a "hamburger" menu

Closes: #166
This commit is contained in:
Lars Kruse 2020-06-12 22:05:26 +02:00
parent 9171519154
commit 0321a356e9
3 changed files with 104 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
exampleSite/config.toml
View File

@ -35,3 +35,5 @@ enableRobotsTXT = true
background_color_class = "bg-black"
featured_image = "/images/gohugo-default-sample-hero-image.jpg"
recent_posts_number = 2
# TODO: integrate into build procedure
custom_css = ["dist/css/hamburger-menu.css"]

12
layouts/partials/site-navigation.html
View File

@ -1,16 +1,18 @@
<nav class="pv3 ph3 ph4-ns" role="navigation">
<div class="flex-l justify-between items-center center">
<a href="{{ .Site.Home.RelPermalink }}" class="f3 fw2 hover-white no-underline white-90 dib">
<a href="{{ .Site.Home.RelPermalink }}" class="site-logo f3 fw2 hover-white no-underline white-90 dib">
{{ with .Site.Params.site_logo }}
<img src="{{ . }}" class="w100 mw5-ns" alt="{{ $.Site.Title }}" />
{{ else }}
{{ .Site.Title }}
{{ end }}
</a>
<div class="flex-l items-center">
<div class="main-menu-container flex-l items-center">
{{ partial "i18nlist.html" . }}
{{ if .Site.Menus.main }}
<ul class="pl0 mr3">
<input class="main-menu-button" type="checkbox" id="main-menu-button" />
<label class="main-menu-label" for="main-menu-button"><span class="main-menu-icon"></span></label>
<ul class="main-menu-list" class="pl0 mr3">
{{ range .Site.Menus.main }}
<li class="list f5 f4-ns fw4 dib pr3">
<a class="hover-white no-underline white-90" href="{{ .URL }}" title="{{ .Name }} page">
@ -20,7 +22,9 @@
{{ end }}
</ul>
{{ end }}
{{ partialCached "social-follow.html" . }}
<div class="top-social-container">
{{ partialCached "social-follow.html" . }}
</div>
</div>
</div>
</nav>

94
static/dist/css/hamburger-menu.css vendored Normal file
View File

@ -0,0 +1,94 @@
.main-menu-button {
display: none;
}
@media (max-width: 768px) {
/* hide social media links in mobile view */
.top-social-container {
display: none
}
/* menu */
.main-menu-list {
clear: both;
max-height: 0;
transition: max-height 0.2s ease-out;
}
/* menu icon: middle bar */
.main-menu-icon,
.main-menu-icon:before,
.main-menu-icon:after {
background: lightblue;
display: block;
width: 30px;
content: '';
transition-duration: 0.2s;
transition-timing-function: ease-out;
}
.main-menu-icon {
height: 3px;
position: relative;
transition-property: background;
}
/* menu icon: add one bar below and one above -> hamburger style */
.main-menu-icon:before,
.main-menu-icon:after {
height: 100%;
position: absolute;
transition-property: all;
}
.main-menu-icon:before { top: 10px; }
.main-menu-icon:after { top: -10px; }
/* limit the length of the menu item list */
.main-menu-button:checked ~ .main-menu-list {
max-height: 100%;
}
/* parallel -> crossing transition of hamburger menu icon */
.main-menu-button:checked ~ .main-menu-label .main-menu-icon { background: transparent; }
.main-menu-button:checked ~ .main-menu-label .main-menu-icon:before { transform: rotate(-45deg); }
.main-menu-button:checked ~ .main-menu-label .main-menu-icon:after { transform: rotate(45deg); }
.main-menu-button:checked ~ .main-menu-label:not(.steps) .main-menu-icon:before,
.main-menu-button:checked ~ .main-menu-label:not(.steps) .main-menu-icon:after {
top: 0;
}
.main-menu-label {
display: inline-block;
cursor: pointer;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.main-menu-list {
overflow: hidden;
}
.main-menu-list li {
display: block;
text-align: right;
padding: 0.5rem;
}
/* reduce width of logo and place logo and hamburger menu on one line */
.site-logo { display: inline; }
.site-logo img { max-width: 70%; }
.main-menu-container { display: inline; }
}