菜单下拉效果demo记录
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script type="text/javascript" src="js/jquery.js"></script> <style type="text/css"> *{margin:0px;padding:0px;} html,body{width:100%;height:100%;} #main{width:800px;margin:0 auto;} #menu_list{list-style-type:none;position:relative;width:100%;border:1px solid blue;border-bottom:none;float:left;} #menu_list .menu_item,#menu_list .menu_text{float:left;line-height:30px;} #menu_list .menu_item{margin:0px 20px 0px 0px;border:1px solid blue;} #menu_list .sub_item{display:none;position:absolute;top:30px;left:-1px;width:100%;border:1px solid red;border-top:none;height:360px;} </style> <script type="text/javascript"> $(function(){ var mst; $(".menu_item").hover(function(){ var curItem =$(this); mst = setTimeout(function(){//延时触发 curItem.find(".sub_item").slideDown("slow"); mst = null; },350); },function(){ if(mst!=null)clearTimeout(mst); $(this).find(".sub_item").slideUp("fast"); }); }) </script> </head> <body> div[id="main"]>ul[id="menu_list"]>li[class="menu_item" id="menu_item_0$"]*8>span[id="menu_text_0$" class="menu_text"]{菜单标题$}+div[id="sub_item_0$" class="sub_item"]{子菜单内容$} <div id="main"> <ul id="menu_list"> <li class="menu_item" id="menu_item_01"> <span id="menu_text_01" class="menu_text">菜单标题1</span> <div id="sub_item_01" class="sub_item">子菜单内容1</div> </li> <li class="menu_item" id="menu_item_02"> <span id="menu_text_02" class="menu_text">菜单标题2</span> <div id="sub_item_02" class="sub_item">子菜单内容2</div> </li> <li class="menu_item" id="menu_item_03"> <span id="menu_text_03" class="menu_text">菜单标题3</span> <div id="sub_item_03" class="sub_item">子菜单内容3</div> </li> <li class="menu_item" id="menu_item_04"> <span id="menu_text_04" class="menu_text">菜单标题4</span> <div id="sub_item_04" class="sub_item">子菜单内容4</div> </li> <li class="menu_item" id="menu_item_05"> <span id="menu_text_05" class="menu_text">菜单标题5</span> <div id="sub_item_05" class="sub_item">子菜单内容5</div> </li> <li class="menu_item" id="menu_item_06"> <span id="menu_text_06" class="menu_text">菜单标题6</span> <div id="sub_item_06" class="sub_item">子菜单内容6</div> </li> <li class="menu_item" id="menu_item_07"> <span id="menu_text_07" class="menu_text">菜单标题7</span> <div id="sub_item_07" class="sub_item">子菜单内容7</div> </li> <li class="menu_item" id="menu_item_08"> <span id="menu_text_08" class="menu_text">菜单标题8</span> <div id="sub_item_08" class="sub_item">子菜单内容8</div> </li> </ul> </div> </body> </html>
demo:点击下载
