如何使Superfish下拉菜单响应？

如何使Superfish下拉菜单响应？

这是一个更好的答案

我能够将Superfish的相同HTML转换为响应式抽屉菜单。JS非常简单，整个过程基本上都是使用CSS完成的。检查一下，让我知道你们的想法！

// 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;  }}

<script src="http://pre.jquery.com/jquery-compat-git.js"></script><script src="http://users.tpg.com.au/j_birch/plugins/superfish/js/superfish.js"></script><link href="http://users.tpg.com.au/j_birch/plugins/superfish/css/superfish.css" rel="stylesheet" /><small>This is a responsive Superfish Menu by <a href="mailto:ryanbrackett@gmail.com">Ryan Brackett</a>. <br/>    <br/>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</small><br/><br/><div id="mobnav-btn">Button</div><ul >  <li><a href="#">Item 1</a>    <div ></div>    <ul>      <li><a href="#">Subitem 1.1</a>      </li>      <li><a href="#">Subitem 1.2</a>      </li>      <li><a href="#">Subitem 1.3</a>      </li>      <li><a href="#">Subitem 1.4</a>      </li>    </ul>  </li>  <li><a href="#">Item 2</a>    <div ></div>    <ul>      <li><a href="#">Subitem 2.1</a>      </li>      <li><a href="#">Subitem 2.2</a>      </li>      <li><a href="#">Subitem 2.3</a>      </li>      <li><a href="#">Subitem 2.4</a>      </li>    </ul>  </li>  <li><a href="#">Item 3</a>    <div ></div>    <ul>      <li><a href="#">Subitem 3.1</a>      </li>      <li><a href="#">Subitem 3.2</a>      </li>      <li><a href="#">Subitem 3.3</a>      </li>      <li><a href="#">Subitem 3.4</a>      </li>    </ul>  </li>  <li><a href="#">Item 4</a>    <div ></div>    <ul>      <li><a href="#">Subitem 4.1</a>      </li>      <li><a href="#">Subitem 4.2</a>      </li>      <li><a href="#">Subitem 4.3</a>      </li>      <li><a href="#">Subitem 4.4</a>      </li>    </ul>  </li>  <li><a href="#">Item 5</a>    <div ></div>    <ul>      <li><a href="#">Subitem 5.1</a>      </li>      <li><a href="#">Subitem 5.2</a>      </li>      <li><a href="#">Subitem 5.3</a>      </li>      <li><a href="#">Subitem 5.4</a>      </li>    </ul>  </li>  <li><a href="#">Item 6</a>    <div ></div>    <ul>      <li><a href="#">Subitem 6.1</a>      </li>      <li><a href="#">Subitem 6.2</a>      </li>      <li><a href="#">Subitem 6.3</a>      </li>      <li><a href="#">Subitem 6.4</a>      </li>    </ul>  </li></ul>