fullpage.js无法显示菜单

发布于 2022-09-11 16:06:44 字数 3679 浏览 49 评论 0

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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

衣神在巴黎 2022-09-18 16:06:44

看了一下代码,左里面根本没有写菜单,PC的菜单在另一个div里面,直接隐藏了,侧边和菜单和PC显示的菜单不是一个

原来是傀儡 2022-09-18 16:06:44

在fullpage中有如下一段代码:

$htmlBody.css({
    'overflow' : 'hidden',
    'height' : '100%'
});

它的意思就是超出document的窗口范围,元素就会被隐藏,而使用的transition动画中的translate移动的是render之后的document文档,所以看不见菜单,

解决思路:可以将html中的内联样式style="overflow: hidden; height: 100%;"去掉,就可以看到你想要的效果,这里的样式是fullpage插件添加的,你可以将fullpage中上面列举的代码注释,其它的调整,自己看着整就行了。

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文