js 下拉菜单实现代码
*{padding:0;margin:0;}
.nav{width:850px;margin:50px auto;position:relative;}
.nav li{display:inline;margin-right:50px;}
.nav ol{background-color:#f5f5f5;border:1px solid #ccc;display:none;padding:15px;}
.nav ol li{display:block;margin-bottom:15px;}
var next=function (el) {
do {
el = el.nextSibling;
} while ( el && el.nodeType != 1 );
return el;
}
var showContent=function (el) {
var _next=next(el);
_next.style.display="block";
_next.style.position="absolute";
_next.style.zIndex="999";
_next.style.top=el.offsetHeight+el.offsetTop+"px";
_next.style.left=el.offsetLeft+"px";
_next.onmouseout=function (){
this.style.display="none";
}
_next.onmouseover=_next.onmousemove=function (){
this.style.display="block";
}
}
var hideContent=function (el) {
el.style.display="none";
}
- 首页
- 首页1
- 首页2
- 首页3
- 首页4
- 首页4
- 电影
- 电影1
- 电影2
- 电影3
- 电影4
- 电影4
- 新闻
- 新片
- 排行榜
dcxsssssssss
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
相关推荐
-
下拉菜单点击实现连接跳转功能的js代码
1.js代码 复制代码 代码如下: <!-- function MM_jumpMenu(targ,selObj,restore){ eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'"); if (restore) selObj.selectedIndex=0; } --> 2.使用 复制代码 代码如下: <p class="yq">校
-
js 控制下拉菜单刷新的方法
思路:母版頁隱藏控件 從内容頁接收值 JS根據接受的值控制菜單項的現實母版頁:隱藏控件: 复制代码 代码如下: <asp:Label ID="Lbl_X" runat="server" Text="text" style="display:none"></asp:Label><asp:Label ID="Lbl_Xn" runat="server" Text
-
js模拟select下拉菜单控件的代码
复制代码 代码如下: <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <meta charset=utf-8 /> <title>js模拟select</title> </head> <style> *{ marg
-
Js点击弹出下拉菜单效果实例
复制代码 代码如下: <STYLE type=text/css> .menu { BORDER-RIGHT: #006080 2px solid; BORDER-TOP: #80e0ff 2px solid; LEFT: 0px; VISIBILITY: hidden; BORDER-LEFT: #80e0ff 2px solid; BORDER-BOTTOM: #006080 2px solid; POSITION: absolute; TOP: 0px; BACKGROUND-COLOR:
-
js 下拉菜单实现代码
*{padding:0;margin:0;} .nav{width:850px;margin:50px auto;position:relative;} .nav li{display:inline;margin-right:50px;} .nav ol{background-color:#f5f5f5;border:1px solid #ccc;display:none;padding:15px;} .nav ol li{display:block;margin-bottom:15px;} v
-
js实现全国省份城市级联下拉菜单效果代码
本文实例讲述了js实现全国省份城市级联下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一个大家都知道的网页小功能,很常见,全国省份与城市级联菜单,采用Select下拉的方式选择数据,不过现在很多都Ajax了,貌似这种老形式已经过时了,不过在兼容性方面,仍然是不落后的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-conv-city-xl-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLI
-
js实现点击向下展开的下拉菜单效果代码
本文实例讲述了js实现点击向下展开的下拉菜单效果代码.分享给大家供大家参考.具体如下: 这里介绍js实现点击向下展开的下拉菜单特效代码,无调用jQuery,真正的JS下拉菜单,兼容性方面未做测试,觉得有用处的自己测试修正吧,本文仅提供基础的代码供参考. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-click-show-down-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//
-
js实现简洁大方的二级下拉菜单效果代码
本文实例讲述了js实现简洁大方的二级下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一款简洁大方的二级下拉菜单,菜单的颜色自己根据需要重新定义吧,这里仅给大家提供一种制作二级菜单的思路,整体效果看上去相当实用,下拉导航菜单也是大家比较常用的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-simple-2level-show-down-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-/
-
js+css实现超简洁的二级下拉菜单效果代码
本文实例讲述了js+css实现超简洁的二级下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一个很简洁的CSS+JavaScript二级菜单,没有使用过多的修饰素材,尽量不调用外部图片,简洁大方,而且便于二级开发完善,最初是一个政府网站上的菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-simple-2jxl-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//
-
JS+CSS实现的经典圆角下拉菜单效果代码
本文实例讲述了JS+CSS实现的圆角下拉菜单效果代码.分享给大家供大家参考,具体如下: 相信不少朋友会喜欢这一款菜单,CSS+JS实现的圆角下拉菜单,没有使用任何修饰性的图片哦,圆角完全是用JS完成的,因此代码多了些,想使用的朋友把JS文件提取出来另存,这样更合理些. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-jd-cicle-style-button-demo/ 具体代码如下: <!DOCTYPE html PUBLIC &qu
-
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
本文实例讲述了jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码.分享给大家供大家参考.具体如下: 这里介绍的是一款黑红带渐变的网站下滑导航菜单,基于jquery实现的下滑线导航菜单,鼠标经过主菜单的时候,下滑线就会自动跟向哪里,如果该菜单有两级子菜单,则同样会显示下滑菜单,带渐变效果.菜单操作很灵敏,使用有自定义的封装插件SuperSlide.2.1.js,所在使用时请自行下载这个JS插件. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015
-
JavaScript简单下拉菜单实例代码
本文实例讲述了JavaScript简单下拉菜单实例代码.分享给大家供大家参考.具体如下: 这是一款JavaScript实现的下拉菜单演示代码,带渐变效果的CSS+jQuery菜单,向下滑出型的菜单,最高支持两级,网上常见到的一种菜单风格,希望大家喜欢哦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-simple-xlcd-down-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C/
-
javascript手风琴下拉菜单实现代码
手风琴下拉菜单实现的效果更灵活,不同与传统的下拉菜单,本文就为大家分享一段javascript手风琴下拉菜单实现代码,先看一看效果图: 具体的javascript手风琴下拉菜单代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>手风琴下拉菜单效果</title> <script src="js/jquery-1.11.1.j
-
zTree插件之多选下拉菜单实例代码
zTree插件之多选下拉菜单实例代码css和js 复制代码 代码如下: <!--ztree树结构--><link rel="stylesheet" type="text/css" href="assets/ztree/css/zTreeStyle.css"><link rel="stylesheet" type="text/css" href="assets/ztre
随机推荐
- js调用Flex中的方法并向flex中传参及flex调用js示例
- 深入浅析Jsonp解决ajax跨域问题
- VS2005 180天限制破解方法
- .NET 中英文混合验证码实现代码
- php Smarty初体验二 获取配置信息
- MySQL的FIND_IN_SET函数使用方法分享
- Node.js 日志处理模块log4js
- node.js中express中间件body-parser的介绍与用法详解
- Ajax请求和Filter配合案例解析
- JAVA关键字及作用详解
- 详解java重载与覆写的区别
- jquery实现瀑布流效果分享
- 用javascript获取textarea中的光标位置
- c++递归解数独方法示例
- cookie 最近浏览记录(中文escape转码)具体实现
- php通过记录IP来防止表单重复提交方法分析
- Android简单修改原有应用和添加应用的方法
- Activity透明/半透明效果的设置transparent(两种实现方法)
- apache正常访问mht类型文件的配置方法
- Java内存模型JMM详解