我正在使用skelton框架的superfish下拉菜单。我希望它也能在手机上工作。默认情况下,它显示下拉项目,但它悬停在它下面的项目上。我希望以某种方式将它推到它下面。任何解决方案如何使superfish下拉菜单响应?
回答
更新: 由Ryan布拉克特看到答案
下拉菜单上不移动很好地工作。我会建议在手机上隐藏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菜单可以在移动设备上使用。
这里有一个更好的答案
我能为快鱼相同的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:[email protected]">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>
这是我用:
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");
});
替换“菜单是”与你的导航链接和第二后这个片段将导航用户点击的网站点击并且第一次点击只会显示他的子页面。
嘿,伙计,JS你可以帮我们解决这个问题吗? – 2014-09-02 17:52:16
Reshad:只要改变你的CSS是这样的:
.xpopdrop > ul {
display: block!important;
}
而且你将被罚款。
正如Ed指出的那样,为响应式菜单解决所有不同的superfish/css问题似乎存在问题。
通过浏览这里和其他地方的选项后,我发现了一个纯CSS响应菜单,它比superfish更快,更容易修改,并且没有jquery或javascript的开销。它也有二级菜单。
我使用screenfly检查了the demo以在使用之前检查响应性和移动布局。与codepen演示页面不同,CSSscript.com版本(上面的链接)为移动设备提供了水平响应布局。
的代码中,你可以很容易地分割成一个链接CSS文件一个HTML文件中,只有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 {
\t background: #212121;
\t font-size:22px;
\t line-height: 32px;
\t color: #ffffff;
\t word-wrap:break-word !important;
\t font-family: 'Open Sans', sans-serif;
\t }
h1 {
\t font-size: 60px;
\t text-align: center;
\t color: #FFF;
} \t
h3 {
\t font-size: 30px;
\t text-align: center;
\t color: #FFF;
}
h3 a {
\t color: #FFF;
}
a {
\t color: #FFF;
}
h1 {
\t margin-top: 100px;
\t text-align:center;
\t font-size:60px;
\t font-family: 'Bree Serif', 'serif';
\t }
#container {
\t margin: 0 auto;
\t max-width: 890px;
}
p {
\t 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%;
} \t
nav {
\t margin: 50px 0;
\t background-color: #E64A19;
}
nav ul {
\t padding:0;
\t margin:0;
\t list-style: none;
\t position: relative;
\t }
\t
nav ul li {
\t display:inline-block;
\t background-color: #E64A19;
\t }
nav a {
\t display:block;
\t padding:0 10px; \t
\t color:#FFF;
\t font-size:20px;
\t line-height: 60px;
\t text-decoration:none;
}
nav a:hover {
\t background-color: #000000;
}
/* Hide Dropdowns by Default */
nav ul ul {
\t display: none;
\t position: absolute;
\t top: 60px;
}
\t
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
\t display:inherit;
}
\t
/* Fisrt Tier Dropdown */
nav ul ul li {
\t width:170px;
\t float:none;
\t display:list-item;
\t position: relative;
}
/* Second, Third and more Tiers \t */
nav ul ul ul li {
\t position: relative;
\t top:-60px;
\t left:170px;
}
\t
/* 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>
\t <!-- 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”下拉菜单开始,并对其进行了增强。 – DisgruntledGoat 2017-05-03 12:29:23
您应该在工作响应式布局中包含演示的CSS和HTML。不是没有反应的codepen – Toskan 2017-07-11 00:22:54
感谢您的信息 - 只是回应有关Superfish的具体问题。 – 2017-12-14 18:37:50
- 1. 点击显示Superfish下拉菜单
- 2. Superfish子菜单文本和右侧下拉菜单的定位
- 3. 淡入为背景色(按钮)和下拉菜单SUPERFISH菜单
- 4. 如何使用JS创建响应下拉菜单?
- 5. 如何使选择下拉菜单响应输入框
- 6. 响应下拉菜单定位
- 7. JQuery响应下拉菜单问题
- 8. CSS菜单响应下拉宽度
- 9. 如何使下拉菜单
- 10. JavaScript不起作用在下拉菜单响应菜单栏
- 11. 如何添加移动响应固定下拉菜单
- 12. 在IE6中没有显示的Superfish下拉菜单
- 13. Superfish风格的下拉菜单不会在IE中显示
- 14. Superfish下拉菜单在IE7中不起作用
- 15. Wordpress标题中的Superfish菜单在下拉菜单上创建滚动条
- 16. superfish垂直菜单
- 17. UI.tabs与Superfish菜单
- 18. 如何制作粘贴在页面右侧的suckerfish/superfish CSS下拉菜单?
- 19. 如何在下拉菜单
- 20. SUPERFISH下拉菜单显示的div下方它下面的它是做什么
- 21. Jquery Superfish菜单 - 如何向上滑动?
- 22. 如何使用.each为下拉菜单
- 23. 如何使下拉菜单水平
- 24. 如何使用下拉菜单
- 25. Superfish jQuery菜单的子菜单对齐
- 26. 响应菜单 - 如何?
- 27. 下拉菜单
- 28. 下拉菜单?
- 29. 下拉菜单
- 30. 下拉菜单
很好的例子。更新了我的答案,以指导用户。 – 2013-04-16 15:30:44
是否可以使用3层菜单而不是2层? – Reshad 2014-09-01 09:49:19