Nic*_*son 7 zurb-foundation drop-down-menu
已经阅读了很多这方面的主题,但似乎没有任何工作.
刚开始一个项目,我几乎从基础文档网站复制/粘贴代码,它不起作用.
继承人我的HTML测试
<body>
<header>
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1><a href="#">My Site</a></h1>
</li>
<li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="active"><a href="#">Right Button Active</a></li>
<li class="has-dropdown">
<a href="#">Right Button with Dropdown</a>
<ul class="dropdown">
<li><a href="#">First link in dropdown</a></li>
</ul>
</li>
</ul>
<!-- Left Nav Section -->
<ul class="left">
<li><a href="#">Left Nav Button</a></li>
</ul>
</section>
</nav>
</header>
<footer>
<p>Some copyright and legal notices here. Maybe use the © symbol a bit.</p>
</footer>
</body>
</html>
对于样式表,它是空的,甚至试图完全删除它只是为了确定但同样的事情,它的点落下.
我错过了什么想法？谢谢
编辑:
确定如此发现的东西,zurbs基础文档页面上显示的代码,在复制/粘贴时不起作用,但是如果我使用检查器并从他们的示例中复制html,它就可以了.然而,当你缩小浏览器时,会出现带有菜单按钮的3行但是当它悬停在它上面时,它不会下拉,单击也没有任何作用,如何解决这个问题？
那个html是
<nav class="top-bar" data-topbar="">
<ul class="title-area">
<li class="name">
<h1><a href="#">My Site</a></h1>
</li>
<li class="toggle-topbar menu-icon"><a href="">Menu</a></li>
</ul>
<section class="top-bar-section" style="left: 0%;">
<!-- Right Nav Section -->
<ul class="right show-for-large-up">
<li class="active"><a href="#">Right Button Active</a></li>
<li class="has-dropdown not-click">
<a href="#">Right Button Dropdown</a>
<ul class="dropdown"><li class="title back js-generated"><h5><a href="javascript:void(0)">Back</a></h5></li>
<li><a href="#">First link in dropdown</a></li>
</ul>
</li>
</ul>
</section></nav>
即时加载这些脚本
<script src="js/vendor/modernizr.js"></script>
<!-- Foundation Top Bar -->
<script src="js/foundation.min.js"></script>
<script src="js/foundation/foundation.topbar.js"></script>
<script src="js/foundation/foundation.offcanvas.js"></script>
我也尝试删除topbar和offcanvas脚本,只使用foundation.min.js,没有任何效果,按钮出现但没有下拉可用.
小智 16
我今天遇到了同样的问题,并且做了同样的事情,我发现它是这行中的"非点击":
<li class="has-dropdown not-click">
我添加了它,现在它工作得很好(对我来说(仅限？)).
<script>
$(document).foundation();
</script>
没有使它工作,但以下做了
$(document).ready(function(){
$(document).foundation();
});
| 归档时间： |
|
| 查看次数： |
5395 次 |
| 最近记录： |