Jquery页面导航(菜单悬停，折叠效果)

最新推荐文章于 2023-07-28 15:50:21 发布

iteye_19129

最新推荐文章于 2023-07-28 15:50:21 发布

阅读量227

点赞数

文章标签： javascript xhtml ViewUI

本博客展示了如何在网页中实现悬停效果和折叠式菜单，通过使用CSS和JavaScript，实现菜单项的背景颜色变化和子菜单的展开与收起功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.把悬停效果加到菜单项

2.折叠式菜单

<!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> <title></title> <style type="text/css"> .Menu { width:200px; background-color:#0ff; padding:5px; margin:1px; } .menuitems { display:none; background-color:Red; } a { display:block; border:1px soild #fff; text-decoration:none; color:#fff; padding:10px; } .menuitems a:hover { background-color:#000; } li { display:inline; } ul { display:inline; } </style> <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { $("p.Menu").mouseout(function () { $("div.menuitems").slideUp('slow'); $('p').css({ 'background-color': '' }); }); $('p.Menu').mouseover(function () { $(this).next('div.menuitems').slideDown(500).siblings('div.menuitems').slideUp("slow"); $(this).siblings().css({ 'background-color': '' }); }); }); </script> </head> <body> <p class="Menu">Books</p> <div class="menuitems"> <ul> <li><a href="#">Web Development</a></li> <li><a href="#">BI Development</a></li> <li><a href="#">Web Test</a></li> </ul> </div> <p class="Menu">Moive</p> <div class="menuitems"> <ul> <li><a href="#">American Moive</a></li> <li><a href="#">Chinese Moive</a></li> <li><a href="#">HongKong Moive</a></li> </ul> </div> </body> </html>