overlay animation changed

shaonsina · Jun 25, 2019 · 12f9b4f · 12f9b4f
1 parent 2bc0581
commit 12f9b4f
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 33 deletions.
diff --git a/assets/css/sina-nav.css b/assets/css/sina-nav.css
@@ -1,7 +1,7 @@
 /**
  * Template name: Sina-nav Multi Purpose Menu
  * Template URI: https://github.com/shaonsina/sina-nav-4
- * Version: 2.0
+ * Version: 2.1
  * Author: shaonsina
  */
 .search-box {
@@ -33,25 +33,15 @@
 }
 
 .sina-nav-overlay {
+  display: none;
   position: fixed;
+  top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  z-index: 998;
-  opacity: 0;
-  transition: top 0.5s ease-in-out;
-  opacity: 1;
+  z-index: 9998;
   background: rgba(0, 0, 0, 0.5);
 }
-
-.sina-nav-overlay.off {
-  top: -100%;
-}
-
-.sina-nav-overlay.on {
-  top: 0;
-}
-
 .sina-nav {
   margin-bottom: 0;
   border-radius: 0;
@@ -386,8 +376,8 @@
   width: 300px;
   padding: 20px;
   height: 100%;
-  z-index: 999;
-  transition: all 0.5s ease-in-out;
+  z-index: 99999;
+  transition: all 0.6s ease;
   background-color: #333;
 }
 .sina-nav .widget-bar.on {

diff --git a/assets/css/sina-nav.min.css b/assets/css/sina-nav.min.css
diff --git a/assets/js/sina-nav.js b/assets/js/sina-nav.js
@@ -1,7 +1,7 @@
 /**
  * Template name: Sina-nav Multi Purpose Menu
  * Template URI: https://github.com/shaonsina/sina-nav-4
- * Version: 2.0
+ * Version: 2.1
  * Author: shaonsina
  */
 
@@ -185,14 +185,18 @@
 			getNav.find('.extension-nav').each(function(){
 				$('.widget-bar-btn > a', this).on('click', function(e){
 					e.preventDefault();
+					getNav.children('.sina-nav-overlay').fadeIn(400);
 					getNav.children('.widget-bar').toggleClass('on');
-					getNav.children('.sina-nav-overlay').addClass('on').removeClass('off');
 				});
 			});
 			getNav.find('.widget-bar .close-widget-bar').on('click', function(e){
 				e.preventDefault();
 				getNav.children('.widget-bar').removeClass('on');
-				getNav.children('.sina-nav-overlay').addClass('off').removeClass('on');
+				getNav.children('.sina-nav-overlay').fadeOut(600);
+			});
+			getNav.children('.sina-nav-overlay').on('click', function() {
+				getNav.children('.widget-bar').removeClass('on');
+				$(this).fadeOut(600);
 			});
 
 			// Toggle Button