如何让superfish下拉菜单响应？

Question

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

Answer 1

这是一个更好的答案

我能够将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> 

Answer 2

更新：请参阅Ryan Brackett的回答

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

资源： 画布外

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菜单适用于移动设备。

Answer 3

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

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

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

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

只有一个微小的缺点：第一个链接下载HTML底部有一个javascript，添加了明显的谷歌分析跟踪，轻松删除，而不是在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> 

Answer 4

这是我使用的：

    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”替换为您的导航链接，此片段将在第二次点击后将用户导航到点击的网站，第一次点击只会向他显示子页面。

Answer 5

Reshad：简单地改变你的CSS：

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

你会没事的。