欢迎来到php自学网~
阅读模式:

Jquery树状导航效果

查看:1779  回复:0  类型:  来源:php自学网  标签 jquery

    Jquery树状导航效果预览和下载,适合做分类的功能。

预览地址:http://zixuephp.net/uploads/file/20170627/1498562938456515.html

预览效果:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Jquery树状导航效果</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
    <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
    <style type="text/css">
        .menulist-n{  display:block;  margin-left:40px;  border-left:2px solid #eee;  padding-left:0px;  }
        .menulist-n span {  color:#eee;  }
        .menulist-n .addline{  color:#eee;  }
        .menulist-n li {  color:#000;  }
        .menulist-n li .topnames { font-size:15px; color:#323d53; font-weight:bold;}
        .menulist-n span {  color:#000;  }
        .menulist-n .adds {  width:12px;  height:12px;  color:#000;  display:inline-block;  line-height:12px;  text-align:center;  border:1px solid #000;  font-size:12px;  margin-right:0px;  }
        .menulist-n li:hover{  color:#005580;  cursor: pointer;  }
        .menulist-n>li {  list-style: none;  min-height:25px;  line-height:25px;  text-align:left;  font-size:14px;  }
        .menulist-n-l{  display:block;  border-left:2px solid #eee;  margin-left:25px;  padding-left:0px;  }
        .menulist-n-l>li{  list-style: none;  min-height:25px;  line-height:25px;  text-align:left;  font-size:14px;  }
        .mvremove:hover{color:red;}
        .mvedit:hover{color:#03C4F7;}
        .mvedit,.mvremove{font-size:12px;}
    </style>
</head>
<body>

<table  style="width:100%; margin:0 auto;" >
    <tr>
        <td colspan="4">
            <ul class="menulist-n">

                <li>
                    <span class="addline">---</span>
                    <span class="adds">-</span>
                    <span class="topnames">分类管理</span>
                    <span class="glyphicon glyphicon-remove mvremove"></span>
                    <span class="glyphicon glyphicon-edit mvedit"></span>

                    <ul class="menulist-n-l">
                        <li>
                            <span class="addline">---</span>
                            文章分类
                            <span class="glyphicon glyphicon-remove mvremove"></span>
                            <span class="glyphicon glyphicon-edit mvedit"></span>
                        </li>
                        <li>
                            <span class="addline">---</span>
                            标签分类
                            <span class="glyphicon glyphicon-remove mvremove"></span>
                            <span class="glyphicon glyphicon-edit mvedit"></span>
                        </li>
                        <li>
                            <span class="addline">---</span>
                            友链分类
                            <span class="glyphicon glyphicon-remove mvremove"></span>
                            <span class="glyphicon glyphicon-edit mvedit"></span>
                        </li>
                        <li>
                            <span class="addline">---</span>
                            测试分类
                            <span class="glyphicon glyphicon-remove mvremove"></span>
                            <span class="glyphicon glyphicon-edit mvedit"></span>
                        </li>
                        <li>
                            <span class="addline">---</span>
                            管理分类
                            <span class="glyphicon glyphicon-remove mvremove"></span>
                            <span class="glyphicon glyphicon-edit mvedit"></span>
                        </li>

                    </ul>
                </li>

                <li>
                    <span class="addline">---</span>
                    <span class="adds">-</span>
                    <span class="topnames">php自学网</span>
                    <span class="glyphicon glyphicon-remove mvremove"></span>
                    <span class="glyphicon glyphicon-edit mvedit"></span>

                    <ul class="menulist-n-l">
                        <li>
                            <span class="addline">---</span>
                            PHP
                            <span class="glyphicon glyphicon-remove mvremove"></span>
                            <span class="glyphicon glyphicon-edit mvedit"></span>
                        </li>
                        <li>
                            <span class="addline">---</span>
                            MYSQL
                            <span class="glyphicon glyphicon-remove mvremove"></span>
                            <span class="glyphicon glyphicon-edit mvedit"></span>
                        </li>
                        <li>
                            <span class="addline">---</span>
                           LINUX
                            <span class="glyphicon glyphicon-remove mvremove"></span>
                            <span class="glyphicon glyphicon-edit mvedit"></span>
                        </li>
                        <li>
                            <span class="addline">---</span>
                            NGINX
                            <span class="glyphicon glyphicon-remove mvremove"></span>
                            <span class="glyphicon glyphicon-edit mvedit"></span>
                        </li>
                        <li>
                            <span class="addline">---</span>
                            REDIS
                            <span class="glyphicon glyphicon-remove mvremove"></span>
                            <span class="glyphicon glyphicon-edit mvedit"></span>
                        </li>

                    </ul>
                </li>

                <li>
                    <span class="addline">---</span>
                    <span class="adds">-</span>
                    <span class="topnames">文章排行</span>
                    <span class="glyphicon glyphicon-remove mvremove"></span>
                    <span class="glyphicon glyphicon-edit mvedit"></span>

                    <ul class="menulist-n-l">
                        <li>
                            <span class="addline">---</span>
                            点击量
                            <span class="glyphicon glyphicon-remove mvremove"></span>
                            <span class="glyphicon glyphicon-edit mvedit"></span>
                        </li>
                        <li>
                            <span class="addline">---</span>
                            阅读量
                            <span class="glyphicon glyphicon-remove mvremove"></span>
                            <span class="glyphicon glyphicon-edit mvedit"></span>
                        </li>
                        <li>
                            <span class="addline">---</span>
                            点赞量
                            <span class="glyphicon glyphicon-remove mvremove"></span>
                            <span class="glyphicon glyphicon-edit mvedit"></span>
                        </li>
                        <li>
                            <span class="addline">---</span>
                            浏览量
                            <span class="glyphicon glyphicon-remove mvremove"></span>
                            <span class="glyphicon glyphicon-edit mvedit"></span>
                        </li>

                    </ul>
                </li>

                <li>
                    <span class="addline">---</span>
                    <span class="adds">-</span>
                    <span class="topnames">网站排行</span>
                    <span class="glyphicon glyphicon-remove mvremove"></span>
                    <span class="glyphicon glyphicon-edit mvedit"></span>

                    <ul class="menulist-n-l">
                        <li>
                            <span class="addline">---</span>
                            php自学网
                            <span class="glyphicon glyphicon-remove mvremove"></span>
                            <span class="glyphicon glyphicon-edit mvedit"></span>
                        </li>
                        <li>
                            <span class="addline">---</span>
                            php自学网
                            <span class="glyphicon glyphicon-remove mvremove"></span>
                            <span class="glyphicon glyphicon-edit mvedit"></span>
                        </li>
                        <li>
                            <span class="addline">---</span>
                            php自学网
                            <span class="glyphicon glyphicon-remove mvremove"></span>
                            <span class="glyphicon glyphicon-edit mvedit"></span>
                        </li>
                        <li>
                            <span class="addline">---</span>
                            php自学网
                            <span class="glyphicon glyphicon-remove mvremove"></span>
                            <span class="glyphicon glyphicon-edit mvedit"></span>
                        </li>

                    </ul>
                </li>

            </ul>
        </td>
    </tr>
</table>


<script type="text/javascript">

    $(document).ready(function() {

        //导航列表效果
        $('.menulist-n>li').each(function () {
            var adds = '';
            $(this).children('.topnames').click(function () {
                adds = $(this).siblings('.adds').text();

                $(this).siblings('.adds').text('-');
                $(this).siblings('.menulist-n-l').slideDown();

            });
            var addsdom = $(this).children('.adds');
            addsdom.click(function () {

                adds = addsdom.text();

                if (adds == '+') {
                    addsdom.text('-');
                    addsdom.parent().children('ul').slideDown();
                } else {
                    addsdom.parent().children('ul').slideUp();
                    addsdom.text('+');
                }
            });
        });

    });

</script>
</body>
</html>

点击显示隐藏的树状导航栏分类效果。

分享到:
0 0

*有问题之处烦请在评论中指出非常感谢!
不是我想要的内容,继续搜索:

扫描二维码手机查看

发布评论:


登录:
  表情:
评论话题
推荐阅读:
centos 7 安装 redis 3.2.9   阅读:2452php中地址引用&的真正理解-变量引用、函数引用、对象引用   阅读:1474十张GIF让你弄懂递归等概念   阅读:1687linux top命令详解   阅读:1489centos 7 安装 samba 服务   阅读:1656面试的时候和你谈理想,是理想or入坑?   阅读:1504浅谈javascript的函数节流   阅读:1370用php从1乘到100的值   阅读:2016mysql数据库性能的基本优化   阅读:1750mysql共享锁和排他锁详解   阅读:1834phpexcel 超简单从excel表格一键导入数据到数据库教程   阅读:5076纯干货,程序员面试的超实用技巧   阅读:1276mysql5.7开启sql日志的配置   阅读:1916最新centos7 搭建LNMP环境(centos7.2+php7+mysql5.7+nginx1.11+redis3.2)   阅读:3953phpexcel 超简单从excel表格一键导入数据到数据库教程   阅读:5076用php从1乘到100的值   阅读:2016session与cookie的区别   阅读:1502HTTP 1.1 协议详解   阅读:1808shell脚本批量删除几天前的文件   阅读:2051Nginx 配置文件详解   阅读:1549把php session 会话保存到redis   阅读:2226什么是天使轮?什么是A轮融资?B轮融资?   阅读:1094php设置cookie为HttpOnly防止XSS攻击   阅读:2468php中地址引用&的真正理解-变量引用、函数引用、对象引用   阅读:1474简单的DOS攻击之死亡之ping详解   阅读:11858ajax+php 实现一个简单的在线聊天室功能(附带源码)   阅读:3046比phpexcel还要简单的excel CSV 一键导入数据到数据库   阅读:1840phpexcel 超简单从excel表格一键导入数据到数据库教程   阅读:5076phpexcel 超简单从excel表格一键导入数据到数据库教程   阅读:5076shell脚本批量删除几天前的文件   阅读:2051HTTP 1.1 协议详解   阅读:1808php中地址引用&的真正理解-变量引用、函数引用、对象引用   阅读:1474纯干货,程序员面试的超实用技巧   阅读:1276知乎百万赞作者告诉你:年薪百万的人都在靠什么赚钱   阅读:1618Mysql在大型网站的应用架构演变   阅读:1623mysql数据库性能的基本优化   阅读:1750linux教程,鸟哥私房菜(pdf全集)   阅读:1663centos 7 安装 samba 服务   阅读:1656php 生成图片,给图片加水印   阅读:2257什么是天使轮?什么是A轮融资?B轮融资?   阅读:1094javascript点击复制内容   阅读:1607给网站添加一键新浪微博登录的功能   阅读:2486Nginx 配置文件详解   阅读:1549html5 离线缓存的使用   阅读:1408php连接redis   阅读:1929linux命令中执行php脚本   阅读:1622简单的DOS攻击之死亡之ping详解   阅读:11858php打印九九乘法表   阅读:1945一步步带你,如何网站架构   阅读:1355移动端自适应rem原理   阅读:4822