的 Demo

Question

正如我所做的那样，每当鼠标悬停时菜单都是作为下拉列表。但是，我想将更改 更改为表格菜单，如下图所示。（我不擅长画画，所以我刚制作的图像，是一个草图，让你惊讶我正在寻找的东西。）

表格中的每一行都有 4列，以便修复到48 weeks作为示例：

第1周|第2周|第3周|第4周

第5周|第6周|第7周|第8周

...

第45周|第46周|第47周|第48周

的 Demo

HTML：

<ul id="out_per_chart">
<li>
    <div class="yearly">
        <a class="_link_year" href="/SiteAssets/OutputPerformanceChartForYear.aspx?week=48&amp;month=12&amp;year=2014">2014</a>
        <div class="container1">
            <ul class="sub-menu1">
                <li>
                    <div class="monthly">
                        <div class="title">Monthly</div>
                        <div class="container2">
                            <ul class="sub-menu2"></ul>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="weekly">
                        <div class="title">Weekly</div>
                        <div class="container3">
                            <ul class="sub-menu3"></ul>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</li>
</ul>

CSS：

#out_per_chart .title {
    border: 2px solid #2676ac;
    padding: 10px 30px;
    width: 40px;
    color: #2676ac !important;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin-bottom: 10px;
    margin-top: 20px;
}

    #out_per_chart .title:hover {
        border: 2px solid #259add;
        cursor: default !important;
        background: #259add;
        color: #FFF !important;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        text-decoration: none !important;
    }

.container1 {
    position: absolute;
    padding-left: -10px;
    padding-top: -5px;
}

.container2 {
    position: absolute;
    margin-top: -15px;
    margin-left: 50px;
}

.container3 {
    position: absolute;
    margin-top: -15px;
    margin-left: 50px;
}

._link {
    text-decoration: none;
    border: 2px solid #2676ac;
    padding: 7px 20px 7px 20px;
    width: 30px;
    color: #2676ac !important;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

    ._link:hover {
        text-decoration: underline;
        cursor: pointer;
        border: 2px solid #259add;
        background: #259add;
        color: #FFF !important;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }

._link_year {
    text-decoration: none;
    border: 2px solid #2676ac;
    padding: 10px 30px;
    width: 30px;
    color: #2676ac !important;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

    ._link_year:hover {
        text-decoration: underline;
        cursor: pointer;
        border: 2px solid #259add;
        background: #259add;
        color: #FFF !important;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }

#out_per_chart li {
    width: 300px;
    height: 30px;
    margin-bottom: 25px;
    list-style-type: none;
}

    #out_per_chart li.week_num, #out_per_chart li.month_num {
        margin-left: 60px;
        margin-top: -25px;
        margin-bottom: 25px;
    }

#out_per_chart .weekly {
    margin-top: -10px;
}

使用Javascript：

$(document).ready(function () {
    $(".ms-WPHeader").find(".ms-WPHeaderTd").closest("table").hide();
    $(".monthly").hover(function () {
        var num_week;
        var num_month = 12;
        var current_year = 2014;
        for (i = num_month; i >= 1; i--) {
            $(".sub-menu2").after("<li class='month_num'><a class='_link' href='/SiteAssets/OutputPerformanceChartForMonth.aspx?week=" + i + "&month=" + i + "&year=" + current_year + "'>Month " + i + "</a></li>");
        }
    },

    function () {
        $(".month_num").hide();
    });

    $(".weekly").hover(function () {
        var num_week = 48;
        var num_month;
        var current_year = 2014;
        for (i = num_week; i >= 1; i--) {
            $(".sub-menu3").after("<li class='week_num'><a class='_link' href='/SiteAssets/OutputPerformanceChartForWeek.aspx?week=" + i + "&month=" + (parseInt(i / 4.01) + 1) + "&year=" + current_year + "'>Week " + i + "</a></li>");
        }
    },

    function () {
        $(".week_num").hide();
    });
});

Answer 1

ul li .yearly:hover .container1{
    display:block !important;
    top:26px;
    left:5px;
}
.container1 {
   display: none !important;
   position: absolute;
}

http://jsfiddle.net/kisspa/NwV8f/3/

Answer 2

选中 Demo Fiddle 。

我已经更新了CSS，HTML和JS。很难在这里公布所有的变化。

主要亮点：

HTML：

<table class="sub-menu2"></table>
<table class="sub-menu3"></table>

<强> JS：

$(".monthly").hover(function () {
        var num_week;
        var num_month = 12;
        var current_year = 2014;
         $(".sub-menu2").after("<tr class='month_num'>");
        for (i = num_month; i >= 1; i--) {
            $(".container2").show();
             if(i%4 == 0){
                $(".sub-menu2").after("</tr><tr class='month_num'>");
            }                
            $(".sub-menu2").after("<td><a class='_link' href='/SiteAssets/OutputPerformanceChartForMonth.aspx?week=" + i + "&month=" + i + "&year=" + current_year + "'>Month " + i + "</a></td>");
        }
    },

    function () {
        $(".container2").hide();
});

同样适用于Weekly。

为避免重复元素（检查菜单是否存在），

if(!($(".container2").has('tr').length)){}

CSS：

#out_per_chart tr {
    width: 300px;
    height: 30px;
    margin-bottom: 25px;
    list-style-type: none;
}

如何使用Javascript将下拉列表菜单更改为表格菜单

的 Demo

2 个答案:

主要亮点：