给网站侧边添加一个可收缩的自定义导航分类

作者：鹏仔

html+css+js实现一个侧边栏自定义导航，可用于引导用户，或者广告等都是可以的。

代码分享给大家，请自行复制使用。
CSS代码

复制

.left-box-btn {

        width:20px;

        padding:5px 0;

        background:#6F8EC5;

        color:#fff;

        font-size:16px;

        font-weight:bold;

        text-align:center;

        position:fixed;

        top:300px;

        left:0;

        border-top-right-radius:6px;

        border-bottom-right-radius:6px;

        cursor:pointer;

}

.left-box-btn:hover {

        transition:all 1.3s;

        background:#9E61A9;

}

.left-box {

        width:120px;

        position:fixed;

        top:100px;

        left:0;

        z-index:8888;

        box-shadow:1px 1px 1px #000;

        display:none;

}

.left-box-a {

        color:#fff;

        font-size:16px;

        font-weight:bold;

        line-height:35px;

        text-align:center;

        text-decoration:none;

        display:block;

        width:100%;

        height:35px;

        background:#000;

}

.left-box-a:hover {

        transition:all 1s;

        background:#6F8EC5;

}

#TpShutDown {

        color:#fff;

        font-size:14px;

        line-height:25px;

        font-weight:bold;

        display:block;

        text-align:center;

        width:50%;

        height:25px;

        background:#6F8EC5;

        position:absolute;

        top:-25px;

        right:0;

        border-top-left-radius:6px;

        border-top-right-radius:6px;

        cursor:pointer;

}

#TpShutDown:hover {

        background:#9E61A9;

}

Markup代码

复制

<div class="left-box-btn" id="TpLeftBoxBtn">展开</div>

<div class="left-box" id="TpLeftBox">

    <span id="TpShutDown">关闭</span>

    <a class="left-box-a" target="_blank" href="#">提交收录</a>

    <a class="left-box-a" target="_blank" href="#">审核状态</a>

    <a class="left-box-a" target="_blank" href="#">SEO实战</a>

    <a class="left-box-a" target="_blank" href="#">SEO外链</a>

    <a class="left-box-a" target="_blank" href="#">在线工具</a>

    <a class="left-box-a" target="_blank" href="#">在线音乐</a>

    <a class="left-box-a" target="_blank" href="#">模板之家</a>

    <a class="left-box-a" target="_blank" href="#">线报之家</a>

    <a class="left-box-a" target="_blank" href="#">资源大全</a>

    <a class="left-box-a" target="_blank" href="#">骗子公布</a>

    <a class="left-box-a" target="_blank" href="#">登录&注册</a>

</div>

JavaScript代码

复制

   var TpLeftBox = document.getElementById('TpLeftBox');

    var TpShutDown = document.getElementById('TpShutDown');

    var TpLeftBoxBtn = document.getElementById('TpLeftBoxBtn');

    TpShutDown.onclick = function() {

        TpLeftBox.style.display = 'none';

        TpLeftBoxBtn.style.display = 'block';

    }

    TpLeftBoxBtn.onclick = function() {

        TpLeftBox.style.display = 'block';

        TpLeftBoxBtn.style.display = 'none';

    }

版权声明

1、转载或引用本网站内容须注明原网址，并标明本网站网址(http://www.cece56.com)。

2、转载或引用本网站中的署名文章，请按规定向原作者支付稿酬【除免费外】。

3、对于不当转载或引用本网站内容而引起的民事纷争、行政处理或其他损失，本网站不承担责任。

4、对不遵守本声明或其他违法、恶意使用本网站内容者，本网站保留追究其法律责任的权利。

本网站所提供的信息，只供参考之用。 本网站及其雇员一概毋须以任何方式就任何信息传递或传送的失误、不准确或错误对用户或任何其他人士负任何直接或间接的责任。 在法律允许的范围内，本网站在此声明,不承担用户或任何人士就使用或未能使用本网站所提供的信息或任何链接或项目所引致的任何直接、间接、附带、从属、特殊、惩罚性或惩戒性的损害赔偿（包括但不限于收益、预期利润的损失或失去的业务、未实现预期的节省）。 本网站所提供的信息，若在任何司法管辖地区供任何人士使用或分发给任何人士时会违反该司法管辖地区的法律或条例的规定或会导致本网站或其第三方代理人受限于该司法管辖地区内的任何监管规定时，则该等信息不宜在该司法管辖地区供该等任何人士使用或分发给该等任何人士。用户须自行保证不会受限于任何限制或禁止用户使用或分发本网站所提供信息的当地的规定。 本网站图片，文字之类版权申明，因为网站可以由注册用户自行上传图片或文字，本网站无法鉴别所上传图片或文字的知识版权，如果侵犯，请及时通知我们，本网站将在第一时间及时删除。 凡以任何方式登陆本网站或直接、间接使用本网站资料者，视为自愿接受本网站声明的约束。

本文地址：http://cece56.cn/forum.php?mod=viewthread&tid=290