Added jqui-menu component

Author: Gaurav0

app/router.js

@@ -10,6 +10,7 @@ Router.map(function() {
     this.route('autocomplete');
     this.route('button');
     this.route('datepicker');
+    this.route('menu');
     this.route('progressBar');
     this.route('slider');
     this.route('spinner');

app/styles/app.css

@@ -53,6 +53,11 @@ nav li:first-of-type {
     width: 50%;
 }
 
+.ui-menu {
+    min-width: 240px;
+    width: 50%;
+}
+
 .ui-tabs {
     width: 100%;
     min-width: 640px;

app/templates/application.hbs

@@ -5,6 +5,7 @@
         {{#link-to "autocomplete" tagName="li" href=false class="ui-state-default ui-corner-top pointer" activeClass="ui-tabs-active ui-state-active"}}<a class="ui-tabs-anchor" {{bind-attr href="view.href"}}>Autocomplete</a>{{/link-to}}
         {{#link-to "button" tagName="li" href=false class="ui-state-default ui-corner-top pointer" activeClass="ui-tabs-active ui-state-active"}}<a class="ui-tabs-anchor" {{bind-attr href="view.href"}}>Button</a>{{/link-to}}
         {{#link-to "datepicker" tagName="li" href=false class="ui-state-default ui-corner-top pointer" activeClass="ui-tabs-active ui-state-active"}}<a class="ui-tabs-anchor" {{bind-attr href="view.href"}}>Datepicker</a>{{/link-to}}
+        {{#link-to "menu" tagName="li" href=false class="ui-state-default ui-corner-top pointer" activeClass="ui-tabs-active ui-state-active"}}<a class="ui-tabs-anchor" {{bind-attr href="view.href"}}>Menu</a>{{/link-to}}
         {{#link-to "progressBar" tagName="li" href=false class="ui-state-default ui-corner-top pointer" activeClass="ui-tabs-active ui-state-active"}}<a class="ui-tabs-anchor" {{bind-attr href="view.href"}}>Progress Bar</a>{{/link-to}}
         {{#link-to "slider" tagName="li" href=false class="ui-state-default ui-corner-top pointer" activeClass="ui-tabs-active ui-state-active"}}<a class="ui-tabs-anchor" {{bind-attr href="view.href"}}>Slider</a>{{/link-to}}
         {{#link-to "spinner" tagName="li" href=false class="ui-state-default ui-corner-top pointer" activeClass="ui-tabs-active ui-state-active"}}<a class="ui-tabs-anchor" {{bind-attr href="view.href"}}>Spinner</a>{{/link-to}}
@@ -14,4 +15,4 @@
     <div class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-">
         {{outlet}}
     </div>
-</div>
+</div>

app/templates/menu.hbs

@@ -0,0 +1,33 @@
+<h2>Menu</h2>
+
+{{#jqui-menu}}
+        <li>Item 1</li>
+        <li>Item 2</li>
+        <li>Item 3
+            <ul>
+                <li>Item 3-1</li>
+                <li>Item 3-2</li>
+            </ul>
+        </li>
+        <li>Item 4</li>
+        <li>-</li> {{!-- divider --}}
+        <li>Item 5</li>
+{{/jqui-menu}}
+
+<p>To use the menu widget as above, just add the following template to your application:</p>
+
+<p><code><pre>
+\{{#jqui-menu}}
+    &lt;li&gt;Item 1&lt;/li&gt;
+    &lt;li&gt;Item 2&lt;/li&gt;
+    &lt;li&gt;Item 3
+        &lt;ul&gt;
+            &lt;li&gt;Item 3-1&lt;/li&gt;
+            &lt;li&gt;Item 3-2&lt;/li&gt;
+        &lt;/ul&gt;
+    &lt;/li&gt;
+    &lt;li&gt;Item 4&lt;/li&gt;
+    &lt;li&gt;-&lt;/li&gt; \{{!-- divider --}}
+    &lt;li&gt;Item 5&lt;/li&gt;
+\{{/jqui-menu}}
+</pre></code></p>