个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
我正在使用最新的 Superfish 菜单的代码，只有当我使用没有 <a> 的列表时，我才能让它工作。标签。我可能遗漏了一些明显的东西，但我一直盯着它看太久了，我不知道出了什么问题。
这是我的 html:
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<script src="http://vbpmonitor.com/templates/vbpmonitor/js/superfish.js"></script>
<script src="http://vbpmonitor.com/templates/vbpmonitor/js/hoverIntent.js"> </script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('ul.sf-menu').superfish({
delay: 800, // the delay in milliseconds that the mouse can remain outside a submenu without it closing
animation: {opacity:'show'}, // an object equivalent to first parameter of jQuery’s .animate() method. Used to animate the submenu open
animationOut: {opacity:'hide'}, // an object equivalent to first parameter of jQuery’s .animate() method Used to animate the submenu closed
speed: 'normal', // speed of the opening animation. Equivalent to second parameter of jQuery’s .animate() method
speedOut: 'fast',
disableHI: true,
});
});
</script>
</head>
<body>
<nav class="navbar">
<ul class="sf-menu">
<li><a href="#">Link 1</a>
<ul>
<li><a href="#">Sublink 1</a><li>
<li><a href="#">Sublink 2</a></li>
<li><a href="#">Sublink 3</a></li>
</ul>
</li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</nav>
</body>
</html>
CSS:
.navbar {
float: left;
width: 100%;
height: 50px;
background: #cc3333;
}
nav > ul {
margin: 0;
padding: 0;
list-style-type: none;
}
nav > ul > li {
float: left;
margin: 0;
}
nav > ul > li > a {
display: block;
padding: 17px 20px;
color: #fff;
text-decoration: none;
}
nav ul ul li a {
width: 200px;
display: block;
padding: 10px 15px;
text-decoration: none;
color: #fff;
}
/*** ESSENTIAL STYLES ***/
.sf-menu li {
position: relative;
}
.sf-menu ul {
position: absolute;
display: none;
top: 100%;
left: 0;
z-index: 99;
list-style-type:none;
}
.sf-menu > li {
float: left;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
display: block;
}
.sf-menu a {
display: block;
position: relative;
}
.sf-menu ul ul {
top: 0;
left: 100%;
}
这是我测试它的 JSbin 的链接:http://jsbin.com/mituwuxupi/1/
最佳答案
我试过你的 jsbin，它工作正常，但是看不到子菜单，只是尝试在你的 CSS 中添加一些背景，例如:
nav ul ul li a {
width: 200px;
display: block;
padding: 10px 15px;
text-decoration: none;
color: #FFF;
background-color: red;
}
您会看到您的菜单正在运行。
关于javascript - 添加 <a> 标签时 Superfish 损坏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28682643/
25
4
0
我的 superfish 下拉菜单有问题 - 在我将 jQuery.Columnizer 添加到我的项目之前它工作正常。取出列生成器 jQuery 修复了 superfish.js 的问题 - 然而，
我知道 superfish 很神奇，但是我们使用的可怕的 CMS 在 IE6 中与它发生冲突(当 CMS 将选定的类应用于 li 时，在 IE6 中悬停会中断)。我不知道怎么做，但请随意查看valit
我在 jQuery 网格中使用 Superfish 下拉菜单时遇到问题。看起来下拉列表被表格边界限制了。 我已经研究过了，这似乎是一个 z-index 问题，除了我尝试了 z-index 的各种组合都
查看链接: http://www.advertisesolutions.com/beta/4kitchens.html 无法理解为什么主菜单和子菜单下方有空隙，Profile->Profile Set
我一直在为我的非营利组织网站工作，试图将我们冗长的下拉菜单放入两列，但收效甚微。我已经加宽了 UL 并将 LI 元素的宽度设置为 50%，但是我在较长的元素上出现了较大的白色间隙。我看过的教程结构要简
我试图将子菜单项中的文本对齐到右侧而不是 Superfish 菜单中的左侧。 我能够将下拉菜单对齐到顶级菜单项的右侧，但似乎无法确定文本对齐方式。 此外，我将如何让更多的子菜单向左而不是向右打开？由于
我已经用我的 wordpress 菜单设置了 Superfish。我设法让它工作正常。但是我已经按照此处的文档进行操作: http://users.tpg.com.au/j_birch/plugins
我正在尝试垂直使用 Superfish，但与页面右侧对齐，从而打开左侧的所有子菜单。我一直在调整一些 CSS 属性来实现这一点，但它并不能完美地工作——箭头总是位于任何父菜单文本的右侧，而在这种情况下
我一直在与一位客户合作，为他们的 dentry 公司建立一个新网站。开发站点的链接在这里:http://virtualiellc.com/skd/ 我最近注意到页面底部有一个水平滚动条，而本不该有的。
我遇到了一个 CSS 问题，我的带有子菜单的菜单与没有子菜单的菜单的缩进方式不同。我已经尝试了一些来自谷歌的解决方案但没有成功。 例如，如果您访问我们的网站并将鼠标悬停在“drinkware”上，您会
关闭。这个问题需要debugging details .它目前不接受答案。 编辑问题以包含 desired behavior, a specific problem or error, and t
以前有人问过这个问题，但我只能找到 Superfish 的弃用版本的修复/破解. 如果缩小屏幕，您可以看到嵌套/子列表呈现在屏幕外。是否可以修复此缺点，使子菜单显示在左侧而不是右侧，或者以某种方式识别
如何更改 superfish 菜单中每个按钮之间的间距？我正在使用垂直菜单 css。 最佳答案 如果您正在寻找的是将 Superfish 下拉菜单第一级的元素隔开，只需为 .sf-menu 容器的直接
我正在尝试配置 superfish 以我想要的方式显示。到目前为止一切看起来都不错，只是我希望菜单正确对齐。这也有效，但现在我所有的菜单项都被镜像了，所以不再是我想要的顺序...... 看看:http
根据我初始化 Superfish 的方式，我会在悬停时看到箭头或子菜单，但不会同时出现。 箭头将显示为:(但没有子菜单) jQuery(document).ready(function(){
我正在使用 Superfish 开发一个网站，但遇到了一个我无法解决的恼人问题。 基本上，除非您将鼠标悬停在带有子菜单的菜单项上，否则菜单看起来不错。我启用了箭头以指示何时有子菜单，但是当您将鼠标悬停
我正在尝试从 Superfish 自定义导航栏这样它就会在屏幕中央并拉伸(stretch)到宽度的 100%。但我所做的每一次尝试都会导致 li 元素拉伸(stretch)以适应 100% 的屏幕。
我试图让我的 superfish js 菜单上的子菜单全部对齐到顶部，而不是从父 li 中弹出。我试过这个解决方案: How to get superfish sub menus top-aligne
我正在使用 Superfish 在网站上显示水平菜单。每当我在当前菜单项或子菜单项的页面上时，子菜单总是显示。发生这种情况时，当您将鼠标悬停在其他子菜单上时，它会与其他子菜单重叠。如何隐藏当前显示的子
当我点击一个按钮时， super 鱼不会像我想要的那样改变颜色。HTML: Home Products
我是一名优秀的程序员,十分优秀！