jquery实现美观的导航菜单鼠标提示特效代码

这篇文章主要介绍了jquery实现美观的导航菜单鼠标提示特效代码,涉及jquery鼠标事件及页面animate动画的使用技巧,非常具有实用价值,需要的朋友可以参考下

本文实例讲述了jquery实现美观的导航菜单鼠标提示特效代码。分享给大家供大家参考。具体如下：

这是一个奇妙的导航菜单鼠标提示特效，俗称“链接提示”，鼠标放在导航菜单的链接上即可显示出该链接所指向网页的大致内容，提示用户到达需要的页面。

先来看看运行效果截图：

在线演示地址如下：

http://demo.html.cn/js/2015/jquery-nav-tips-nav-menu-style-codes/

具体代码如下：

    body { margin: 10px auto; width: 570px; font: 75%/120% Arial, Helvetica, sans-serif; } .menu { margin: 100px 0 0; padding: 0; list-style: none; } .menu li { padding: 0; margin: 0 2px; float: left; position: relative; text-align: center; } .menu a { padding: 14px 10px; display: block; color: #000000; width: 144px; text-decoration: none; font-weight: bold; background: url(images/button.gif) no-repeat center center; } .menu li em { background: url(images/hover.png-600) no-repeat; width: 180px; height: 45px; position: absolute; top: -85px; left: -15px; text-align: center; padding: 20px 12px 10px; font-style: normal; z-index: 2; display: none; }  
 
 Web Designer WallA wall of design ideas, web trends, and tutorials
 Best Web GalleryFeaturing the best CSS and Flash web sites
 N.Design StudioBlog and design portfolio of WDW designer, Nick La

希望本文所述对大家的jquery程序设计有所帮助。

以上就是jquery实现美观的导航菜单鼠标提示特效代码的详细内容，更多请关注本站其它相关文章！