jq+css+html簡單實現導航下拉菜單

相信導航欄下拉菜單是web開發最常見的一個item了.這里就不做介紹了，直接上code.

Html部分

 <div class="_nav">
        <ul id="sddm">
            <li><a href="/Home/Index" id="a_nav_Home" class="a_nav_Menu">Home</a>
                <div id="nav_Home" class="div_nav_Menu">
                </div>
            </li>
            <li><a href="#" id="a_nav_Employee" class="a_nav_Menu">Employee</a>
                <div id="nav_Employee" class="div_nav_Menu">
                    @Html.ActionLink("Test", "Test", new { area = "BMOManagement", controller = "Test" })
                    @Html.ActionLink("Test", "Test", new { area = "BMOManagement", controller = "Test" })
                    @Html.ActionLink("Test", "Test", new { area = "BMOManagement", controller = "Test" })
                    @Html.ActionLink("Test", "Test", new { area = "BMOManagement", controller = "Test" })
                    @Html.ActionLink("Test", "Test", new { area = "BMOManagement", controller = "Test" })
                </div>
            </li>
            <li><a href="#" id="a_nav_Billing" class="a_nav_Menu">Billing</a>
                <div id="nav_Billing" class="div_nav_Menu">
                    <a href="#">B Test1</a>
                    <a href="#">B Test2</a>
                </div>
            </li>
            <li><a href="#" id="a_nav_Forecast" class="a_nav_Menu">Forecast</a>
                <div id="nav_Forecast" class="div_nav_Menu">
                    <a href="#">F Test1</a>
                    <a href="#">F Test2</a>
                    <a href="#">F Test3</a>
                </div>
            </li>
        </ul>
    </div>

CSS部分

/*********************------------------------------Menu CSS------------------------*********************/

#sddm {
            margin: 0 auto;
        }

            #sddm li {
                margin: 0;
                padding: 0;
                list-style: none;
                float: left;
                font: bold 12px arial;
            }

                #sddm li a {
                    display: block;
                    margin: 0 1px 0 0;
                    padding: 4px 10px;
                    width: 60px;
                    color: #49AB6E;
                    text-align: center;
                    text-decoration: none;
                }

                    #sddm li a:hover {
                        background: #49AB6E;
                        color: white;
                    }

            #sddm div {
                position: absolute;
                visibility: hidden;
                margin: 0;
                padding: 0;
            }

                #sddm div a {
                    position: relative;
                    display: block;
                    margin: 0;
                    width: auto;
                    white-space: nowrap;
                    text-align: center;
                    text-decoration: none;
                    background: #49AB6E;
                    color: white;
                    font: 12px arial;
                }

                    #sddm div a:hover {
                        background: #E5D6B8;
                        color: white;
                    }

JS部分

 

var timeout = 1;
var closetimer = 0;
var ddmenuitem = 0;

// close showed layer
function mclose() {
    if (ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}

// cancel close timer
function mcancelclosetime() {
    if (closetimer) {
        window.clearTimeout(closetimer);
        closetimer = null;
    }
}

// close layer when click-out
document.onclick = mclose;
// -->

$(function () {
    // open hidden layer
    $(".a_nav_Menu").mouseover(function () {
        var currentId = $(this).attr("id");

        // cancel close timer
        mcancelclosetime();

        // close old layer
        if (ddmenuitem) ddmenuitem.style.visibility = 'hidden';
        $("#" + currentId.replace("a_","")).width($("#" + currentId).parent().width() - 1);
        $("#" + currentId).css({ "background": "#49AB6E", "color": "white" });

        // get new layer and show it
        ddmenuitem = document.getElementById(currentId.replace("a_", ""));
        ddmenuitem.style.visibility = 'visible';
    });

    // go close timer
    $(".a_nav_Menu").mouseout(function () {
        var currentId = $(this).attr("id");
        $("#" + currentId).css({ "background": "", "color": "#49AB6E" });
        
        closetimer = window.setTimeout(mclose, timeout);
    });

    // go close timer
    $(".div_nav_Menu").mouseout(function () {
        var currentId = $(this).attr("id");
        $("#a_" + currentId).css({ "background": "", "color": "#49AB6E" });
        closetimer = window.setTimeout(mclose, timeout);
    });

    $(".div_nav_Menu").mouseover(function () {
        var currentId = $(this).attr("id");
        $("#a_" + currentId).css({ "background": "#49AB6E", "color": "white" });
        mcancelclosetime();
    });
})

 

 

這里只是簡單實現一下，如果頁面要求比較高，可能就不是很實用了，這個只是當時接了一個私活，因為比較注重業務而不是code所以就寫的比較快。

作　　者：請叫我頭頭哥
出　　處：http://www.cnblogs.com/toutou/
關於作者：專注於基礎平台的項目開發。如有問題或建議，請多多賜教！
版權聲明：本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接。
特此聲明：所有評論和私信都會在第一時間回復。也歡迎園子的大大們指正錯誤，共同進步。或者直接私信我
聲援博主：如果您覺得文章對您有幫助，可以點擊文章右下角“推薦”一下。您的鼓勵是作者堅持原創和持續寫作的最大動力！