Active NavElement

example/assets/css/main.css

@@ -36,4 +36,21 @@ a {
 
 footer {
     padding: 20px;
+}
+
+.nav ul {
+    list-style-type: square;
+}
+
+.nav li>a {
+   color: #555;
+   text-decoration: none;
+}
+
+.nav li>a:hover, .nav li.active>a {
+    color: #000;
+}
+
+.nav li.active>a {
+    font-weight: bold;
 }

example/content/de/main/01_home/README.md

@@ -8,4 +8,4 @@ Meta:
 
 Lorem ipsum...
 
-Hier steht dann ne Menge Text. Der kann auch ***formatiert*** _werden_.
+Hier steht dann ne Menge Text. Der kann auch ***formatiert*** _werden_.

example/templates/partials/footer.html

@@ -1,8 +1,8 @@
-        <footer>
+        <footer class="nav">
             <div><b>service Level 1</b></div>
             <ul>
                 {{#each NavMap.de.SubMap.service.SubSlice }}
-                <li><a href="{{ GoTo }}">{{ Navname }}</a></li>
+                <li {{#if Active }}class="active"{{/if }}><a href="{{ GoTo }}">{{ Navname }}</a></li>
                 {{/each}}
             </ul>
         </footer>

example/templates/partials/header.html

@@ -1,14 +1,14 @@
         <header>
             <div id="logoDiv"><img src="../assets/img/logo.png"></div>
-            <div id="mainNavDiv">
+            <div id="mainNavDiv" class="nav">
                 <div><b>main Level 1</b></div>
                 <ul>
                     {{#each NavMap.de.SubMap.main.SubSlice }}
-                    <li><a href="{{ GoTo }}">{{ Navname }}</a>
+                    <li {{#if Active }}class="active"{{/if }}><a href="{{ GoTo }}">{{ Navname }}</a>
                         {{#if SubSlice }}
                         <ul>
                             {{#each SubSlice }}
-                            <li><a href="{{ GoTo }}">{{ Navname }}</a></li>
+                            <li {{#if Active }}class="active"{{/if }}><a href="{{ GoTo }}">{{ Navname }}</a></li>
                             {{/each }}
                         </ul
                         {{/if }}