jquery做的sidemenu

最新推荐文章于 2022-05-13 15:26:25 发布

weixin_30955617

最新推荐文章于 2022-05-13 15:26:25 发布

阅读量370

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/romayn/p/7384092.html

版权

功能丰富，结构和实现简单。

效果图：　　

html结构：

<div class="sidemenu">
     <div class="sidemenu-icons">
          <div class="sidemenu-icon">
           ........
          </div>
     </div>
     <div class="sidemenu-items">
           <div class="sidemenu-item">
           ........
          </div>
     </div>
     <div class="sidemenu-collapse">
     </div>
</div>

使用方法：

<body>
    <div id="menu1" style="height:500px;"></div>
</body>
</html>
<script>


    $.ajax({
        url: "data.txt",
        success: function (text) {
            var data = eval('(' + text + ')');
            $("#menu1").sidemenu({
                data: data,
                collapse: false,
                itemclick: function (item) {
                    // alert("itemclick:" + item.text);
                },
                itemRenderer: function (item) {
                    if (!item.children) {

                        return '<a href="' + item.url + '" target="xxx">' + item.text + '</a>';
                    }
                    else {
                        return '<a>' + item.text + '</a>';
                    }
                }
            });
            $(".sidemenu-items").slimScroll({
                width: 150,
                height: "100%"
            })

        }
    });

</script>

其他就不描述了，自己下载体验把。

下载链接

转载于:https://www.cnblogs.com/romayn/p/7384092.html

weixin_30955617

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery做的sidemenu

功能丰富，结构和实现简单。效果图：　　 html结构：<div class="sidemenu"> <div class="sidemenu-icons"> <div class="sidemenu-icon"> ........ </di...
复制链接

扫一扫