responsive fix

kmlpandey77 · Feb 15, 2019 · d0d045f · d0d045f
1 parent b9df980
commit d0d045f
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 12 deletions.
diff --git a/css/bootnavbar.css b/css/bootnavbar.css
@@ -10,6 +10,8 @@
 .dropdown-menu .dropdown .dropdown-menu {
     left: 100%;
     top: 0%;
+    margin:0 20px;
+    border-width: 0;
 }
 
 .dropdown-menu > li a:hover,
@@ -19,4 +21,11 @@
 }
 .dropdown-menu > li.show > a{
 	color: white;
+}
+
+@media (min-width: 768px) {
+    .dropdown-menu .dropdown .dropdown-menu {
+        margin:0;
+        border-width: 1px;
+    }
 }
diff --git a/index.html b/index.html
@@ -50,7 +50,7 @@
                                     <li><a class="dropdown-item" href="#">Action</a></li>
                                     <li><a class="dropdown-item" href="#">Another action</a></li>
                                     <div class="dropdown-divider"></div>
-                                    <li></li><a class="dropdown-item" href="#">Something else here</a></li>              
+                                    <li></li><a class="dropdown-item" href="#">Something else here</a></li>
                                     <li class="nav-item dropdown">
                                             <a class="dropdown-item dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown"
                                                 aria-haspopup="true" aria-expanded="false">
@@ -60,9 +60,9 @@
                                                 <li><a class="dropdown-item" href="#">Action</a></li>
                                                 <li><a class="dropdown-item" href="#">Another action</a></li>
                                                 <div class="dropdown-divider"></div>
-                                                <li></li><a class="dropdown-item" href="#">Something else here</a></li>                        
+                                                <li></li><a class="dropdown-item" href="#">Something else here</a></li>
                                             </ul>
-                                        </li>          
+                                        </li>
                                 </ul>
                             </li>
                     </ul>
@@ -77,7 +77,7 @@
             </form>
         </div>
     </nav>
-    
+
     <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

diff --git a/js/bootnavbar.js b/js/bootnavbar.js
@@ -1,13 +1,39 @@
 (function($) {
+    var defaults={
+        sm : 540,
+        md : 720,
+        lg : 960,
+        xl : 1140,
+        navbar_expand: 'lg'
+    };
     $.fn.bootnavbar = function() {
-        $(this).find('.dropdown').hover(function() {
-            $(this).addClass('show');
-            $(this).find('.dropdown-menu').first().addClass('show').addClass('animated fadeIn').one('animationend oAnimationEnd mozAnimationEnd webkitAnimationEnd', function () {
-            	$(this).removeClass('animated fadeIn');      	
+
+        var screen_width = $(document).width();
+
+        if(screen_width >= defaults.lg){
+            $(this).find('.dropdown').hover(function() {
+                $(this).addClass('show');
+                $(this).find('.dropdown-menu').first().addClass('show').addClass('animated fadeIn').one('animationend oAnimationEnd mozAnimationEnd webkitAnimationEnd', function () {
+                    $(this).removeClass('animated fadeIn');
+                });
+            }, function() {
+                $(this).removeClass('show');
+                $(this).find('.dropdown-menu').first().removeClass('show');
             });
-        }, function() {
-            $(this).removeClass('show');
-            $(this).find('.dropdown-menu').first().removeClass('show');
+        }
+
+        $('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
+          if (!$(this).next().hasClass('show')) {
+            $(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
+          }
+          var $subMenu = $(this).next(".dropdown-menu");
+          $subMenu.toggleClass('show');
+
+          $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
+            $('.dropdown-submenu .show').removeClass("show");
+          });
+
+          return false;
         });
-    };    
+    };
 })(jQuery);