Zurb 基础中的菜单不起作用答案

【问题标题】：Menu in Zurb foundation not workZurb 基础中的菜单不起作用
【发布时间】：2016-04-13 22:02:08
【问题描述】：

我最初是一名后端开发人员，我对前端略知一二。在这个周末，我做了一个爱好，然后卡在这里。

我按照这个教程：http://foundation.zurb.com/apps/docs/#!/menu-bar 不知道为什么菜单显示不正确：

源 HTML view-source:http://localhost:8080/vyhndotnet/registration.jsp#

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Developer life</title>
<link rel="stylesheet"
    href="/vyhndotnet/css/foundation.min.css" />
<link rel="stylesheet"
    href="/vyhndotnet/css/app.css" />
<link rel="stylesheet"
    href="/vyhndotnet/foundation-icon-font-3/foundation-icons.css" />
    <script>$(document).foundation();</script>
</head>
<body>

        <ul class="dark menu-bar">
            <li><a href="#">Homepage</a></li>
            <li><a href="#">Core Java</a></li>
            <li><a href="#">JSP</a></li>
            <li><a href="#">Web service</a></li>
            <li><a href="#">Hibernate</a></li>
        </ul>


<div class="row">
    <div class="large-4 columns">
        <h3>Đăng ký thành viên</h3>
        <form action="/vyhndotnet/Registration" method="post">
            <label>Tên đăng nhập: </label>
            <input type="text" name="username" />

            <label>Số điện thoại: </label> 
            <input type="text" name="mobile_number" />

            <label>Email: </label> 
            <input type="text" name="email" /> 

            <label>Quốc gia: </label> 
            <input type="text" name="nation" />


            <button class="small button" type="reset"><i class="fi-loop"></i>&nbsp;Làm lại</button>
            <button class="small button" type="submit"><i class="fi-key"></i>&nbsp;Đăng ký</button>
        </form>
    </div>
</div>


<script src="js/vendor/jquery.min.js"></script>
<script src="js/vendor/what-input.min.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/app.js"></script>
<a href="../../index.jsp" class="medium button"><i class="fi-home"></i>&nbsp;Homepage</a>
<br />
Copyright &copy; 2016 VyHN
</body>
</html>

结果：

（foundation.min.css 加载正确，链接未损坏）
帮助我正确显示菜单使用 Zurb 基础。谢谢！

【问题讨论】：

我希望<script>$(function() { $(document).foundation(); });</script>
@mplungjan 我听从了你的建议，但还是不行。
对不起。我有一个错误，本教程适用于web apps（foundation.zurb.com/apps/docs/#!/menu-bar），而不是web page。但我仍然希望以 Zurb 基础方式正确显示菜单。
您已链接到 Foundation for Apps 文档，但您的标签显示此问题与 Foundation for Sites 有关。这是两个独立的框架，您使用的是哪一个？

标签： html css responsive-design zurb-foundation zurb-foundation-6

【解决方案1】：

使用<ul class="dropdown menu" data-dropdown-menu>

</head>
<body>
<div class="v_menu">
    <ul class="dropdown menu" data-dropdown-menu>
        <li><a href="#">HOMEPAGE</a></li>
        <li><a href="#">CORE JAVA</a>
            <ul class="menu">
                <li><a href="#">OOP</a></li>
                <li><a href="#">Collections</a></li>
            </ul>       
        </li>
        <li><a href="#">JSP</a></li>
        <li><a href="#">WEB SERVICE</a></li>
        <li><a href="#">HIBERNATE</a></li>
    </ul>
</div>

然后结果：

参考：
http://foundation.zurb.com/sites/docs/dropdown-menu.html#horizontal
http://foundation.zurb.com/sites/docs/menu.html

【讨论】：