How to make superfish dropdown menu responsive?

Question

I am using superfish dropdown menu with skelton framework. I wanted it to work on mobiles as well. By default its showing the dropdown items but it hover over the items belo

Answer 1

Here's a better answer

I was able to convert the same HTML for Superfish into a responsive drawer menu. The JS is ultra simple and the whole thing is basically done using CSS. Check it out and let me know what you guys think!

// TRIGGER ACTIVE STATE
$('#mobnav-btn').click(

  function() {
    $('.sf-menu').toggleClass("xactive");
  });



// TRIGGER DROP DOWN SUBS
$('.mobnav-subarrow').click(

  function() {
    $(this).parent().toggleClass("xpopdrop");
  });

body {
  font-family: Arial;
  font-size: 12px;
  padding: 20px;
}
#mobnav-btn {
  display: none;
  font-size: 20px;
  font-weight: bold;
  background-color: blue;
  color: white;
  padding: 10px;
  cursor: pointer;
}
.mobnav-subarrow {
  display: none;
}
@media only screen and (max-width: 480px) {
  #mobnav-btn {
    display: block;
  }
  .mobnav-subarrow {
    display: block;
    background-color: #0f3975;
    opacity: .3;
    border-bottom: 1px solid white;
    border-top: 1px solid black;
    height: 20px;
    width: 30px;
    background-position: top left!important;
    position: absolute;
    top: 8px;
    right: 10px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    cursor: pointer;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    cursor: pointer;
    -webkit-transition: all .1s ease-in-out;
    -moz-transition: all .1s ease-in-out;
    -ms-transition: all .1s ease-in-out;
    -o-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
  }
  .sf-menu {
    width: 100%!important;
    display: none;
  }
  .sf-menu.xactive {
    display: block!important;
  }
  .sf-menu li {
    float: none!important;
    display: block!important;
    width: 100%!important;
  }
  .sf-menu li a {
    float: none!important;
  }
  .sf-menu ul {
    position: static!important;
    display: none!important;
  }
  .xpopdrop ul {
    display: block!important;
  }
}

This is a responsive Superfish Menu by Ryan Brackett. 

    
In this demo, you can drag the middle bar to see the responsive menu. I have already included the default css and js files for Superfish





Button

  
Item 1

    

    

      
Subitem 1.1

      
      
Subitem 1.2

      
      
Subitem 1.3

      
      
Subitem 1.4

      
    
  
  
Item 2

    

    

      
Subitem 2.1

      
      
Subitem 2.2

      
      
Subitem 2.3

      
      
Subitem 2.4

      
    
  
  
Item 3

    

    

      
Subitem 3.1

      
      
Subitem 3.2

      
      
Subitem 3.3

      
      
Subitem 3.4

      
    
  
  
Item 4

    

    

      
Subitem 4.1

      
      
Subitem 4.2

      
      
Subitem 4.3

      
      
Subitem 4.4

      
    
  
  
Item 5

    

    

      
Subitem 5.1

      
      
Subitem 5.2

      
      
Subitem 5.3

      
      
Subitem 5.4

      
    
  
  
Item 6

    

    

      
Subitem 6.1

      
      
Subitem 6.2

      
      
Subitem 6.3

      
      
Subitem 6.4