Merge pull request #1050 from Patternslib/rework-navigation

Stabilize and extend pat-navigation incl. URL‌ based markings

Author: thet

src/pat/navigation/documentation.md

@@ -1,11 +1,14 @@
 ## Description
 
-Marks navigation paths with "in-path" and "current" classes and allows of auto-injecting content when menu item was marked with the "current" class.
+Marks navigation paths with "in-path" and "current" classes.
+
 
 ## Documentation
 
 The "in-path" and "current" classes and the "item-wrapper" are configurable.
-Use the "navigation-load-current" class on the navigation wrapper element to content from menu items marked with the "current" class.
+
+You can automatically load the navigation item marked with the `current` class by adding the class `navigation-load-current` along with `pat-navigation` on the pattern element.
+This would invoke a `click` event on the current navigation item and that can be used to load content via `pat-inject`.
 
 For examples see index.html.
 

src/pat/navigation/index.html

@@ -93,16 +93,33 @@ <h3>Example 2</h3>
             <div id="content-tab-2">Example 2 Content will appear here</div>
         </section>
 
-        <section class="injection_content">
-            <div id="inject-tab-1">Content for tab 1</div>
-
-            <div id="inject-tab-2">Content for tab 2</div>
-
-            <div id="inject-tab-1-1">Content for tab 1.1</div>
-
-            <div id="inject-tab-1-2">Content for tab 1.2</div>
+        <section>
+            <header>
+                <h3>Example 3 - nested nav, but no injection</h3>
+            </header>
+            <ul class="pat-navigation">
+                <li>
+                    <a href="#10">Tab 1</a>
+                    <ul>
+                        <li>
+                            <a href="#11">Link 1.1</a>
+                        </li>
+                        <li>
+                            <a href="#12">Link 1.2</a>
+                        </li>
+                    </ul>
+                </li>
+                <li>
+                    <a href="#2">Tab 2</a>
+                </li>
+            </ul>
         </section>
 
+        <template id="inject-tab-1">Content for tab 1</template>
+        <template id="inject-tab-2">Content for tab 2</template>
+        <template id="inject-tab-1-1">Content for tab 1.1</template>
+        <template id="inject-tab-1-2">Content for tab 1.2</template>
+
         <style>
             /* example 1 styles */
             a.current {
@@ -140,9 +157,6 @@ <h3>Example 2</h3>
                 display: inline-block;
                 vertical-align: top;
             }
-            .injection_content {
-                display: none;
-            }
         </style>
     </body>
 </html>