如何在 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>
但我对移动版本有疑问。导航已损坏,在菜单下跳转不会在简单按钮中折叠。有人能告诉我为什么吗?以及如何修复它或进行更简单的导航?谢谢。
最佳答案
这是一个标准的基础 .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>
关于css - Foundation 5 简单导航,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26148429/