data-control=menu (BETA)

example/app/asides/features.html

@@ -46,6 +46,14 @@
                 </a>
             </li>
 
+            <!-- Menu -->
+            <li>
+                <a href="#menu" data-router="section" data-async="app/sections/menu.html">
+                    <div class="tag right">1</div>
+                    <strong>Menu</strong>
+                </a>
+            </li>
+
             <!-- Data-Attributes -->
             <li>
                 <a href="#data" data-router="section" data-async="app/sections/data-attribute.html">

example/app/sections/menu.html

@@ -0,0 +1,28 @@
+<section id="menu" data-transition="slide">
+    <header data-title="data-control=menu">
+        <nav class="left">
+            <a href="#options" data-router="menu" data-icon="map"></a>
+        </nav>
+    </header>
+
+    <nav id="options" data-control="menu">
+        <a href="#home-menu" data-router="article" data-icon="map">Home</a>
+        <a href="#explore-menu" data-router="article" data-icon="eye">Explore</a>
+        <a href="#activity-menu" data-router="article" data-icon="chat">Activity</a>
+        <a href="#profile-menu" data-router="article" data-icon="user">Profile</a>
+        <a href="#back" data-router="section" data-icon="home">Return</a>
+    </nav>
+
+    <article id="home-menu" class="active indented">
+        Home
+    </article>
+    <article id="explore-menu" class="indented">
+        Explore
+    </article>
+    <article id="activity-menu" class="indented">
+        Activity
+    </article>
+    <article id="profile-menu" class="indented">
+        Profile
+    </article>
+</section>

src/boot/Lungo.Boot.Events.js

