为了保证在浏览的时候不影响整体的效果,我们就需要使用onePageNav,也就是页内导航
最后效果可见:http://about.phodal.com或者http://gmszone.github.io/RESUME/
源码可见:https://github.com/gmszone/RESUME/tree/master/Web
jQuery onePageNav
示例如下所示
<ul id="nav">
<li class="current"><a href="#section-1">Section 1</a></li>
<li><a href="#section-2">Section 2</a></li>
<li><a href="#section-3">Section 3</a></li>
<li><a href="#section-4">Section 4</a></li>
<li><a href="#section-5">Section 5</a></li>
<li><a href="http://google.com" class="external">Some other link</a></li>
</ul>
$('#nav').onePageNav({
filter: ':not(.external)'
});
结合
注意:由于与timeliner发生冲突,暂时因为时间原因没有修复,所以无法达到平滑滚动效果,但是可以实现跳转
也就是说我们要把简历分为四个部分,即
- 在校情况
- 项目经历
- 其他项目、经历
- 专业技能
并且用<div id="section-$">来定义这些块。
原来的导航修改完如下
<div class="collapse navbar-collapse navbar-ex1-collapse subMenu">
<ul class="nav navbar-nav" id="top-nav">
<li href="#section-1"><a href="#">在校情况</a></li>
<li ><a href="#section-2" >项目经历</a></li>
<li ><a href="#section-3" >其他项目、经历</a></li>
<li ><a href="#section-4" >专业技能</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">简历下载 <span class="glyphicon glyphicon-download-alt"></span> <b class="caret"></b></a>
<ul class="dropdown-menu" >
<li><a href="https://github.com/gmszone/RESUME/blob/master/Personal/all.pdf?raw=true">全版本</a></li>
<li><a href="https://github.com/gmszone/RESUME/blob/master/Personal%20Web/web.pdf?raw=true">web专用</a></li>
<li><a href="https://github.com/gmszone/RESUME/blob/master/Personal%20Embeded/Embeded.pdf?raw=true">嵌入式专用</a></li>
<li><a href="https://github.com/gmszone/RESUME/blob/master/word/Phodal%20Huang.docx?raw=true">Word</a></li>
</ul>
</li>
</ul>
<form name="search-highlight" id="search-highlight" method="post" action="#" class="navbar-form navbar-right" role="search">
<input name="term" id="term" class="text form-control2" placeholder="页面内搜索"/>
<input type="submit" name="submit" id="submit" class="btn btn-info" value="搜索" />
</form>
</div><!-- /.navbar-collapse -->
最后再用div就OK了。