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”之前，添加数据工具栏所以它看起来像这样

<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>

基金会顶栏不起作用

3 个答案: