本文实例讲述了jquery实现漂亮的二级下拉菜单代码。分享给大家供大家参考。具体如下： 这里介绍一款基于jquery实现的网站下拉菜单，黑色风格，很漂亮，本菜单需要点击主菜单后的小三角符号才下拉出二级菜单，并不是有些菜单，是鼠标移上主菜单的时候就滑过，至于哪一种，就看个人的喜好了 先来看看运行效果：在线演示地址如下： http://demo.jb51.net/js/2015/jquery-bg-2-level-down-show-menu-codes/ 具体代码如下： <!DOCTYPE h...
本文实例讲述了jquery实现平滑的二级下拉菜单效果。分享给大家供大家参考。具体如下： 这是一款使用了jQuery实现的二级菜单特效，灰色风格，颜色自己不喜欢的就自己动动手吧，CSS代码经过了优化，水平高的自己拿出修改吧，这是一个在国外前端设计网站找到的导航菜单效果，希望大家喜欢。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/jquery-soft-2level-menu-nav-codes/ 具体代码如下： <!DOCTYPE html> <...
本文实例讲述了jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码。分享给大家供大家参考。具体如下： 这里介绍的是一款黑红带渐变的网站下滑导航菜单，基于jquery实现的下滑线导航菜单，鼠标经过主菜单的时候，下滑线就会自动跟向哪里，如果该菜单有两级子菜单，则同样会显示下滑菜单，带渐变效果。菜单操作很灵敏，使用有自定义的封装插件SuperSlide.2.1.js，所在使用时请自行下载这个JS插件。 运行效果截图如下：在线演示地址...
本文实例讲述了jquery实现的淡入淡出下拉菜单效果。分享给大家供大家参考。具体如下： 这是一款jQuery带有淡入淡出效果的下拉菜单，可作为一个下拉导航菜单的模板，移动鼠标到一级主菜单上看一看，在有包括二级子菜单的菜单项上悬停时，二级菜单渐变显示出来，兼容性也是很不错的，希望大家喜欢哈。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/jquery-fade-in-out-menu-style-codes/ 具体代码如下： <!DO...
本文实例讲述了jquery实现适用于门户站的导航下拉菜单效果代码。分享给大家供大家参考。具体如下： 这是一款应用了jQuery+CSS共同编写实现的网页导航菜单，采用浅蓝色的布局方式，整体格调淡雅清新，简洁大方，不失为一款好菜单。本特点的特点是兼容好，在火狐/IE下都有良好表现，而且在有二级子菜单的地方，主菜单上都会有一个小三角标识，很好的提升了用户体验，相信你也会喜欢的。运行效果截图如下： 在线演示地址如下： http:/...
本文实例讲述了jQuery实现的多级下拉菜单效果代码。分享给大家供大家参考。具体如下： 这是一款jQuery多级下拉菜单，在支持html5的浏览器中测试你会发现本菜单很智能，会自动判断浏览器边界来改变下拉菜单的显示方向，在ie下没发现此效果。整体上来看，和Windows系统的“经典”主题时的菜单风格特别相似，配合图片，整体效果还是相当有专业水准的。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/jquery-nle...
jquery带下拉菜单和焦点图是一款顶部通栏带二级下拉菜单和banner导航菜单代码。感兴趣的朋友快来学习学习吧 运行效果图： ----------------------查看效果 下载源码-----------------------小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。 为大家分享的jquery带下拉菜单和焦点图如下<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery带下拉菜单和...
本文实例讲述了jquery实现鼠标滑过显示二级下拉菜单效果。分享给大家供大家参考。具体如下： 这是一款jquery实现的下拉菜单，当鼠标移在主菜单上的时候，向下滑出二级子菜单，采用UL LI结构，便于修改完善，我觉得是很实用的菜单，希望大家平时能用得上。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/jquery-mouse-over-show-menu-codes/ 具体代码如下： <!DOCTYPE html> <head> <meta http-equiv="Conten...
本文实例讲述了jQuery实现的fixedMenu下拉菜单效果代码。分享给大家供大家参考。具体如下： 这里演示了仿Google风格的下拉菜单，其核心实际上是jquery.fixedMenu菜单，使用了jquery.fixedMenu.js和fixedMenu_style.css文件，已在代码中加注释，你可以从本代码中分享现这两个文件，然后重新引用。本菜单在鼠标点击主菜单的时候可向下显示二级子菜单，在火狐或Chrome浏览器下，还可显示菜单阴影效果。 运行效果截图如下：在线演示地址...
首先给大家展示下效果图：查看效果 源码下载 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" /> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <link href="css/lanrenzhiji...
本文实例讲述了jQuery实现幻树形下拉菜单特效，实现自动伸缩，分享给大家供大家参考。 运行jQuery树形下拉菜单特效效果图：为大家分享的jQuery树形下拉菜单代码如下<head><title>常用的jquery下拉菜单</title> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript">$(document).ready(function() {$(".menuTitle").click(function(){$(this).next("div").slideToggle("slow").siblings("....
html代码<div class="UpLayer"> <dl> <dt> <a href="javascript：void(0)">脚本之家</a></dt> <dd> <a href="http://www.demo.com/js/">特效</a> <a href="http://www.demo.com/Tutorials/">教程</a> <a href="http://www.demo.com/zy/">资源</a> <a href="http://www.demo.com/mb/">模板</a> <a href="http://www.demo.com/news/">资讯</a></dd> </dl> </div> js代码<script type="text/javascript"> // 【经典】弹出层菜单 $(d...
这是一款精美的多级下拉菜单美化,可以完美替代“select”来实现下拉菜单的效果。而且支持多级菜单，有加载等待效果，有层级分类展示。代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Filament Group Lab</title> <meta http-equiv="content-type" content="text/html; char...
本文实例讲述了jQuery实现渐变下拉菜单的简单方法。分享给大家供大家参考。具体实现方法如下：代码如下:<script type="text/javascript"> $(function(){ $("#nav li").hover(function(){if(!$(this).children("#nav li ul").is(":animated")){$(this).children("#nav li ul").fadeIn("100");}},function(){$(this).children("#nav li ul").fadeOut("400");});//willin }) </script> #nav li {float:left; line-hei...
Jquery 是一个轻量的框架，个人认为非常好用，今天就写一个非常简单的例子，实现下拉菜单功能； 首先肯定要在页面引用jquery.js 版本不限 ； 接下来把=====================html贴出来：代码如下: <div class=”header_menu”> <ul> <li class=”menuli” id=”xtgl_menu”>系统管理</li> <li class=”menuli” id=”ggsq_menu”>干管所勤</li> <li class=”menuli” id=”b...