[css-regions] add menu example

Author: astearns

css-regions/Overview.html

@@ -56,7 +56,7 @@
 </p>
   <h1 class="p-name no-ref" id=title>CSS Regions Module Level 1</h1>
   <h2 class="no-num no-toc no-ref heading settled heading" id=subtitle><span class=content>Editor’s Draft,
-    <span class=dt-updated><span class=value-title title=20140311>11 March 2014</span></span></span></h2>
+    <span class=dt-updated><span class=value-title title=20140325>25 March 2014</span></span></span></h2>
   <div data-fill-with=spec-metadata><dl><dt>This version:<dd><a class=u-url href=http://dev.w3.org/csswg/css-regions/>http://dev.w3.org/csswg/css-regions/</a><dt>Latest version:<dd><a href=http://www.w3.org/TR/css-regions/>http://www.w3.org/TR/css-regions/</a><dt>Editor’s Draft:<dd><a href=http://dev.w3.org/csswg/css-regions/>http://dev.w3.org/csswg/css-regions/</a>
     <dt>Feedback:</dt>
         <dd><a href="mailto:www-style@w3.org?subject=%5Bcss-regions%5D%20feedback">www-style@w3.org</a>
@@ -225,10 +225,9 @@ <h2 class="heading settled heading" data-level=1 id=introduction><span class=sec
 	and flowing content through areas in a paginated view.
 
 	<div class=example>
-		For instance, 
-		linked display boxes could be created 
+		Linked display boxes can be created 
 		to display article content above and below 
-		some additional content on a page. 
+		other content on a page. 
 		Given markup like this:
 
 		<pre><code class=html>
@@ -295,8 +294,43 @@ <h2 class="heading settled heading" data-level=1 id=introduction><span class=sec
 	</div>
 
 	<div class=example>
-		An example of custom overflow handling creates an additional box inside a menu for <nav> items that would overflow a narrow navigation bar.
-	</nav></div>
+		Custom overflow handling can be accomplished by linking a separate overflow box. In this example, the overflow box is nestled inside a menu in the markup, and only displays if the menu is toggled.
+
+		<pre><code class=html>
+  &lt;nav&gt; ...some links... &lt;/nav&gt;
+
+  &lt;div class="menu"&gt;
+    &lt;nav&gt;&lt;/nav&gt;
+    ...some more links...
+  &lt;/div&gt;
+</code></pre>
+<p>		If the links in the main nav element are placed in a named flow, that flow can be directed through both the main nav element and the overflow nav box in the menu:
+
+		<pre><code class=css>
+  nav a {
+    flow-into: nav-link-flow;
+  }
+  nav {
+    flow-from: nav-link-flow;
+  }
+</code></pre>
+<p>		Then the main nav element and the menu can be arranged with constraints such that when the screen is too narrow for the main nav element to display all of the navigation links, the overflow moves to the menu.
+
+		</p><figure>
+			<img alt="Wide nav bar showing all of the links" src=images/menu-wide.png>
+			<figcaption>
+				Wide rendering with menu shown
+			</figcaption>
+		</figure>
+
+		<figure>
+			<img alt="Narrow nav bar with some of the links in the menu" src=images/menu-narrow.png>
+			<figcaption>
+				Narrow rendering with menu shown
+			</figcaption>
+		</figure>
+
+	</div>
 
 	<div class=example>
 		An example of aggregating content can fill a named flow with content from multiple sources.
@@ -2355,7 +2389,7 @@ <h2 class="no-num no-ref heading settled heading" id=references><span class=cont
 
 <h3 class="no-num no-ref heading settled heading" id=normative><span class=content>
 Normative References</span><a class=self-link href=#normative></a></h3>
