fullpage.js无法显示菜单
PC版菜单没问题，移动版侧边栏菜单无法显示。请教如何解决？
点击查看demo
附上源码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" id="animate-css" href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" type="text/css" media="all">
<link rel="stylesheet" id="bootstrap-css" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" media="all">
<link rel="stylesheet" id="style-css" href="https://demo.nicetheme.xyz/grace-style1/wp-content/themes/grace/style.css" type="text/css" media="all">
</head>
<body class="off-canvas-nav-left">
<div id="header" class="navbar-fixed-top">
<div class="container">
<div class="logo"></div>
<div role="navigation" class="site-nav primary-menu">
<div class="menu-fix-box">
<ul>
<li><a href="">菜单1</a></li>
<li><a href="">菜单2</a></li>
<li><a href="">菜单3</a></li>
</ul>
</div>
</div>
<div class="navbar-mobile hidden-md hidden-lg">
<button class="navbar-toggle collapsed">
|||
</button>
<div class="collapse navbar-collapse">
<ul>
<li><a href="">菜单1</a></li>
<li><a href="">菜单2</a></li>
<li><a href="">菜单3</a></li>
</ul>
</div>
<div class="body-overlay"></div>
</div>
</div>
</div>
<div id="fullpage">
<div class="section">
<h1>第一屏</h1>
</div>
<div class="section">
<h1>第二屏</h1>
</div>
<div class="section">
<h1>第三屏</h1>
</div>
<div class="section">
<h1>第四屏</h1>
</div>
<div class="section">
<h1>第五屏</h1>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.8/jquery.fullPage.js"></script>
<script>
$(document).ready(function(){
$('#fullpage').fullpage({
//verticalCentered:false,//设为false自己控制样式，默认为true
sectionsColor:['black','yellow','red','blue','green'],//为section设置background-color属性
anchors:['page1','page2','page3','page4','page5'],//定义锚链接，默认值为[]
//scrollingSpeed:500,//设置页面滚动速度，单位毫秒，默认为700
navigation:true,
navigationPosition:'right',//定义小圆点位置
navigationTooltips:['page1','page2','page3','page4','page5']//小圆点上面的提示信息
});
});
</script>
<script type="text/javascript">
/* <![CDATA[ */
var suxingme_url = {};
/* ]]> */
</script>
<script type="text/javascript" src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://demo.nicetheme.xyz/grace-style1/wp-content/themes/grace/js/plugins.min.js"></script>
<script type="text/javascript" src="https://demo.nicetheme.xyz/grace-style1/wp-content/themes/grace/js/suxingme.js"></script>
</body>
</html>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
看了一下代码，左里面根本没有写菜单，PC的菜单在另一个div里面，直接隐藏了，侧边和菜单和PC显示的菜单不是一个
在fullpage中有如下一段代码：
它的意思就是超出document的窗口范围，元素就会被隐藏，而使用的transition动画中的translate移动的是
render之后的document文档，所以看不见菜单，解决思路：可以将html中的内联样式
style="overflow: hidden; height: 100%;"去掉，就可以看到你想要的效果，这里的样式是fullpage插件添加的，你可以将fullpage中上面列举的代码注释，其它的调整，自己看着整就行了。