@@ -17,7 +17,8 @@ Lungo.Boot.Events = (function(lng, undefined) {
         HREF_ASIDE: 'header a[href][data-router=aside]',
         HREF_TARGET: 'a[href][data-router]',
         HREF_TARGET_FROM_ASIDE: 'aside a[href][data-router]',
-        INPUT_CHECKBOX: 'input[type=range].checkbox'
+        INPUT_CHECKBOX: 'input[type=range].checkbox',
+        HREF_TARGET_FROM_MENU: "[data-control=menu] a[href]"
     };
 
     /**
@@ -30,6 +31,8 @@ Lungo.Boot.Events = (function(lng, undefined) {
         lng.dom(SELECTORS.HREF_TARGET_FROM_ASIDE).tap(_hideAsideIfNecesary);
         lng.dom(SELECTORS.HREF_TARGET).tap(_loadTarget);
         lng.dom(SELECTORS.INPUT_CHECKBOX).tap(_changeCheckboxValue);
+        lng.dom(SELECTORS.HREF_TARGET_FROM_MENU).tap(_closeMenu);
+
         lng.View.Aside.suscribeEvents(lng.dom(SELECTORS.HREF_ASIDE));
     };
 
@@ -56,11 +59,19 @@ Lungo.Boot.Events = (function(lng, undefined) {
         el.toggleClass("active").attr('value', current_value);
     };
 
+    var _closeMenu = function(event) {
+        event.preventDefault();
+        var el = lng.dom(this);
+        var parent = el.parent('[data-control=menu]').removeClass(CLASS.SHOW);
+        lng.dom("[data-router=menu] > .icon").attr("class", "icon " + el.data("icon"));
+    };
+
     var _selectTarget = function(link) {
         var target_type = link.data(ATTRIBUTE.ROUTER);
+        var target_id = link.attr(ATTRIBUTE.HREF);
+
         switch(target_type) {
             case ELEMENT.SECTION:
-                var target_id = link.attr(ATTRIBUTE.HREF);
                 _goSection(target_id);
                 break;
 
@@ -71,6 +82,10 @@ Lungo.Boot.Events = (function(lng, undefined) {
             case ELEMENT.ASIDE:
                 _goAside(link);
                 break;
+
+            case ELEMENT.MENU:
+                _goMenu(target_id);
+                break;
         }
     };
 
@@ -109,6 +124,10 @@ Lungo.Boot.Events = (function(lng, undefined) {
         lng.Router.aside(section_id, aside_id);
     };
 
+    var _goMenu = function(id) {
+        lng.dom("[data-control=menu]" + id).toggleClass(CLASS.SHOW);
+    };
+
     return {
         init: init
     };

src/modules/Lungo.Constants.js

@@ -13,6 +13,7 @@ Lungo.Constants = {
         SECTION: 'section',
         ARTICLE: 'article',
         ASIDE: 'aside',
+        MENU: 'menu',
         BODY: 'body',
         DIV: 'div',
         LIST: '<ul></ul>',

src/stylesheets/lungo.layout.menu.styl

@@ -0,0 +1,44 @@
+/**
+ * Stylesheet
+ *
+ * @namespace Lungo.Layout
+ * @class Article
+ *
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
+ */
+
+@import "constants.styl"
+
+[data-control=menu]
+  position: absolute
+  left: 0px
+  top: HEADER_FOOTER_HEIGHT
+  visibility: hidden
+  z-index: 2
+  width: inherit
+  font-size: FONT_SIZE_BIG
+  text-align: center
+
+  transform translateY(-120%)
+  transition-property transform
+  transition-duration TRANSITION_TIME
+  transition-timing-function DEFAULT_TRANSITION
+  backface-visibility hidden
+
+  &.show
+    visibility: visible
+    transform translateY(0%)
+
+  & > a
+    display: block
+    position: relative
+    padding: 14px 10px
+    text-shadow 0 1px 0 #111
+
+    &:active
+      border-color: transparent
+
+    & > .icon
+      position: absolute
+      left: 0.5em
+      font-size: 1.5em

src/stylesheets/lungo.layout.styl

@@ -74,7 +74,7 @@ header, footer
   left: 0
   width: 100%
   display: block
-  z-index: 1
+  z-index: 3
 
 header
   top: 0

src/stylesheets/theme.lungo.styl

@@ -53,7 +53,7 @@ section
   background-color: DARK
   & > header
     background-color: THEME
-    box-shadow 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 THEME_light, inset 0 -1px 0 THEME_dark
+    box-shadow 0 2px 0 rgba(0,0,0,0.15), inset 0 1px 0 THEME_light, inset 0 -1px 0 THEME_dark
     color: #fff
     border-radius 4px 4px 0 0
 
@@ -109,6 +109,23 @@ nav
     &:active
       color: lighten(DARK, 50%)
 
+  &[data-control=menu]
+    COLOR = DARK
+    background: COLOR
+    box-shadow 0 2px 0 rgba(0,0,0,0.15)
+    & > a
+      color: #fff
+      text-shadow 0 1px 0 #111
+      font-weight: 700
+      border-bottom: 1px solid darken(COLOR, 40%)
+      border-top: 1px solid lighten(COLOR, 5%)
+      &:active
+        background: #111
+        border-color: transparent
+      & > .icon
+        color: lighten(COLOR, 25%)
+
+
 /* -------------------------- LISTS -------------------------- */
 .list
   section & li
@@ -242,7 +259,7 @@ article
       background-color: COLOR_cancel
 
 
-/* -------------------------- BUTTONS -------------------------- */
+/* -------------------------- FORMS -------------------------- */
 FORM_shadow_form =  'inset 0 1px 2px rgba(0,0,0,0.1)'
 FORM_shadow_form_active =  'inset 0 1px 1px rgba(0,0,0,0.1), 3px 0 #f0eeef, 0 3px #f0eeef, -3px 0 #f0eeef, 0 -3px #f0eeef'
 FORM_border_color = #D0D4C6
@@ -310,3 +327,4 @@ form, .form
       background-color: #ddd
       & .value
         background-color: THEME_light
+

src/stylesheets/vendor.styl

@@ -5,6 +5,13 @@ vendor(prop, args)
   // -o-{prop} args
   {prop} args
 
+vendorValue(prop, args)
+  {prop} -webkit- + args
+  {prop} -moz- + args
+  // {prop} -ms- + args
+  // {prop} -o- + args
+  {prop} args
+
 border-radius()
   vendor('border-radius', arguments)
 
@@ -14,19 +21,12 @@ box-shadow()
 text-shadow()
   vendor('text-shadow', arguments)
 
-background-image()
-  vendor('background-image', arguments)
-
 backface-visibility()
   vendor('backface-visibility', arguments)
 
 /* ====================== FLEXBOX ====================== */
 display-box()
-  display -webkit-box
-  display -moz-box
-  display -ms-box
-  display -o-box
-  display box
+  vendorValue('display', box)
 
 box-pack()
   vendor('box-pack', arguments)
@@ -51,11 +51,7 @@ box-lines()
 
 /* ====================== BOXFLEX ====================== */
 display-flex()
-  display -webkit-flex
-  display -moz-flex
-  display -ms-flex
-  display -o-flex
-  display flex
+  vendorValue('display', flex)
 
 flex-flow()
   vendor('flex-flow', arguments)
@@ -99,3 +95,8 @@ transform()
 
 transform-origin()
   vendor('transform-origin', arguments)
+
+
+/* ====================== ANIMATIONS ====================== */
+animation()
+  vendor('animation', arguments)