基础汉堡包不显示

我尝试过，但汉堡包不显示“菜单”。我正在使用Foundation 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>

来源

2016-01-07 John John

基金会大师任何解决方案？ –

您已打开<body>标记两次。请尝试以下操作：

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

检查您的CSS，如果汉堡适当的样式，并检查汉堡包文件是否存在。这可能是由于某些原因，很难用提供的代码来识别原因。

来源

2016-01-07 06:28:19

感谢迈汉，我固定了身体标签，但汉堡仍然失踪。 –

这可能是由于某些原因，如果您添加了正确的样式来加载汉堡包，请检查您的CSS文件，并检查汉堡包是否存在。你有网上链接检查它？ –

这里是显示..

请确认如果调用脚本/ 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

来源

2016-01-07 18:08:12 fabiovaz

你有没有包含在app.scss文件的基础上的图标？如果不添加此行：

@include foundation-menu-icon;

来源

2016-10-20 12:25:54 Lukas

基础汉堡包不显示

回答

相关问题