DIV CSS 佈局教程網

本例子使用json數據,拼接ul和li來實現的
效果圖：




1.准備json數據:
. 代碼如下:
var menuData = [
            {id:0,pid:-1,name:"訂購產品",url:"",children:[
                {id:1,pid:0,name:"電腦配件",url:"http://www.jb51.net",children:[
                    {id:20,pid:1,name:"cpu",url:"http://www.jb51.net",children:[
                        {id:30,pid:20,name:"Intel",url:"http://www.jb51.net",children:[
                            {id:3000,pid:30,name:"Intel 01",url:""},
                            {id:3001,pid:30,name:"Intel 02",url:""},
                            {id:3002,pid:30,name:"Intel 03",url:""},
                            {id:3003,pid:30,name:"Intel 04",url:""},
                            {id:3004,pid:30,name:"Intel 05",url:""},
                            {id:3005,pid:30,name:"Intel 06",url:""},
                            {id:3006,pid:30,name:"Intel 07",url:""},
                            {id:3007,pid:30,name:"Intel 08",url:""},
                            {id:3008,pid:30,name:"Intel 09",url:""}
                        ]},
                        {id:31,pid:20,name:"AMD",url:"http://www.jb51.net",children:[
                            {id:3100,pid:31,name:"AMD 01",url:""},
                            {id:3101,pid:31,name:"AMD 02",url:""},
                            {id:3102,pid:31,name:"AMD 03",url:""},
                            {id:3103,pid:31,name:"AMD 04",url:""},
                            {id:3104,pid:31,name:"AMD 05",url:""},
                            {id:3105,pid:31,name:"AMD 06",url:""},
                            {id:3106,pid:31,name:"AMD 07",url:""},
                            {id:3107,pid:31,name:"AMD 08",url:""},
                            {id:3108,pid:31,name:"AMD 09",url:""}
                        ]}
                    ]},
                    {id:21,pid:1,name:"內存",url:"http://www.jb51.net"},
                    {id:22,pid:1,name:"硬盤",url:"http://www.jb51.net"},
                    {id:23,pid:1,name:"主板",url:"http://www.jb51.net"},
                    {id:24,pid:1,name:"顯卡",url:"http://www.jb51.net"},
                    {id:25,pid:1,name:"顯示器",url:"http://www.jb51.net"},
                    {id:26,pid:1,name:"主機箱",url:"http://www.jb51.net"},
                    {id:27,pid:1,name:"主機箱電源",url:"http://www.jb51.net"},
                    {id:28,pid:1,name:"鍵鼠(有線)",url:"http://www.jb51.net"},
                    {id:29,pid:1,name:"鍵鼠(無線)",url:"http://www.jb51.net"}
                ],url:"http://www.jb51.net"},
                {id:101,pid:0,name:"監控器材",children:[
                    {id:102,pid:101,name:"攝像頭",url:"http://www.jb51.net"},
                    {id:103,pid:101,name:"攝像頭",url:"http://www.jb51.net"},
                    {id:104,pid:101,name:"攝像頭",url:"http://www.jb51.net"},
                    {id:112,pid:101,name:"攝像頭",url:"http://www.jb51.net"},
                    {id:113,pid:101,name:"攝像頭",url:"http://www.jb51.net"},
                    {id:114,pid:101,name:"攝像頭",url:"http://www.jb51.net"},
                    {id:115,pid:101,name:"攝像頭",url:"http://www.jb51.net"},
                    {id:116,pid:101,name:"攝像頭",url:"http://www.jb51.net"},
                    {id:117,pid:101,name:"攝像頭",url:"http://www.jb51.net"}
                ],url:"http://www.jb51.net"},
                {id:201,pid:0,name:"數碼產品",children:[
                    {id:202,pid:201,name:"攝像頭",url:"http://www.jb51.net"}
                ],url:"http://www.jb51.net"},
                {id:301,pid:0,name:"網絡產品",children:[
                    {id:302,pid:301,name:"攝像頭",url:"http://www.jb51.net"}
                ],url:"http://www.jb51.net"},
                {id:401,pid:0,name:"打印耗材",children:[
                    {id:402,pid:401,name:"打印機",url:"http://www.jb51.net"},
                    {id:403,pid:401,name:"油墨",url:"http://www.jb51.net"},
                    {id:404,pid:401,name:"紙張",url:"http://www.jb51.net"},
                    {id:405,pid:401,name:"攝像頭",url:"http://www.jb51.net"},
                    {id:406,pid:401,name:"攝像頭",url:"http://www.jb51.net"},
                    {id:407,pid:401,name:"攝像頭",url:"http://www.jb51.net"},
                    {id:408,pid:401,name:"攝像頭",url:"http://www.jb51.net"}
                ],url:"http://www.jb51.net"}
            ]},
            {id:1000,pid:-1,name:"我的訂單",url:"",children:[
                {id:1001,pid:1000,name:"已過期訂單",url:""},
                {id:1001,pid:1000,name:"已付款訂單",url:""}
            ]},
            {id:2000,pid:-1,name:"公司信息",url:"",children:[
                {id:2001,pid:2000,name:"最新新聞",url:""},
                {id:2002,pid:2000,name:"公司地址",url:""}
            ]}
        ];

