基础5简单导航
基础5简单导航
提问于 2014-10-02 02:47:50
如何在foundation 5中制作简单的顶层菜单？是否需要使用topbar，或者是否有其他可能性？我的实际代码是：
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1><a href="#">Site Name</a></h1>
</li>
<li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li class="active"><a href="#">Domov</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li><a href="#">Contact</a></li>
</ul>
</section>
</nav>但我对手机版有问题。导航中断并在菜单下跳转，而不是在简单的按钮中折叠。有人能告诉我为什么吗？如何修复它，或者让导航变得更简单？谢谢。
回答 3
Stack Overflow用户
发布于 2014-10-02 06:19:12
这是一个标准的基础.top-bar导航。不要忘记包含必要的js文件并对其进行初始化。
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1><a href="#">My Site</a></h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></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 Dropdown</a>
<ul class="dropdown">
<li><a href="#">First link in dropdown</a></li>
<li class="active"><a href="#">Active 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>Stack Overflow用户
发布于 2014-10-07 01:40:47
只需添加以下内容
.top-bar {
overflow: visible;
}DEMO
Stack Overflow用户
发布于 2015-04-07 20:36:21
我认为，你可以使用图标栏，而不是使用topbar，它可以很容易地满足你的需求。UI对于移动端和桌面版都是一样的。查看下面的链接：http://foundation.zurb.com/docs/components/icon-bar.html
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26148429
复制相关文章
相似问题
腾讯云开发者
