elements-ui-patterns.html in survivalkit-1.0.beta.4

- old
+ new

@@ -1,5 +1,6 @@
+
 <!DOCTYPE html>
 <!--[if lt IE 7]> <html lang="en" class="no-js ie6"> <![endif]-->
 <!--[if IE 7]>    <html lang="en" class="no-js ie7"> <![endif]-->
 <!--[if IE 8]>    <html lang="en" class="no-js ie8"> <![endif]-->
 <!--[if gt IE 8]><!-->
@@ -58,11 +59,11 @@
           <h1>
             <a href='/survivalkit/'>The Coding Designer's Survival Kit</a>
           </h1>
           <h2>UI Patterns</h2>
         </hgroup>
-        
+
       </header>
       <nav class='kit-nav'>
         <ul>
           <li>
             <a href='/survivalkit/elements-common.html'>Common Markup</a>
@@ -74,21 +75,99 @@
             <a href='/survivalkit/elements-typography.html'>Typography</a>
           </li>
           <li>
             <a href='/survivalkit/elements-ui-patterns-drupal.html'>Drupal UI Patterns</a>
           </li>
-          <!-- %li -->
-          <!-- %a{:href => "/survivalkit/elements-ui-patterns.html"} UI Patterns -->
           <li>
+            <a href='/survivalkit/elements-ui-patterns.html'>UI Patterns</a>
+          </li>
+          <li>
             <a href='/survivalkit/styletile/styletile.html'>Style Tile</a>
           </li>
         </ul>
       </nav>
       <nav class='section-nav'></nav>
       <div id='main' role='main'>
         <section class='element-group' id='simple-patterns'>
   <h1 class='section-title'>Common Patterns</h1>
+  <div class='element' id='block'>
+    <h2 class='element-title'>Nested Menu</h2>
+    <div class='markup'>
+      <ul class='nested-menu'>
+        <li>
+          <a href='/'>Lorem</a>
+          <ul>
+            <li>
+              <a href='/'>consectetuer</a>
+            </li>
+            <li>
+              <a href='/'>adipiscing</a>
+            </li>
+            <li>
+              <a href='/'>elit.</a>
+            </li>
+          </ul>
+        </li>
+        <li>
+          <a href='/'>ipsum</a>
+          <ul>
+            <li>
+              <a href='/'>consectetuer</a>
+            </li>
+            <li>
+              <a href='/'>adipiscing</a>
+            </li>
+            <li>
+              <a href='/'>elit.</a>
+            </li>
+          </ul>
+        </li>
+        <li>
+          <a href='/'>dolor</a>
+          <ul>
+            <li>
+              <a href='/'>consectetuer</a>
+            </li>
+            <li>
+              <a href='/'>adipiscing</a>
+            </li>
+            <li>
+              <a href='/'>elit.</a>
+            </li>
+          </ul>
+        </li>
+        <li>
+          <a href='/'>sit</a>
+          <ul>
+            <li>
+              <a href='/'>consectetuer</a>
+            </li>
+            <li>
+              <a href='/'>adipiscing</a>
+            </li>
+            <li>
+              <a href='/'>elit.</a>
+            </li>
+          </ul>
+        </li>
+        <li>
+          <a href='/'>amet</a>
+          <ul>
+            <li>
+              <a href='/'>consectetuer</a>
+            </li>
+            <li>
+              <a href='/'>adipiscing</a>
+            </li>
+            <li>
+              <a href='/'>elit.</a>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </div>
+  </div>
   <div class='element' id='drupal-messages'>
     <h2 class='element-title'>Messages</h2>
     <div class='markup'>
       <div class='messages status'>
         <h2 class='element-invisible' style='display: none;'>Status message</h2>
@@ -165,10 +244,10 @@
     <![endif]-->
     <script type='text/javascript'>
       //<![CDATA[
         // iOS scale bug fix
         MBP.scaleFix();
-        
+
         // Respond.js
         yepnope({
           test : Modernizr.mq('(only all)'),
           nope : ['/js/libs/respond.min.js']
         });