2.html代碼:
. 代碼如下:
<div id="menu"><ul id="baseMenu"></ul></div>

3.解析json數據(plugin-menu.js文件):剛學會寫jquery插件,寫的還比較亂,湊合著看吧
. 代碼如下:
(function($){
    $.fn.extend({
        menu:function(options){
            var defaults = {
                data:[],
                ulId:"baseMenu"
            };
            var options = $.extend(defaults, options);
            // 開始拼接ul,li
            $.each(options.data,function(i,v){
                var li = $("<li id='"+options.data[i].id+"' name='"+options.data[i].pid+"'></li>");
                var _a = $("<a>"+options.data[i].name+"</a>");
                _a.attr("href",options.data[i].url)
                    .appendTo(li);

                _each(options.data[i],li);
                li.appendTo($("#"+options.ulId));
            });
            // 給li添加事件
            $(this).find("li").hover(function(){
                var id = $(this).attr("id");
                $(this).find("ul[name='"+id+"']").show();
            },function(){
                var id = $(this).attr("id");
                $(this).find("ul[name='"+id+"']").hide();
            });
        }
    });
})(jQuery);

因為支持無限級,所以肯定會用到遞歸方法:
. 代碼如下:
function _each(data,li){
    if(data==undefined||data.children==undefined){
        return false;
    }
    var ul = $("<ul name='"+data.id+"' style='display:none;'></ul>");

    $.each(data.children,function(i,v){
        var _li = $("<li id='"+data.children[i].id+"' name='"+data.children[i].pid+"'></li>");
        var _a = $("<a>"+data.children[i].name+"</a>");
        _a.attr("href",data.children[i].url)
            .attr("target","_blank")
            .appendTo(_li);

        if(data.children[i].children!=undefined){
            _each(data.children[i],_li);
        }
        _li.appendTo(ul);
    });
    ul.appendTo(li);
}

4.調用插件:
. 代碼如下:
$(function() {
    $("#menu").menu({data:menuData,ulId:"baseMenu"});
});

最後,css樣式:
. 代碼如下:
ul,li{list-style:none;padding:0px;margin:0px;}
#menu *{line-height:30px;}
#menu a{text-decoration:none;}
#menu ul{text-align:left;}
#menu>ul>li{text-align:center;width:80px;float:left;}
#menu>ul>li>a{color:#000;}
#menu>ul>li:hover{background:#F0F0F0;}
#menu>ul>li ul{display:none;width:150px;position:absolute;background:#c1cd94;box-shadow:2px 2px 2px #000;-webkit-box-shadow:2px 2px 2px #000;
　　-moz-box-shadow:2px 2px 2px #123;}
#menu>ul>li>ul li{padding-left:5px; position:relative;}
#menu>ul>li>ul li>a{color:#000;}
#menu>ul>li>ul li:hover{background:#d3dbb3;}
#menu>ul>li>ul>li ul{left:150px; top:0px;}