基础顶栏不起作用

Question

我正在尝试使用基础来构建导航菜单。黑色栏加载了我的内容，但某些功能不起作用。例如，当鼠标悬停在下拉菜单上时，下拉菜单不起作用。适当的鼠标悬停效果也不起作用。我是不是忘记了什么？

这是我的代码

<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>

    <!--Jquery-->
    <script src="js/jquery-1.11.2.min.js" type="text/javascript"></script>

    <!--Foundation-->
    <script src="js/foundation.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="css/foundation.css" type="text/css" />
    <link rel="stylesheet" href="css/normalize.css" type="text/css" />


</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div class="contain-to-grid sticky">
        <nav class="top-bar" role="navigation" data-options="is_hover: true">
            <ul class="title-area">
                <li class="name">
                    <h1><a href="#">VoIP Innovations</a></h1>
                </li>
            </ul>
            <section class="top-bar-section">
                <ul class="left">
                    <li class="has-dropdown">
                        <a href="#">Services</a>
                        <ul class="dropdown">
                            <li><a href="#">Origination</a></li>
                            <li><a href="#">Termination</a></li>
                            <li><a href="#">E911</a></li>
                            <li><a href="#">Hosted Billing</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Nav 2</a></li>
                    <li><a href="#">Nav 3</a></li>
                    <li><a href="#">Nav 4</a></li>
                    <li><a href="#">Nav 5</a></li>
                </ul>
            </section>
        </nav>
        </div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

        </asp:ContentPlaceHolder>
    </div>
    </form>
    <script>
        $(document).foundation();
    </script>

Answer 1

嘿，我认为你缺少一个属性，在 nav 标签上的 role="navigation" 之前，添加 data-topbar

所以它看起来像这样

<nav class="top-bar" data-topbar role="navigation" data-options="is_hover: true">

没有发现其他遗漏的东西

Answer 2

基金会文件使用的方式如下：

<nav class="top-bar" data-topbar role="navigation">

试着用这个改变你的导航标签，让我知道会发生什么。

Answer 3

这里正在工作Fiddle。

首先，您必须将 data-topbar 属性放入 nav 元素中。

其次，您必须将 li 和菜单放入您的代码中：

<li class="toggle-topbar menu-icon">
   <a href="#">
      <span>Menu</span>
   </a>
</li>

整个HTML:

<nav class="top-bar" data-topbar role="navigation" data-options="is_hover: true">
   <ul class="title-area">
      <li class="name">
         <h1>
            <a href="#">VoIP Innovations</a>
         </h1>
      </li>
      <li class="toggle-topbar menu-icon">
         <a href="#">
            <span>Menu</span>
         </a>
      </li>
   </ul>
   <section class="top-bar-section">
      <ul class="left">
         <li class="has-dropdown">
            <a href="#">Services</a>
            <ul class="dropdown">
               <li>
                  <a href="#">Origination</a>
               </li>
               <li>
                  <a href="#">Termination</a>
               </li>
               <li>
                  <a href="#">E911</a>
               </li>
               <li>
                  <a href="#">Hosted Billing</a>
               </li>
            </ul>
         </li>
         <li>
            <a href="#">Nav 2</a>
         </li>
         <li>
            <a href="#">Nav 3</a>
         </li>
         <li>
            <a href="#">Nav 4</a>
         </li>
         <li>
            <a href="#">Nav 5</a>
         </li>
      </ul>
   </section>
</nav>

基础顶栏不起作用

Foundation top-bar isn't working

css

zurb-foundation