一个基于jquery的TreeMenu和下拉式Menu菜单，代码很简单

来源：互联网发布：香港it官网编辑：程序博客网时间：2024/06/05 19:52

TreeMenu菜单

jquery用的1.x版本。

HTML代码为：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>TreeMenu</title><script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/treeMenu.js"></script><style type="text/css">.menu{width:100px;height:25px;border:1px solid #000;cursor: pointer;}ul{width:100px;border:1px solid #900;display:none;}</style></head><body><div class="menu" name="left_menu">    <a>菜单一</a>    </div>    <ul>    <li>111111</li>        <li>222222</li>        <li>333333</li>        <li>444444</li>    </ul>    <div class="menu" name="left_menu">    <a>菜单二</a>    </div>    <ul>    <li>111111</li>        <li>222222</li>        <li>333333</li>        <li>444444</li>    </ul>    <div class="menu" name="left_menu">    <a>菜单三</a>    </div>    <ul>    <li>111111</li>        <li>222222</li>        <li>333333</li>        <li>444444</li>    </ul>    <div class="menu" name="left_menu">    <a>菜单四</a>    </div>    <ul>    <li>111111</li>        <li>222222</li>        <li>333333</li>        <li>444444</li>    </ul></body>  </html>

js代码为：

// JavaScript Document$(document).ready(function() {    $("div[name='left_menu'] a").click(function(){if ($(this).parent().next().is(":visible")){$(this).parent().next().slideUp(500);}else{//$(this).parent().next().slideToggle(500);$("ul").slideUp(500);$(this).parent().next().slideDown(500);}});});

效果：

TreeMenu菜单

jquery用的1.x版本。

HTML代码为：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Menu</title><script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/treeMenu.js"></script><style type="text/css">.menu{width:150px;height:25px;float:left;border:1px solid #000;cursor: pointer;position:relative;}ul{width:150px;border:1px solid #900;margin:0px;padding:0px;display:none;}</style></head><body><div class="menu" name="left_menu">    <a>菜单一</a><ul style="position:absolute;top:25px;"><li>111111</li><li>222222</li><li>333333</li><li>444444</li></ul></div><div class="menu" name="left_menu">    <a>菜单一</a><ul style="position:absolute;top:25px;"><li>111111</li><li>222222</li><li>333333</li><li>444444</li></ul></div><div class="menu" name="left_menu">    <a>菜单一</a><ul style="position:absolute;top:25px;"><li>111111</li><li>222222</li><li>333333</li><li>444444</li></ul></div><div class="menu" name="left_menu">    <a>菜单一</a><ul style="position:absolute;top:25px;"><li>111111</li><li>222222</li><li>333333</li><li>444444</li></ul></div><div class="menu" name="left_menu">    <a>菜单一</a><ul style="position:absolute;top:25px;"><li>111111</li><li>222222</li><li>333333</li><li>444444</li></ul></div><div style="clear:both;"></div><div style="width:800px;height:30px;background-color:green;"></div></body>  </html>

jquery代码为：

// JavaScript Document$(document).ready(function() {    $("div[name='left_menu']").live('mouseenter',function(){$(this).find("ul").slideDown(500);});$("div[name='left_menu']").live('mouseleave',function(){$(this).find("ul").slideUp(500);});$("li").live('mouseenter',function(){$(this).attr('style',"background-color:red;");});$("li").live('mouseleave',function(){$(this).attr('style',"");});});

效果：

0 0