-<div data-fill-with=normative-references><dl><dt id=css21 title=CSS21><a class=self-link href=#css21></a>[CSS21]<dd>Bert Bos; et al. <a href=http://www.w3.org/TR/2011/REC-CSS2-20110607>Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>. 7 June 2011. W3C Recommendation. URL: <a href=http://www.w3.org/TR/2011/REC-CSS2-20110607>http://www.w3.org/TR/2011/REC-CSS2-20110607</a><dt id=css3-break title=CSS3-BREAK><a class=self-link href=#css3-break></a>[CSS3-BREAK]<dd>Rossen Atanassov; Elika J. Etemad. <a href=http://www.w3.org/TR/2012/WD-css3-break-20120823/>CSS Fragmentation Module Level 3</a>. 23 August 2012. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2012/WD-css3-break-20120823/>http://www.w3.org/TR/2012/WD-css3-break-20120823/</a><dt id=css3-writing-modes title=CSS3-WRITING-MODES><a class=self-link href=#css3-writing-modes></a>[CSS3-WRITING-MODES]<dd>Elika J. Etemad; Koji Ishii. <a href=http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/>CSS Writing Modes Module Level 3</a>. 15 November 2012. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/>http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/</a><dt id=css3col title=CSS3COL><a class=self-link href=#css3col></a>[CSS3COL]<dd>Håkon Wium Lie. <a href=http://www.w3.org/TR/2011/CR-css3-multicol-20110412>CSS Multi-column Layout Module</a>. 12 April 2011. W3C Candidate Recommendation. (Work in progress.) URL: <a href=http://www.w3.org/TR/2011/CR-css3-multicol-20110412>http://www.w3.org/TR/2011/CR-css3-multicol-20110412</a><dt id=cssom title=CSSOM><a class=self-link href=#cssom></a>[CSSOM]<dd>Anne van Kesteren. <a href=http://www.w3.org/TR/2011/WD-cssom-20110712/>CSSOM</a>. 12 July 2011. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2011/WD-cssom-20110712/>http://www.w3.org/TR/2011/WD-cssom-20110712/</a><dt id=dom title=DOM><a class=self-link href=#dom></a>[DOM]<dd>Anne van Kesteren; et al. <a href=http://www.w3.org/TR/2012/WD-dom-20121206/>DOM4</a>. 6 December 2012. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2012/WD-dom-20121206/>http://www.w3.org/TR/2012/WD-dom-20121206/</a><dt id=dom-level-3-events title=DOM-LEVEL-3-EVENTS><a class=self-link href=#dom-level-3-events></a>[DOM-LEVEL-3-EVENTS]<dd>Travis Leithead; et al. <a href=http://www.w3.org/TR/2012/WD-DOM-Level-3-Events-20120906/>Document Object Model (DOM) Level 3 Events Specification</a>. 6 September 2012. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2012/WD-DOM-Level-3-Events-20120906/>http://www.w3.org/TR/2012/WD-DOM-Level-3-Events-20120906/</a><dt id=rfc2119 title=RFC2119><a class=self-link href=#rfc2119></a>[RFC2119]<dd>S. Bradner. <a href=http://www.ietf.org/rfc/rfc2119.txt>Key words for use in RFCs to Indicate Requirement Levels</a>. URL: <a href=http://www.ietf.org/rfc/rfc2119.txt>http://www.ietf.org/rfc/rfc2119.txt</a><dt id=select title=SELECT><a class=self-link href=#select></a>[SELECT]<dd>Tantek Çelik; et al. <a href=http://www.w3.org/TR/2011/REC-css3-selectors-20110929/>Selectors Level 3</a>. 29 September 2011. W3C Recommendation. URL: <a href=http://www.w3.org/TR/2011/REC-css3-selectors-20110929/>http://www.w3.org/TR/2011/REC-css3-selectors-20110929/</a></dl></div>
+<div data-fill-with=normative-references><dl><dt id=css21 title=CSS21><a class=self-link href=#css21></a>[CSS21]<dd>Bert Bos; et al. <a href=http://www.w3.org/TR/2011/REC-CSS2-20110607>Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>. 7 June 2011. W3C Recommendation. URL: <a href=http://www.w3.org/TR/2011/REC-CSS2-20110607>http://www.w3.org/TR/2011/REC-CSS2-20110607</a><dt id=css3-break title=CSS3-BREAK><a class=self-link href=#css3-break></a>[CSS3-BREAK]<dd>Rossen Atanassov; Elika J. Etemad. <a href=http://www.w3.org/TR/2012/WD-css3-break-20120823/>CSS Fragmentation Module Level 3</a>. 23 August 2012. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2012/WD-css3-break-20120823/>http://www.w3.org/TR/2012/WD-css3-break-20120823/</a><dt id=css3-writing-modes title=CSS3-WRITING-MODES><a class=self-link href=#css3-writing-modes></a>[CSS3-WRITING-MODES]<dd>Elika J. Etemad; Koji Ishii. <a href=http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/>CSS Writing Modes Module Level 3</a>. 15 November 2012. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/>http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/</a><dt id=css3col title=CSS3COL><a class=self-link href=#css3col></a>[CSS3COL]<dd>Håkon Wium Lie. <a href=http://www.w3.org/TR/2011/CR-css3-multicol-20110412>CSS Multi-column Layout Module</a>. 12 April 2011. W3C Candidate Recommendation. (Work in progress.) URL: <a href=http://www.w3.org/TR/2011/CR-css3-multicol-20110412>http://www.w3.org/TR/2011/CR-css3-multicol-20110412</a><dt id=cssom title=CSSOM><a class=self-link href=#cssom></a>[CSSOM]<dd>Anne van Kesteren. <a href=http://www.w3.org/TR/2011/WD-cssom-20110712/>CSSOM</a>. 12 July 2011. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2011/WD-cssom-20110712/>http://www.w3.org/TR/2011/WD-cssom-20110712/</a><dt id=dom title=DOM><a class=self-link href=#dom></a>[DOM]<dd>Anne van Kesteren; Aryeh Gregor; Ms2ger. <a href=http://dom.spec.whatwg.org/>DOM Living Standard</a>. WHATWG Living Standard. (Work in progress.) URL: <a href=http://dom.spec.whatwg.org/>http://dom.spec.whatwg.org/</a><dt id=dom-level-3-events title=DOM-LEVEL-3-EVENTS><a class=self-link href=#dom-level-3-events></a>[DOM-LEVEL-3-EVENTS]<dd>Travis Leithead; et al. <a href=http://www.w3.org/TR/2012/WD-DOM-Level-3-Events-20120906/>Document Object Model (DOM) Level 3 Events Specification</a>. 6 September 2012. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2012/WD-DOM-Level-3-Events-20120906/>http://www.w3.org/TR/2012/WD-DOM-Level-3-Events-20120906/</a><dt id=rfc2119 title=RFC2119><a class=self-link href=#rfc2119></a>[RFC2119]<dd>S. Bradner. <a href=http://www.ietf.org/rfc/rfc2119.txt>Key words for use in RFCs to Indicate Requirement Levels</a>. URL: <a href=http://www.ietf.org/rfc/rfc2119.txt>http://www.ietf.org/rfc/rfc2119.txt</a><dt id=select title=SELECT><a class=self-link href=#select></a>[SELECT]<dd>Tantek Çelik; et al. <a href=http://www.w3.org/TR/2011/REC-css3-selectors-20110929/>Selectors Level 3</a>. 29 September 2011. W3C Recommendation. URL: <a href=http://www.w3.org/TR/2011/REC-css3-selectors-20110929/>http://www.w3.org/TR/2011/REC-css3-selectors-20110929/</a></dl></div>
 
 <h3 class="no-num no-ref heading settled heading" id=informative><span class=content>
 Informative References</span><a class=self-link href=#informative></a></h3>

