Question

我尝试了这个，但汉堡包只显示＆＃34;菜单＆＃34;。我使用的是基础6，并在Opera，Firefox，Chrome和Edge上进行了测试。

<!DOCTYPE html>
<html>

   <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation</title>
    <link rel="stylesheet" href="stylesheets/app.css" />
    <script src="bower_components/modernizr/modernizr.js"></script>
  </head>
  <body>
    <body>
        <div class="contain-to-grid sticky">
            <nav class="top-bar" data-topbar>
                <ul class="title-area">
                   <li class="name"><h1><a href="#"><span>My Website</span></a></h1></li>
                   <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
                </ul>
            </nav>
        </div>

          <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/foundation/js/foundation.min.js"></script>
    <script src="js/app.js"></script>
    </body>
</html>

Answer 1

You have opened the <body> tag twice. Try the following:

<!DOCTYPE html>
<html>
   <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation</title>
    <link rel="stylesheet" href="stylesheets/app.css" />
    <script src="bower_components/modernizr/modernizr.js"></script>
  </head>
  <body>
    <div class="contain-to-grid sticky">
        <nav class="top-bar" data-topbar>
           <ul class="title-area">
              <li class="name"><h1><a href="#"><span>My Website</span></a></h1></li>
              <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
           </ul>
        </nav>
    </div>
    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/foundation/js/foundation.min.js"></script>
    <script src="js/app.js"></script>
    </body>
</html>

Check your CSS, if proper style is done for hamburger and also check if hamburger file is exist. It could be due to certain reasons and difficult to identify the reason with the code provided.

Answer 2

这里显示..

请确认调用scripts / css是否正确。

<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Foundation</title>
  <link rel="stylesheet" href="stylesheets/app.css" />
</head>

<body>
  <div class="contain-to-grid sticky">
    <nav class="top-bar" data-topbar>
      <ul class="title-area">
        <li class="name">
          <h1>
            <a href="#"><span>My Website</span></a></h1>
        </li>
        <li class="toggle-topbar menu-icon">
          <a href="#"></a>
        </li>
      </ul>
    </nav>
  </div>
  <script src="bower_components/jquery/dist/jquery.min.js"></script>
  <script src="bower_components/foundation/js/foundation.min.js"></script>
  <script src="js/app.js"></script>
</body>

</html>

http://codepen.io/fabiovaz/pen/vLmEVw

Answer 3

您是否在app.scss文件中包含了基础图标？如果不添加此行：

@include foundation-menu-icon;

基金会汉堡包没有显示

3 个答案: