[英]Adding a custom navbar to an specific section in Fullpage.js
使用Fullpage.js,我在第1部分中添加了Bootstrap定制导航栏,以实现“我们的功能效果”,并且当您单击选项卡时,该部分中的文本会更改。
Bootstrap代码可以工作,但是我想在第1部分的底部设置导航栏,但它会不断将自身添加到第0部分。
实现这一目标的最佳方法是什么?
CSS:
#section0 {
background:url("images/vd48-main.jpg") center top no-repeat;
background-image: url("images/vd48-main.jpg");
background-position: fixed;
background-color: #000000;
}
#section1 {
background:url("images/vd48-main.jpg") center top no-repeat;
background-image: url("images/vd48-main.jpg");
background-position: fixed;
}
#section2 img{
margin: 20px 0 0 52px;
background-image: url(images/vd48-main.jpg);
padding: 30% 0 0 0;
}
#section3 img{
bottom: 0px;
position: absolute;
margin-left: -420px;
}
.intro p{
width: 50%;
margin: 0 auto;
font-size: 1.5em;
}
.twitter-share-button{
position: absolute;
z-index: 99;
right: 149px;
top: 9px;
}
.fp-tooltip{
color: #AAA;
}
#fp-nav span, .fp-slidesNav span{
border-color: #AAA;
}
#fp-nav li .active span, .fp-slidesNav .active span{
background: #AAA;
}
.nav-tabs{
overflow: hidden;
position: fixed;
bottom: 0;
width: 100%;
}
.bg-inverse{
z-index: 999;
}
HTML:
<ul id="menu">
<li data-menuanchor="firstPage"><a href="#firstPage">Visit Counter</a></li>
<li data-menuanchor="secondPage"><a href="#secondPage">Feature Image</a></li>
<li data-menuanchor="3rdPage"><a href="#3rdPage">Big Image</a></li>
<li data-menuanchor="4thpage"><a href="#4thpage">Product Specs 1</a></li>
<li data-menuanchor="4thpage"><a href="#4thpage">Product Specs 2</a></li>
<li data-menuanchor="4thpage"><a href="#4thpage">Product Specs 3</a></li>
<li data-menuanchor="4thpage"><a href="#4thpage">Customer Care</a></li>
<li data-menuanchor="4thpage"><a href="#4thpage">Our App</a></li>
<li data-menuanchor="4thpage"><a href="#4thpage">Reservation/Contact</a></li>
</ul>
<div id="fullpage">
<!-- Section 0 -->
<div class="section" id="section0">
<h1>Van Dutch</h1>
<p>Visit Counter lorem ipsum </p>
</div>
<!--Section 1 -->
<div class="section" id="section1">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
<li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
</ul>
<div class="container">
<h2>Dynamic Tabs</h2>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3>Menu 3</h3>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
</div>
</div>
<!--Section 2 -->
<div class="section" id="section2">
<div class="intro">
<h1>Example</h1>
<p>HTML markup example to define 4 sections.</p>
<img src="imgs/example2.png" alt="example" />
</div>
</div>
<!--Section 3 -->
<div class="section" id="section3">
<div class="intro">
<h1>Working On Tablets</h1>
<p>
Designed to fit to different screen sizes as well as tablet and mobile devices.
<br /><br /><br /><br /><br /><br />
</p>
</div>
<img src="imgs/tablets.png" alt="tablets" />
</div>
<!--Left Sidebar -->
<div id="fp-nav" class="left" style="margin-top: -43.5px;">
<ul>
<li>
<a href="#" class="active"><span></span></a>
<div class="fp-tooltip left">fullPage.js</div>
</li>
<li>
<a href="#" class=""><span></span></a>
<div class="fp-tooltip left">Powerful</div>
</li>
<li>
<a href="#" class=""><span></span></a><div class="fp-tooltip left">Amazing</div>
</li>
<li>
<a href="#" class=""><span></span></a><div class="fp-tooltip left">Simple</div>
</li>
</ul>
</div>
我设法使用CSS修复了问题。
#section1 .nav-tabs{
width: 100%;
position: absolute;
bottom: 0;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.