菜单Fullpage.js

KolaCaine 发表于 Dev

可乐因

我有一个问题要问，我尝试使用fullpage.js创建一个新项目。

但是，我的问题是，如何制作菜单，我尝试使用：

问题是，例如当我在porfolio上单击时，就可以了，我在第二张幻灯片上，但是..我无法单击另一个选项卡

（HTML部分）

<nav>
    <ul>
        <li data-menuanchor="Accueil"><a href="#Acc">Accueil</a></li>
        <li data-menuanchor="PortFolio"><a href="#Port">PortFolio</a></li>
        <li data-menuanchor="Contact"><a href="#Con">Contact</a></li>
    </ul>
</nav>

对于JS部分：

<script type="text/javascript">
    $(document).ready(function () {
        $('#fullpage').fullpage({
            sectionsColor: ['', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'], 
            anchors: ['Accueil', 'PortFolio', 'Contact'],

        });
        $.fn.fullpage.setScrollingSpeed(1500);
    });
</script>

感谢您的帮助:)

可乐因

u！很抱歉，我一无所获。

解决的办法是更改我的CSS文件。

使用此配置：

#menu li {
	display:inline-block;
	margin: 10px;
	color: #000;
	background:#fff;
	background: rgba(255,255,255, 0.5);
	-webkit-border-radius: 4px; 
            border-radius: 4px; 
}
#menu li.active{
	background:#666;
	background: rgba(0,0,0, 0.5);
	color: #fff;
}
#menu li a{
	text-decoration:none;
	color: #000;
}
#menu li.active a:hover{
	color: #000;
}
#menu li:hover{
	background: rgba(255,255,255, 0.8);
}
#menu li a,
#menu li.active a{
	padding: 9px 18px;
	display:block;
}
#menu li.active a{
	color: #fff;
}
#menu{
	position:fixed;
	top:0;
	left:0;
	height: 40px;
	z-index: 70;
	width: 100%;
	padding: 0;
	margin:0;
}