多级菜单的簡單實現

Leave a Comment Posted by jeffery on 2010-06-03, under javascript

最近群裡老有人在問多級菜單的問題，中午閒著沒事，就寫了個。嗯，懶得打字，直接看DEMO算了…
感謝鈴妹幫我看bug…

<!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>N级菜单——uedemo.com</title> <style type="text/css"> body { background-color:#000; } ul { list-style:none; width:120px; border:1px solid #eaeaea; margin:0; font-size:12px; } li { height:32px; line-height:32px; } li a { color:#eaeaea; display:block; } li ul { visibility:hidden; } </style> </head> <body> <ul id="nav"> <li> <a href="#">传说中的一级</a> <ul> <li> <a href="#">无敌的二级</a> </li> <li> <a href="#">无敌的二级</a> </li> <li> <a href="#">无敌的二级</a> <ul> <li> <a href="#">无敌的三级</a> <ul> <li> <a href="#">无敌的四级</a> </li> <li> <a href="#">无敌的四级</a> </li> <li> <a href="#">无敌的四级</a> </li> <li> <a href="#">无敌的四级</a> <ul> <li> <a href="#">无敌的五级</a> </li> </ul> </li> <li> <a href="#">无敌的四级</a> </li> <li> <a href="#">无敌的四级</a> </li> </ul> </li> </ul> </li> <li> <a href="#">无敌的二级</a> </li> <li> <a href="#">无敌的二级</a> </li> </ul> </li> <li> <a href="#">传说中的一级</a> <ul> <li> <a href="#">无敌的二级</a> </li> </ul> </li> <li> <a href="#">传说中的一级</a> </li> </ul> <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js"></script> <script type="text/javascript"> $('#nav li').each(function(i){ if( $(this).children().is('ul') ){ $(this).children('a').html($(this).children('a').text()+'»'); $(this).mouseover(function(){ $(this).css({ position:'relative' }) var _ul = $(this).children('ul'); var _w = _ul.width(); _ul.css({ visibility:'visible', position:'absolute', top:0, left:_w+'px' }); });//end onmouseover $(this).mouseout(function(){ $(this).removeAttr('style'); $(this).children('ul').css({ position:'', visibility:'hidden' }); });//end onmouseout }//end if }); </script> </body> </html>

提示：你可以先修改部分代码再运行。

tags: javascript, 多级菜单

« 手动把档案移动到上层目录!如果你有N个目录怎么办?

幸福在哪裡，自己告訴自己 »

從火星看地球

各位內星人…妳們還好麼

多级菜单的簡單實現

留下评论

Categories

Recent Comment

链接

Recent Posts

Browse by tags

文章索引模板

功能