如何让superfish下拉菜单响应？

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 below it. I wants to have it in a way so that it push parent items below it. Any solution?

我正在使用带有skelton框架的superfish下拉菜单。我希望它也适用于手机。默认情况下,它会显示下拉项,但会将鼠标悬停在其下方的项目上。我希望以某种方式使它,以便它推动它下面的父项。有解决方案吗

5 个解决方案

#1

Update: See the answer by Ryan Brackett

更新:请参阅Ryan Brackett的回答

Dropdown menus don't work well on mobile. I would suggest hiding the superfish menu on mobile and replacing it with something else.

下拉菜单在移动设备上无效。我建议在移动设备上隐藏superfish菜单,并用其他东西替换它。

Resources: Off canvas

资源:画布外

http://www.lukew.com/ff/entry.asp?1569

http://www.zurb.com/playground/off-canvas-layouts

Mobile navigation patterns

移动导航模式

http://bradfrostweb.com/blog/web/responsive-nav-patterns/

For others looking for a solution, make sure you are using the newest jQuery. I had some older sites where I found using a newer version of jQuery made the Superfish menus work on mobile devices.

对于寻找解决方案的其他人,请确保您使用的是最新的jQuery。我有一些较旧的网站,我发现使用较新版本的jQuery使得Superfish菜单可以在移动设备上运行。

#2

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!

我能够将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://code.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:[e-mail]">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 class="sf-menu">
  <li><a href="#">Item 1</a>

    <div class="mobnav-subarrow"></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 class="mobnav-subarrow"></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 class="mobnav-subarrow"></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 class="mobnav-subarrow"></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 class="mobnav-subarrow"></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 class="mobnav-subarrow"></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>

#3

As Ed pointed out it seems problematic to solve all the different superfish/css issues for a responsive menu.

正如Ed指出的那样,为响应式菜单解决所有不同的superfish / css问题似乎存在问题。

After looking through the options here and elsewhere I found a Pure CSS responsive menu which has been quicker and easier to modify than superfish, and does not have the overheads of jquery or javascript. It also has second level menus.

在查看了这里和其他地方的选项后,我发现了一个Pure CSS响应菜单,它比superfish更快更容易修改,并且没有jquery或javascript的开销。它还有二级菜单。

I checked the demo with screenfly to check responsiveness and mobile layout before using it. The CSSscript.com version (link above) gives a horizontal responsive layout for mobiles, unlike the codepen demo page.

我使用screenfly检查了演示,以便在使用之前检查响应性和移动布局。与codepen演示页面不同,CSSscript.com版本(上面的链接)为移动设备提供了水平响应式布局。

The code is in a single HTML file which you can easily split into a linked CSS file, only 2 media queries manage the responsive changes and even then only with minimal changes. The '+' symbols can be deleted without issues.

代码位于单个HTML文件中,您可以轻松地将其拆分为链接的CSS文件,只有2个媒体查询可以管理响应式更改,即使只有最少的更改。可以删除“+”符号而不会出现问题。

Only one tiny downside: the first link downloads a HTML has a javascript at the bottom adding obvious google analytics tracking, easily removed and not on codepen.

只有一个小小的缺点:第一个链接下载HTML底部有一个javascript,添加了明显的谷歌分析跟踪,轻松删除,而不是在codepen上。

Explanation author andor nagy - code from codepen

解释作者andor nagy - 来自codepen的代码

/* CSS Document */

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
@import url(http://fonts.googleapis.com/css?family=Bree+Serif);

body {
	background: #212121;
	font-size:22px;
	line-height: 32px;
	color: #ffffff;
	word-wrap:break-word !important;
	font-family: 'Open Sans', sans-serif;
	}

h1 {
	font-size: 60px;
	text-align: center;
	color: #FFF;
}	

h3 {
	font-size: 30px;
	text-align: center;
	color: #FFF;
}

h3 a {
	color: #FFF;
}

a {
	color: #FFF;
}

h1 {
	margin-top: 100px;
	text-align:center;
	font-size:60px;
	font-family: 'Bree Serif', 'serif';
	}

#container {
	margin: 0 auto;
	max-width: 890px;
}

p {
	text-align: center;
}

#relatedContent {
  max-width: 800px;
  margin: 200px auto;
}

#relatedContent .item {
  max-width: 44%;
  padding: 3%;
  float: left;
  text-align: center;
}

#relatedContent .item a img {
  max-width: 100%;
}	

nav { 
	margin: 50px 0;
	background-color: #E64A19;
}

nav ul {
	padding:0;
	margin:0;
	list-style: none;
	position: relative;
	}
	
nav ul li {
	display:inline-block;
	background-color: #E64A19;
	}

nav a {
	display:block;
	padding:0 10px;	
	color:#FFF;
	font-size:20px;
	line-height: 60px;
	text-decoration:none;
}

nav a:hover { 
	background-color: #000000; 
}

/* Hide Dropdowns by Default */
nav ul ul {
	display: none;
	position: absolute; 
	top: 60px;
}
	
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
	display:inherit;
}
	
/* Fisrt Tier Dropdown */
nav ul ul li {
	width:170px;
	float:none;
	display:list-item;
	position: relative;
}

/* Second, Third and more Tiers	*/
nav ul ul ul li {
	position: relative;
	top:-60px; 
	left:170px;
}

	
/* Change this in order to change the Dropdown symbol */
li > a:after { content:  ' +'; }
li > a:only-child:after { content: ''; }

<div id="container">
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">WordPress</a>
            <!-- First Tier Drop Down -->
            <ul>
                <li><a href="#">Themes</a></li>
                <li><a href="#">Plugins</a></li>
                <li><a href="#">Tutorials</a></li>
            </ul>        
            </li>
            <li><a href="#">Web Design</a>
            <!-- First Tier Drop Down -->
            <ul>
                <li><a href="#">Resources</a></li>
                <li><a href="#">Links</a></li>
                <li><a href="#">Tutorials</a>
            	<!-- Second Tier Drop Down -->
                <ul>
                    <li><a href="#">HTML/CSS</a></li>
                    <li><a href="#">jQuery</a></li>
                    <li><a href="#">Other</a>
                        <!-- Third Tier Drop Down -->
                        <ul>
                            <li><a href="#">Stuff</a></li>
                            <li><a href="#">Things</a></li>
                            <li><a href="#">Other Stuff</a></li>
                        </ul>
                    </li>
                </ul>
                </li>
            </ul>
            </li>
            <li><a href="#">Graphic Design</a></li>
            <li><a href="#">Inspiration</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">About</a></li>
        </ul>
    </nav>
  <h1>Pure CSS Drop Down Menu</h1>
<p> A simple dropdown navigation menu made with CSS Only. Dropdowns are marked with a plus sign ( + )</p>
<p>Read tutorial <a target="_blank" href="http://webdesignerhut.com/css-dropdown-menu/">here</a></p>
</div>

#4

This is what I use:

这是我用的:

    isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);

$(".menu a").click(function(event){
        if($(this).parents("ul").length == 1 && !$(this).hasClass("lastClick") && isMobile)
            event.preventDefault();     

        $(".menu a").removeClass("lastClick");
        $(this).addClass("lastClick");
    });

Replace ".menu a" with your navigation links and this snippet will navigate the user to the clicked site after the second click and the first click will only show him the subpages.

将“.menu a”替换为您的导航链接,此片段将在第二次点击后将用户导航到点击的网站,第一次点击只会向他显示子页面。

#5

Reshad: Simply change your CSS like this:

重塑:简单地改变你的CSS:

.xpopdrop > ul {
        display: block!important;
}

And you will be fine.

你会没事的。