aboutsummaryrefslogtreecommitdiff
path: root/layouts/partials
diff options
context:
space:
mode:
Diffstat (limited to 'layouts/partials')
-rw-r--r--layouts/partials/site-navigation.html72
1 files changed, 72 insertions, 0 deletions
diff --git a/layouts/partials/site-navigation.html b/layouts/partials/site-navigation.html
new file mode 100644
index 0000000..ba94825
--- /dev/null
+++ b/layouts/partials/site-navigation.html
@@ -0,0 +1,72 @@
+<nav class="pv3 ph3 ph4-ns" role="navigation">
+ <div class="flex-l justify-between items-center center">
+ <a href="{{ .Site.BaseURL }}" class="f3 fw2 hover-white no-underline white-90 dib">
+ {{ .Site.Title }}
+ </a>
+ <div class="flex-l items-center">
+
+ {{ $currentPage := . }}
+ <!-- start .main-menu -->
+ <ul class="pl0 mr3">
+ {{ range .Site.Menus.main }}
+ {{ if .HasChildren }}
+ <li class="list f5 f4-ns fw4 dib pr3 {{ if $currentPage.HasMenuCurrent "main" . }}active{{ end }}">
+ <a class="hover-white no-underline white-90" href="{{ .URL }}" title="{{ .Name }} page">
+ {{ .Pre }}
+ <span>{{ .Name }}</span>
+ </a>
+ <span id="about_chevron" class="fa fa-chevron-down"></span>
+ <ul class="sub-menu dn pa0 w-33 center mt0">
+ {{ range .Children }}
+ <li class="db {{ if $currentPage.IsMenuCurrent "main" . }}active{{ end }}">
+ <a href="{{ .URL }}">{{ .Name }}</a>
+ </li>
+ {{ end }}
+ </ul>
+ </li>
+ {{ else }}
+ <li class="list f5 f4-ns fw4 dib pr3">
+ <a class="hover-white no-underline white-90" href="{{ .URL }}" title="{{ .Name }} page">
+ {{ .Name }}
+ </a>
+ </li>
+
+ {{ end }}
+ {{ end }}
+ </ul><!-- end /.main-menu -->
+
+ {{ partial "social-follow.html" . }}
+ </div>
+ </div>
+</nav>
+<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
+<script type="text/javascript" src="/javascript/dropdown.js"></script>
+<style type="text/css">
+ span.fa {
+ color: #FFF;
+ }
+ @media (max-width: 991px) {
+ ul.sub-menu {
+ display: block;
+ }
+ }
+ @media (min-width: 992px) {
+ ul.sub-menu:not(.dn){
+ position: absolute;
+ top: auto;
+ width: 100%;
+ max-width: 320px;
+ background: rgba(0,0,0,0.333);
+ }
+ }
+ ul.sub-menu li a {
+ color: #FFF;
+ display: block;
+ text-decoration: none;
+ padding: 8px;
+ }
+ ul.sub-menu li a:hover,
+ ul.sub-menu li a:focus {
+ background: rgba(0,0,0,0.7);
+ }
+</style>