css+javascript下拉菜单
用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文件。
页:
[1]