minify

fix some on top mobile bug
4xmen · Dec 3, 2022 · 3b21060 · 3b21060
1 parent 82c4490
commit 3b21060
Show file tree

Hide file tree

Showing 10 changed files with 78 additions and 26 deletions.
diff --git a/demo/index-rtl.html b/demo/index-rtl.html
@@ -23,6 +23,15 @@
                 });
             });
         </script>
+        <!--        just for demo   -->
+        <style>
+            #wrapper{
+                font-family: Vazirmatn, sans-serif;
+                line-height: 2em;
+                padding: 2em;
+
+            }
+        </style>
     </head>
     <body>
         <nav id="navbar" class="">

diff --git a/demo/index.html b/demo/index.html
@@ -21,14 +21,14 @@
 //                    responsive: false,
                     searchable: true,
                     theme: 'dark-lesb',
-                    sticky: 4,
+                    sticky: 2,
                 });
                 console.log(rvnMenu);
 //                rvnMenu.setMode('minimal');
                 rvnMenu.setTheme('dark-ruby');
             });
         </script>
-    <!--        just for demo-->
+    <!--        just for demo   -->
         <style>
             #wrapper{
                 font-family: Vazirmatn, sans-serif;

diff --git a/dist/jquery-rvnm-rtl.min.css b/dist/jquery-rvnm-rtl.min.css
diff --git a/dist/jquery-rvnm.min.css b/dist/jquery-rvnm.min.css
diff --git a/dist/rvnm.css b/dist/rvnm.css
@@ -32,7 +32,7 @@
 
 .rvnm-navbar-box ul li ul{
     padding-left: 0;
-    padding-right: 10px;
+    padding-right: 2px;
 }
 .rvnm-navbar-box li .fa{
     margin-right: 0px;
@@ -261,6 +261,7 @@ body,html{
 }
 
 .rvnm-navbar-box{
+    font-family: Vazirmatn, sans-serif;
     position: absolute;
     left: 0px;
     top:0;
@@ -269,6 +270,8 @@ body,html{
     min-height: 50vh;
     overflow-y: hidden;
     z-index: 99;
+    transition: 313ms;
+    transition-delay: 500ms;
 }
 
 .rvnm-wrapper{
@@ -299,7 +302,7 @@ body,html{
 .rvnm-navbar-box ul li ul{
     overflow: hidden;
     display: none;
-    padding-left: 10px;
+    padding-left: 2px;
 }
 
 .rvnm-navbar-box .fa{
@@ -332,20 +335,24 @@ body,html{
 
 
 .rvnm-navbar-box ul li a,.rvnm-navbar-box ul li a:visited{
-    display: block;
-    padding: 10px;
+    display: flex;
+    align-items: center;
+    padding-left: 10px;
+    padding-right: 10px;
     font-size: 14px;
-    font-weight: 100;
+    font-weight: 300;
     color: #333 ;
     position: relative;
-    overflow: hidden;
     height: 45px;
+    white-space: nowrap;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing:border-box;
-    line-height: 1.75em;
+    line-height: 2em;
     overflow: hidden;
     text-overflow: ellipsis;
+
+
 }
 
 .rvnm-navbar-box ul li:hover a,.rvnm-navbar-box ul li:hover a:visited{
@@ -356,7 +363,7 @@ body,html{
     display: block;
     padding: 10px;
     font-size: 14px;
-    font-weight: 600;
+    font-weight: 400;
     background: #eaeaea ;
     color: #1d4686;
     /*text-align: center;*/
@@ -382,6 +389,7 @@ body,html{
 }
 
 
+
 /*minmal mode*/
 
 .rvnm-minimal{
@@ -455,7 +463,7 @@ body,html{
 
 .rvnm-navbar-box.rvnm-mobile{
     min-height: 0;
-    position: absolute;
+    position: fixed;
     left: 0px;
     top:0;
     width: 40px;
@@ -490,6 +498,7 @@ body,html{
     opacity: 1 ;
     padding-top: 40px;
     width: 100%;
+    position: absolute;
 }
 .rvnm-navbar-box.rvnm-mobile.rvnm-mobile-expand > ul{
     display: block;
@@ -515,7 +524,7 @@ body,html{
 }
 .rvnm-navbar-box.dark ul li a,.rvnm-navbar-box.dark ul li a:visited,.rvnm-navbar-box.dark ul li span.spliter{
     background: transparent  ;
-    color: rgb(150, 162, 180);
+    color: rgb(241, 245, 253);
     padding-top: 15px ;
     padding-bottom: 15px;
 }
@@ -606,7 +615,7 @@ body,html{
     color: rgb(150, 162, 180);
     padding-top: 15px ;
     padding-bottom: 15px;
-    font-weight: 700;
+    font-weight: 300;
 }
 
 .rvnm-navbar-box.dark-ruby ul li span.spliter{

diff --git a/dist/rvnm.js b/dist/rvnm.js
@@ -1,5 +1,5 @@
 /*
- *  rvnm - v1.4.0
+ *  rvnm - v1.5.0
  *  Responsive vertical navigation menu
  *  https://github.com/4xmen/rvnm#readme
  *
@@ -43,6 +43,7 @@
             responsive: true, // repsonsve mode only work in default mode
             theme: '',
             searchable: false,
+            sticky: 1.85,
         }, options);
 
         /**
@@ -53,6 +54,7 @@
         this.sizetrigger = function () {
             // repsonvive mode controller
             if (settings.responsive && settings.mode === 'default') {
+
                 // if window size between 450 and 768 active minimal
                 if ($(window).width() > 450 && $(window).width() < 768) {
                     if (!$(self).hasClass('rvnm-minimal')) {
@@ -80,6 +82,18 @@
                     $(settings.wrapper).removeClass('rvnm-mobile-wrapper');
                     $(self).removeClass('rvnm-mobile');
                 }
+
+                // grater than mobile
+                if ($(window).width() > 450) {
+                    let menuHeight = $(self).find('> ul').height() ;
+
+                    if (menuHeight / 2 < $(window).scrollTop()){
+                        $(self).find('> ul').css('top', ($(window).scrollTop() - menuHeight ) + (menuHeight / settings.sticky)  + 'px');
+                    }else{
+                        $(self).find('> ul').css('top',0);
+                    }
+
+                }
             }
             $(".rvnm-navbar-box").css('height', '');
             if (settings.mode !== 'mobile' && !$(self).hasClass('rvnm-mobile')) {
@@ -93,6 +107,7 @@
 
         // set plugn selector to self for use in other place of plugin
         var self = this;
+        var lastScroll = 0;
 
         this.each(function () {
             // add rvnm-navbar-box to menu
@@ -257,6 +272,15 @@
 
                 if (e.target === e.currentTarget && $(e.currentTarget).hasClass('rvnm-navbar-box')) {
                     $(this).toggleClass('rvnm-mobile-expand');
+
+                    // go top and restore postion
+                   if ($(this).hasClass('rvnm-mobile-expand')){
+                       lastScroll = $(window).scrollTop();
+                       window.scrollTo({top: 0, behavior: 'smooth'});
+                   }else {
+                       console.log(lastScroll);
+                       window.scrollTo({top: lastScroll, behavior: 'smooth'});
+                   }
                 }
             });