阅读模式:

Jquery树状导航效果

查看:2602  回复: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

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

扫描二维码手机查看

发布评论:


登录:
  表情:
评论话题
推荐阅读:
ajax+php 实现一个简单的在线聊天室功能(附带源码)   阅读:4774php显示刚刚、几分钟前、几小时前、几天前的函数   阅读:3596shell脚本破解十位数内的所有纯数字rar加密压缩包脚本   阅读:4882mongodb设置shell开机启动脚本   阅读:4377栈和堆的区别   阅读:2415网站性能优化-页面静态缓存   阅读:3082一键分享到QQ空间、QQ好友、新浪微博、微信代码   阅读:22160phpexcel 超简单从数据库一键导出数据到excel教程   阅读:3942php删除一个文件夹内的所有文件夹和文件   阅读:2854php压缩页面的html代码一行显示   阅读:3945浅谈javascript的函数节流   阅读:2216TCP的三次握手(建立连接)和四次挥手(关闭连接)   阅读:464phpexcel 超简单从数据库一键导出数据到excel教程   阅读:3942关于PHP程序员技术职业生涯规划   阅读:254封装php redis缓存操作类   阅读:4122mysql5.7主从同步中binlog同步模式详解   阅读:341“米粉节”背后的故事——小米网抢购系统开发实践   阅读:2223session与cookie的区别   阅读:2237centos 7 修改系统屏幕分辨率   阅读:24704mysql5.7主从同步中binlog同步模式详解   阅读:341网站性能优化-页面静态缓存   阅读:3082centos 7搭建zabbix3.4   阅读:2216web性能测试工具ab的测试方法   阅读:2609mysql数据一键导出到csv文件   阅读:2973移动端js触摸touch详解(附带案例源码)   阅读:8338csv文件一键导入数据到mysql数据库   阅读:3550最简单的Banner轮播淡入淡出效果代码及实现思路(附带源码)   阅读:8612web项目高并发量网站解决方案   阅读:2438php 读取和设置redis的键值   阅读:4271一步步带你,如何网站架构   阅读:2143移动端js触摸touch详解(附带案例源码)   阅读:8338centos 7.2 添加php7 的 php-fpm 开机启动   阅读:13482php 获取当前前后年、月、星期、日、时分秒的时间   阅读:3056爱编程,也爱健康   阅读:1899HTTP 1.1 协议详解   阅读:3645TCP的三次握手(建立连接)和四次挥手(关闭连接)   阅读:464centos 7 安装 nginx-1.11.10   阅读:4595csv文件一键导入数据到mysql数据库   阅读:3550面试的时候回去等通知,等电话的真实意思   阅读:12720一键分享到QQ空间、QQ好友、新浪微博、微信代码   阅读:22160一键分享到QQ空间、QQ好友、新浪微博、微信代码   阅读:22160“米粉节”背后的故事——小米网抢购系统开发实践   阅读:2223最新centos7 搭建LNMP环境(centos7.2+php7+mysql5.7+nginx1.11+redis3.2)   阅读:6443linux top命令详解   阅读:3872php 统计网页打开耗时和脚本运行内存   阅读:3666mysql数据库性能的基本优化   阅读:2606mysql5.7开启sql日志的配置   阅读:4022最简单的Banner轮播淡入淡出效果代码及实现思路(附带源码)   阅读:8612一步步带你,如何网站架构   阅读:2143php 使用 smtp.php 类在线发送邮件功能   阅读:3169