如何使超级鱼下拉菜单响应？
Posted
技术标签:
【中文标题】如何使超级鱼下拉菜单响应？【英文标题】：How to make superfish dropdown menu responsive? 【发布时间】：2012-08-06 21:03:11 【问题描述】：我正在使用带有 skelton 框架的 superfish 下拉菜单。我希望它也能在手机上工作。默认情况下，它显示下拉项目，但将鼠标悬停在其下方的项目上。我想以某种方式拥有它，以便它将父项推到它下面。有什么解决办法吗？
【问题讨论】：
【参考方案1】：正如 Ed 指出的那样，为响应式菜单解决所有不同的 superfish/css 问题似乎是有问题的。
查看此处和其他地方的选项后，我发现了一个纯 CSS 响应式菜单，它比 superfish 更快速、更容易修改，并且没有 jquery 或 javascript 的开销。它也有二级菜单。
在使用之前，我使用 screenfly 检查了the demo 以检查响应能力和移动布局。 CSSscript.com 版本（上面的链接）为移动设备提供了水平响应式布局，与 codepen 演示页面不同。
代码位于单个 html 文件中，您可以轻松地将其拆分为链接的 CSS 文件，只有 2 个媒体查询管理响应式更改，即使这样也只有很少的更改。可以毫无问题地删除“+”符号。
只有一个小缺点：第一个链接下载一个 HTML，底部有一个 javascript，添加了明显的谷歌分析跟踪，很容易删除，而不是在 codepen 上。
Explanationauthor andor nagy - code from 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>【讨论】：
这完全误解了 Superfish 菜单的要点，它本身是从“纯 CSS”下拉菜单开始并对其进行增强的。 您应该包含演示的 css 和 html 以及有效的响应式布局。不是反应迟钝的codepen 感谢您的信息 - 只是回答有关 Superfish 的具体问题。【参考方案2】：这里有更好的答案
我能够将 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: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 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 层而不是 2 层？【参考方案3】：Reshad：只需像这样更改您的 CSS：
.xpopdrop > ul
display: block!important;
你会没事的。
【讨论】：
【参考方案4】：更新： 查看 Ryan Brackett 的答案
下拉菜单在移动设备上效果不佳。我建议在移动设备上隐藏超级鱼菜单并用其他东西替换它。
资源： 画布外
http://www.lukew.com/ff/entry.asp?1569
http://www.zurb.com/playground/off-canvas-layouts
移动导航模式
http://bradfrostweb.com/blog/web/responsive-nav-patterns/
对于寻求解决方案的其他人，请确保您使用的是最新的 jQuery。我在一些旧网站上发现使用更新版本的 jQuery 使 Superfish 菜单可以在移动设备上运行。
【讨论】：
【参考方案5】：这是我用的：
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");
);
将“.menu a”替换为您的导航链接，此 sn-p 将在第二次点击后将用户导航到点击的站点，而第一次点击只会向他显示子页面。
【讨论】：
以上是关于如何使超级鱼下拉菜单响应？的主要内容，如果未能解决你的问题，请参考以下文章