css-regions/Overview.src.html

@@ -58,10 +58,9 @@ <h2 id="introduction">
 	and flowing content through areas in a paginated view.
 
 	<div class="example">
-		For instance, 
-		linked display boxes could be created 
+		Linked display boxes can be created 
 		to display article content above and below 
-		some additional content on a page. 
+		other content on a page. 
 		Given markup like this:
 
 		<pre><code class="html">
@@ -133,7 +132,46 @@ <h2 id="introduction">
 	</div>
 
 	<div class="example">
-		An example of custom overflow handling creates an additional box inside a menu for <nav> items that would overflow a narrow navigation bar.
+		Custom overflow handling can be accomplished by linking a separate overflow box. In this example, the overflow box is nestled inside a menu in the markup, and only displays if the menu is toggled.
+
+		<pre><code class="html">
+			&lt;nav&gt; ...some links... &lt;/nav&gt;
+
+			&lt;div class="menu"&gt;
+				&lt;nav&gt;&lt;/nav&gt;
+				...some more links...
+			&lt;/div&gt;
+		</code></pre>
+
+		If the links in the main nav element are placed in a named flow, that flow can be directed through both the main nav element and the overflow nav box in the menu:
+
+		<pre><code class="css">
+			nav a {
+				flow-into: nav-link-flow;
+			}
+			nav {
+				flow-from: nav-link-flow;
+			}
+		</code></pre>
+
+		Then the main nav element and the menu can be arranged with constraints such that when the screen is too narrow for the main nav element to display all of the navigation links, the overflow moves to the menu.
+
+		<figure>
+			<img alt="Wide nav bar showing all of the links"
+				src="images/menu-wide.png"/>
+			<figcaption>
+				Wide rendering with menu shown
+			</figcaption>
+		</figure>
+
+		<figure>
+			<img alt="Narrow nav bar with some of the links in the menu"
+				src="images/menu-narrow.png"/>
+			<figcaption>
+				Narrow rendering with menu shown
+			</figcaption>
+		</figure>
+
 	</div>
 
 	<div class="example">

