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/
关于作者：专注于基础平台的项目开发。如有问题或建议，请多多赐教！
版权声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接。
特此声明：所有评论和私信都会在第一时间回复。也欢迎园子的大大们指正错误，共同进步。或者直接私信我
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角“推荐”一下。您的鼓励是作者坚持原创和持续写作的最大动力！