基金会顶栏不起作用

I'm trying to use foundation to build a navigation menu. The black bar loads with my content, but some features don't work. For example, the drop down menu doesn't work when the mouse hovers over it. Also the proper mouseover effects arent working. Am I forgetting something?

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

http://jsfiddle.net/Sbt75/755/

Here is my code

这是我的代码

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

3 个解决方案

#1

Here is working Fiddle.

这是工作小提琴。

Firstly, you have to put data-topbar attribute into your nav element.

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

Secondly, you have to put li with menu into your code:

其次,你必须把li菜单放到你的代码中:

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

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

#2

Hey I think you are missing one atribute, before role="navigation" on the nav tag, add data-topbar

嘿,我认为你缺少一个属性,在nav标签上的role =“navigation”之前,添加数据顶部栏

so it would look like this

所以它看起来像这样

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

Haven't found anything else missing

没有发现任何其他遗漏

#3

Here is the way that the foundation documents use:

以下是基础文档使用的方式:

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

Try changing your nav tag out with this and let me know what happens.

尝试使用此更改导航标记,并让我知道会发生什么。

#1