css-regions/examples/responsive-menu.html

@@ -0,0 +1,157 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Responsive Menu | CSS Regions</title>
+  
+  <style>
+    
+    body {
+      -width: 550px;
+      -width: 350px;
+    }
+    
+    body, html{
+      margin: 0;
+      padding: 0;
+    }
+
+    #nav-global a:hover{
+      text-decoration: underline;
+    }
+
+    header{
+      box-sizing: border-box;
+      display: -webkit-flex;
+      height: 3rem;
+      border-bottom: 1px solid #E3E3DB;
+      background: #F4F4EE;
+    }
+
+
+    #nav-global{
+      height: 3rem;
+      -webkit-flex: 1 1 auto;
+      padding-left: 1rem;
+    }
+
+    /* #nav-global a{ */
+    a {
+      text-decoration: none;
+      margin-right: 1.3rem;
+      padding: 0.5rem 0 0;
+      float: left;
+      color: #333;
+      font: 1.3rem/1.9rem normal georgia,serif;
+    }
+
+    #menu {
+      display: -webkit-flex;
+      -webkit-justify-content: flex-end;
+      -webkit-align-items: center;
+      position: relative;
+      -webkit-flex: 1 0 auto;
+    }
+
+    #menu aside{
+      visibility: hidden; /* toggled by JavaScript */
+      background: #F4F4EE;
+      max-width: 5rem;
+      padding: 0.5rem 1rem 1rem;
+      position: absolute;
+      top: calc(3rem - 1px);
+      border: none;
+      right: 0;
+    }
+
+    #menu aside.visible{
+      visibility: visible;
+    }
+
+    #menu .end{
+      display: block;
+      margin: 1rem 0 0;
+      padding: 1rem 0 0;
+      border-top: 1px solid #E24D4D;
+      color: rgba(252,252,252,0.7);
+      font-family: helvetica, arial, serif;
+    }
+
+    #menu .toggle{
+      text-align: center;
+      border: 2px solid rgb(75, 75, 75);
+      border-radius: 8px;
+      display: block;
+      text-decoration: none;
+      font: .9rem/1.1rem sans-serif;
+      width: 3.4rem;
+      height: 1rem;
+      padding: 0;
+    }
+
+    /* collect all nav links */
+    #nav-global a{
+      -webkit-flow-into: menu;
+    }
+
+    /* reflow nav links into original container and overflow into another element */
+    #nav-global,
+    #nav-compact{
+      -webkit-flow-from: menu;
+    }
+
+  </style>
+</head>
+<body>
+  
+<header>
+  <nav id="nav-global">
+    <a href="#">This</a>
+    <a href="#">That</a>
+    <a href="#">Other</a>
+    <a href="#">Extra</a>
+    <a href="#">More</a>
+    <a href="#">Misc.</a>
+  </nav>
+
+  <div id="menu">
+    <a href="#" class="toggle">MENU</a>
+    
+    <aside class="visible">
+      <nav id="nav-compact">
+        <!-- #global nav items will flow here -->
+      </nav>
+      <div class="end">
+        <a href="#">Contact</a>
+        <a href="#">About</a>
+        <a href="#">Help</a>
+      </div>
+    </aside>
+    
+  </div>
+</header>  
+  
+  <script>
+  
+    var toggle = document.querySelector('.toggle'),
+        aside = document.querySelector('aside');
+        
+    toggle.addEventListener('click', function(){
+      aside.classList.toggle('visible')
+    })
+
+    var property = "flow-into";
+
+    // check if any variant exists, prefixed or not
+    var isCapable = ['-webkit-','-ms-','-moz-',''].some(function(prefix){
+      return prefix + property in document.body.style 
+    })
+
+    property = isCapable ? property : 'no-' + property;
+     
+    document.body.classList.add(property)
+  
+  </script>
+  
+</body>
+</html>