css+javascript下拉菜单

最新推荐文章于 2020-11-19 20:40:15 发布

原创最新推荐文章于 2020-11-19 20:40:15 发布 · 234 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #JavaScript #WCF #jQuery #WinForm #ViewUI

JAVASCRIPT 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS和jQuery实现的下拉菜单效果。该菜单包含多个技术分类，如.NET技术、编程语言等，并展示了如何通过jQuery监听鼠标事件来控制子菜单的显示与隐藏。

用li，ul制作的菜单，类似于博客园主要面中的竖型菜单，但样式和它的不一样。可以随意修改。代码如下：

<script type="text/javascript" src="csjs/jquery-1.3.2.min.js">
</script>
<style type="text/css">
<!-- * {
    margin: 0;
    padding: 0;
    border: 0;
}

body {
    font-family: arial, 宋体, serif;
    font-size: 12px;
}

#nav {
    line-height: 24px;
    list-style-type: none;
    background: #666;
    width: 80px;
}

#nav a {
    display: block;
    width: 80px;
    text-align: center;
}

#nav a:link {
    color: #666;
    text-decoration: none;
}

#nav a:visited {
    color: #666;
    text-decoration: none;
}

#nav a:hover {
    color: #FFF;
    text-decoration: none;
    font-weight: bold;
}

#nav li {
    position: relative;
    width: 80px;
    background: #CCC;
}

#nav li a:hover {
    background: #999;
}

#nav li ul {
    line-height: 27px;
    list-style-type: none;
    text-align: left;
    left: -999em;
    width: 150px;
    position: absolute;
}

#nav li ul li {
    float: left;
    width: 150px;
    background: #ccc;
	margin-left:1px;
	margin-bottom: 1px;
}



#nav li ul a {
    display: block;
    width: 150px;
    width: 150px;
    text-align: left;
    padding-left: 24px;
}
#nav li ul a:link {
    color: #666;
    text-decoration: none;
}
#nav li ul a:visited {
    color: #666;
    text-decoration: none;
}
#nav li ul a:hover {
    color: #F3F3F3;
    text-decoration: none;
    font-weight: normal;
    background: #C00;
}
#nav li:hover ul {
    left: auto;
}
#nav li.sfhover ul {
    left: 80px;
    top: 0px;
}
#content {
    clear: left;
}
-->
</style>
<script type=text/javascript>
    $(function(){
        $.each($("#nav li"), function(index, domEle){
            $(domEle).bind("mouseover", function(){
                $(domEle).addClass("sfhover");
                
            });
            $(domEle).bind("mousedown", function(){
                $(domEle).addClass("sfhover");
            });
            
            $(domEle).bind("mouseup", function(){
                $(domEle).addClass("sfhover");
            });
            $(domEle).bind("mouseout", function(){
                $(domEle).removeClass("sfhover");
            });
        });
    });
</script>
</head>
<ul id="nav">
    <li>
        <a href="#">.NET技术</a>
        <ul>
            <li>
                <a href="#">.NET新手区</a>
            </li>
            <li>
                <a href="#">ASP.NET</a>
            </li>
            <li>
                <a href="#">C#</a>
            </li>
            <li>
                <a href="#">WinForm</a>
            </li>
            <li>
                <a href="#">Silverlight</a>
            </li>
            <li>
                <a href="#">WCF</a>
            </li>
			<li>
                <a href="#">CLR</a>
            </li>
			<li>
                <a href="#">WPF</a>
            </li>
			<li>
                <a href="#">WCF</a>
            </li>
			<li>
                <a href="#">WF</a>
            </li>
			<li>
                <a href="#">XAN</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#">编程语言</a>
        <ul>
            <li>
                <a href="#">JAVA</a>
            </li>
            <li>
                <a href="#">C++</a>
            </li>
            <li>
                <a href="#">PHP</a>
            </li>
            <li>
                <a href="#">Ruby</a>
            </li>
            <li>
                <a href="#">Python</a>
            </li>
            <li>
                <a href="#">Flex</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#">软件设计</a>
        <ul>
            <li>
                <a href="#">建构设计</a>
            </li>
            <li>
                <a href="#">设计模式</a>
            </li>
            <li>
                <a href="#">面向对象</a>
            </li>
            <li>
                <a href="#">系统设计</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#">WEB前端</a>
        <ul>
            <li>
                <a href="#">Javascript</a>
            </li>
            <li>
                <a href="#">JQuery</a>
            </li>
            <li>
                <a href="#">Extjs</a>
            </li>
            <li>
                <a href="#">Dojo</a>
            </li>
			<li>
                <a href="#">Dwr</a>
            </li>
			<li>
                <a href="#">Zk</a>
            </li>
			<li>
                <a href="#">Html/Css</a>
            </li>
			<li>
                <a href="#">Xml</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#">数据库技术</a>
        <ul>
            <li>
                <a href="#">数据库原理</a>
            </li>
            <li>
                <a href="#">Oracle</a>
            </li>
            <li>
                <a href="#">MySQL</a>
            </li>
            <li>
                <a href="#">DB2</a>
            </li>
            <li>
                <a href="#">MSSQL 2000</a>
            </li>
            <li>
                <a href="#">MSSQL 2005</a>
            </li>
            <li>
                <a href="#">H2</a>
            </li>
            <li>
                <a href="#">SQlite</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#">操作系统</a>
        <ul>
            <li>
                <a href="#">OS原理技术</a>
            </li>
            <li>
                <a href="#">Win XP</a>
            </li>
            <li>
                <a href="#">Win 2000</a>
            </li>
            <li>
                <a href="#">Win 2003</a>
            </li>
            <li>
                <a href="#">Win 7</a>
            </li>
            <li>
                <a href="#">Win Vista</a>
            </li>
        </ul>
    </li>
</ul>
</body>

测试前请导入jquery文件。