v.1

adrianillo · Jul 12, 2015 · 42030f4 · 42030f4
1 parent 67c33de
commit 42030f4
Show file tree

Hide file tree

Showing 2 changed files with 111 additions and 28 deletions.
diff --git a/css/hamburger.css b/css/hamburger.css
@@ -95,7 +95,7 @@
 
 #menuHamburger.menuHamburger ul {
     list-style: none;
-    margin: 0;
+    margin: 1px 0 0 0;
     padding: 0;
     overflow-x: auto;
     height: auto;
@@ -111,8 +111,10 @@
 #menuHamburger.menuHamburger li a {
     color: white;
     text-decoration: none;
-    display: table-row-group;
-    padding-right: 70%;
+    display: block;
+    padding-right: 0;
+    width: 100%;
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
 }
 
 .rightPosition #hamburgerBtn
@@ -128,4 +130,27 @@
 .noScroll
 {
     overflow: hidden !important;
+}
+
+.topSide
+{
+    margin-right:0 !important;
+    margin-left:0 !important;
+    width: 100% !important;
+}
+nav.topSide ul
+{
+    height: 0px;
+}
+
+#menuHamburger.topSide li a {
+    display: block;
+    text-align: center;
+    padding-right: 0;
+    padding-left: 0;
+    width: 100%;
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
+}
+#menuHamburger.topSide li a:focus{
+    outline: none;
 }
diff --git a/js/hamburgerMenu.js b/js/hamburgerMenu.js
@@ -28,6 +28,9 @@ jQuery.fn.extend({
 
         this.render= function(menuList, self)
         {
+            var me=this;
+            this.config.running=false;
+            this.config.marginTopContent= parseInt( $(mainContent).css("margin-top"));
             var header=$('<header>',{id:'headerHamburger',"data-role":'header'});
             if(this.config.position=='right'){
                 header.addClass("rightPosition");
@@ -45,6 +48,13 @@ jQuery.fn.extend({
                 nav.addClass("rightSide");
             }
 
+            if(this.config.fromTo=="topDown")
+            {
+                ul.height('0px');
+                nav.addClass("topSide");
+            }
+
+
             $.each(menuList, function( index, value ) {
 
                 var li=$('<li>',{id:(value.id!=null?value.id:'')});
@@ -66,7 +76,9 @@ jQuery.fn.extend({
             $(self).off('click','#hamburgerBtn');
             $(self).on('click','#hamburgerBtn',this,function (e) {
                 if(!$(this).hasClass('hamburgerActive')) {
-                    e.data.onClickAmburger(e);
+                    if(!me.config.running) {
+                        e.data.onClickAmburger(e);
+                    }
                 }
             });
 
@@ -85,14 +97,11 @@ jQuery.fn.extend({
 
         this.onClickAmburger = function(e)
         {
+            this.config.running=true;
             var mainContent= '#'+e.data.config.mainContent;
             var contentWidth = $(mainContent).width();
             $(mainContent).css('width', contentWidth);
-
             $('body').addClass('noScroll');
-
-
-
             var animateMode='linear';
             if($.easing) {
                 if ($.easing.easeOutExpo) {
@@ -106,21 +115,50 @@ jQuery.fn.extend({
                  animateSideMenuHamburger={"marginRight": ["0", animateMode]};
                  animateSideMainContent={ "marginLeft": ["-75%", animateMode] };
             }
+            var me=this;
+            if(this.config.fromTo=="topDown")
+            {
+                var offsetMenu= $(window).height()*0.7;
 
-            $(mainContent).animate(animateSideMainContent, {
-                duration: 700,
-                complete: function () {
-
+                var heightUl= $("#menuHamburger ul li").length*$("#menuHamburger ul li").outerHeight()+10;
+                if(heightUl>offsetMenu) {
+                    heightUl = offsetMenu;
                 }
-            });
+                var offsetContent= heightUl+this.config.marginTopContent;
+                $("#menuHamburger ul").animate({"height": [heightUl+"px", animateMode]}, {
+                    duration: 700,
+                    complete: function () {
+                        $("#hamburgerBtn").addClass("hamburgerActive");
+                        $("#hamburgerBtn").removeClass("hamburgerNoActive");
+                        me.config.running=false;
+                    }
+                });
 
-            $("#menuHamburger").animate(animateSideMenuHamburger, {
-                duration: 700,
-                complete: function () {
-                    $("#hamburgerBtn").addClass("hamburgerActive");
-                    $("#hamburgerBtn").removeClass("hamburgerNoActive");
-                }
-            });
+                $(mainContent).animate({"margin-top": [offsetContent+"px", animateMode]}, {
+                    duration: 700,
+                    complete: function () {
+
+                    }
+                });
+            }
+            else {
+
+                $("#menuHamburger").animate(animateSideMenuHamburger, {
+                    duration: 700,
+                    complete: function () {
+                        $("#hamburgerBtn").addClass("hamburgerActive");
+                        $("#hamburgerBtn").removeClass("hamburgerNoActive");
+                        me.config.running=false;
+                    }
+                });
+
+                $(mainContent).animate(animateSideMainContent, {
+                    duration: 700,
+                    complete: function () {
+
+                    }
+                });
+            }
 
 
         };
@@ -144,21 +182,41 @@ jQuery.fn.extend({
                  animateSideMainContent={"marginLeft": ["6", animateMode]};
             }
 
-            $(mainContent).animate(animateSideMainContent, {
+            if(this.config.fromTo=="topDown")
+            {
+                $("#menuHamburger ul").animate({"height": ["0px", animateMode]}, {
+                    duration: 700,
+                    complete: function () {
+                        $("#hamburgerBtn").removeClass("hamburgerActive");
+                        $("#hamburgerBtn").addClass("hamburgerNoActive");
+                    }
+                });
+
+                $(mainContent).animate({"margin-top": [this.config.marginTopContent+"px", animateMode]}, {
+                    duration: 700,
+                    complete: function () {
+
+                    }
+                });
+            }
+            else {
+
+                $("#menuHamburger").animate(animateSideMenuHamburger, {
+                    duration: 700,
+                    complete: function () {
+                    }
+                });
+
+                $(mainContent).animate(animateSideMainContent, {
                     duration: 700,
                     complete: function () {
 
                         $(mainContent).css('width', 'auto');
                         $("#hamburgerBtn").removeClass("hamburgerActive");
                         $("#hamburgerBtn").addClass("hamburgerNoActive");
                     }
-            });
-
-            $("#menuHamburger").animate(animateSideMenuHamburger, {
-                duration: 700,
-                complete: function () {
-                }
-            });
+                });
+            }
         };