基础zurb中的toggle-topbar问题

时间:2013-08-05 13:56:59

标签: html css zurb-foundation

当我调整页面大小时,我会看到切换顶部栏文本,但是当我点击它时它不会显示菜单。

这是我的代码:

这是我做的包含(我同时使用CodeIgniter并且包含的​​文件很好):

 <!-- CSS FILES -->
  <link rel="stylesheet" href="<?php print base_url("assets/css"); ?>/header.css">
  <link rel="stylesheet" href="<?php print base_url("assets/css"); ?>/app.css">
  <link rel="stylesheet" href="<?php print base_url("assets/css"); ?>/content.css">


  <!-- JS FILES -->
  <script src="<?php print base_url("assets/plugin/foundation/js/vendor/"); ?>/custom.modernizr.js"></script>

这是我的顶栏:

</head>
<body>
<div class="fixed">
    <nav class="top-bar">
        <ul class="title-area">
        <li class="name">
            <a href="<?php site_url(); ?>"><img src="<?php print base_url("/assets/img"); ?>/logo_header.png" class="logo_header"></a>
        </li>
        <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
    </ul>

    <section class="top-bar-section">
  <!-- Right Nav Section -->
        <ul class="right">
            <li><a href="#"><img src="<?php print base_url("/assets/img"); ?>/connexion_button.png"></a></li>
            <li><a href="#"><img src="<?php print base_url("/assets/img"); ?>/register_button.png" class="header_button"></a></li>
        </ul>
    </section>
</nav>
</div>
</body>
</html>

我使用Foundation Zurb 4.3.1。我哪里错了?

1 个答案:

答案 0 :(得分:0)

与我的问题完全相同,以下是帮助我解决问题的步骤:

  1. Re-Downloaded updated Complete Foundation
  2. 包含我之前缺少的html元(视口)标记。
  3. 我以这种方式将文件包含在我的页面中:

    <link rel="stylesheet" href="/css/foundation/foundation.css"/>
     <link rel="stylesheet" href="/css/foundation/app.css"/>
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <script src="/js/jquery-1.11.2.min.js"></script>
    <script src="/js/foundation/foundation.js"></script>
    <script src="/js/foundation/foundation.topbar.js"></script>

  4. 在jquery而不是js中调用基础功能如下:
    <script>
    $(document).ready(function() {
    $(document).foundation();
    });
    </script>