jquery做的sidemenu

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

效果图： 　　

         

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>

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

 

      下载链接

 

 

　        

 

posted on 2017-08-17 19:54  Romayn  阅读(433)  评论(0)    收藏  举报

导航