jquery做的sidemenu

最新推荐文章于 2024-08-30 08:17:13 发布

转载最新推荐文章于 2024-08-30 08:17:13 发布 · 419 阅读

0 ·

CC 4.0 BY-SA版权

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

文章标签：

#javascript #ViewUI

本文介绍了一个功能丰富的侧边菜单插件，该插件结构简单且易于实现。通过提供的HTML结构示例和使用方法，展示了如何加载数据并渲染成侧边菜单。此外，还利用slimScroll插件实现了滚动条效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

效果图：　　

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>