Boostrap实现仿百度百科当前页快捷导航栏效果

最新推荐文章于 2021-07-08 16:23:07 发布

luozhangwen

最新推荐文章于 2021-07-08 16:23:07 发布

阅读量1.9k

点赞数

分类专栏： Bootstrap 文章标签： bootstrap 导航百度百科

本文链接：https://blog.csdn.net/luozhangwen/article/details/49538473

版权

Bootstrap 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Bootstrap实现跨屏自适应仿百度百科当前页快捷导航栏效果. 挺好用的, 用户体验效果比较好, 适合内容栏目比较多的页面.

代码可以直接复制粘贴到html后缀文件直接运行.


<!DOCTYPE html>
<html>
<head lang="en">
<title>访百度百科三级导航当前页导航</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="author" content="找网王,zhaowangwang.com">
<meta name="wap-font-scale" content="no">
<link rel="icon" href="favicon.ico">
<link href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css?ver=1.8" rel="stylesheet" />
<style>

/***SideBar**/
.sideBar {
    z-index: 999999;
    position: fixed;
    top: -1px;
    bottom: -1px;
    width: auto;
    background-color: #f9f9f9;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    right: 10px;
    left: auto;
    padding-top: 5px;
    overflow: scroll;
}

.sideBar-icon{
    z-index: 999999;
    position: fixed;
    top: auto;
    bottom: 40px;
    width: auto;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    right: 10px;
    left: auto;
}

.sideBar .nav>li{
    width: 150px;
    overflow: hidden;
    border-bottom: 1px solid #e7e7e7;
}

.sideBar .nav>li>a{
    padding:5px 10px;
}

.sideBar-title-icon{
    margin-top: -4px;
}

</style>
</head>
<body data-spy="scroll" data-target="#myScrollspy" >

    <div id="container" class="container">
        
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-9 col-lg-8">
                <div id="carrerType-1" style="background-color:red;width:100%;height:960px;"></div>        
                <div id="carrerType-2" style="background-color:blue;width:100%;height:960px;"></div>
                <div id="carrerType-3" style="background-color:yellow;width:100%;height:960px;"></div>
        </div>
    </div><!-- container end -->
    
                
    <div id="myScrollspy" class="sideBar collapse">
        <div class="widget-box">
            <div class="widget-header widget-header-default">
                <h2>快捷导航</h2>
                <div class="widget-toolbar sideBar-title-icon">
                    <a class="btn btn-minier" href="#myScrollspy"  role="button" data-toggle="collapse" aria-controls="myScrollspy"><span class="glyphicon glyphicon-remove-circle" style="font-size: 20px"></span></a>
                </div>
            </div>
        
            <div class="widget-body">
                <ul class="nav nav-pills nav-stacked">
                        <li><a href="http://zhaowangwang.com" >找网王</a></li>
                        <li><a href="#carrerType-1" >业界资讯</a></li>
                    
                        <li><a href="#carrerType-2" >技术门户</a></li>
                    
                        <li><a href="#carrerType-3" >开源下载</a></li>
                 </ul>
            </div>
        </div>
    </div>
    
    <div class="sideBar-icon">
        <a class="btn btn-default" role="button" data-toggle="collapse"
            href="#myScrollspy" aria-expanded="false"
            aria-controls="myScrollspy"> <span
            class="glyphicon glyphicon-th-list"></span>
        </a>
    </div>


    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js?ver=1.8"></script>
    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js?ver=1.8"></script>

</body>
</html>

在线DEMO参考 : 找网王>职业网址导航>程序员