Question

我从一个后端开发人员开始，我对前端了解一点。在这个周末，我做了一些爱好然后停留在这里。

我遵循这个教程：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基础。谢谢！

Answer 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

Zurb基金会的菜单不起作用

1 个答案: