首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

Bootstrap+Timeliner+Github+JQUERY创建软件工程师的简历(三)-OnePageNav

2013-10-22 
Bootstrap+Timeliner+Github+JQUERY创建程序员的简历(三)---OnePageNav为了保证在浏览的时候不影响整体的

Bootstrap+Timeliner+Github+JQUERY创建程序员的简历(三)---OnePageNav

为了保证在浏览的时候不影响整体的效果,我们就需要使用onePageNav,也就是页内导航

最后效果可见:http://about.phodal.com 或者http://gmszone.github.io/RESUME/

源码可见:https://github.com/gmszone/RESUME/tree/master/Web



Bootstrap+Timeliner+Github+JQUERY创建软件工程师的简历(三)-OnePageNav

jQuery onePageNav项目地址:https://github.com/davist11/jQuery-One-Page-Nav示例如下所示
  <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了。

热点排行