仿京东左侧菜单 hover效果-简易demo
简单描述: 用到的知识点 css 中的绝对定位 以及 Js 中的事件冒泡(或事件委托)
.cont{display:inline-block;width:200px;height:200px;border:1px solid red;position:absolute;left:150px;top:2px;display:none;}
<div style="border:1px solid green;margin:30px auto;width:150px;" id="menu"> <div class="item" id="div1" style="position:relative;">
<span style="display:inline-block;background: #abcdef;width:150px;height:50px;cursor:pointer;">123</span>
<span id="span1" class="cont">
hello1111111
hello1111111
hello1111111
hello1111111
hello1111111
</span>
</div> <div id="div2" class="item" style="position:relative;">
<span style="display:inline-block;background: red;width:150px;height:50px;cursor:pointer;">123</span>
<span class="cont">hello222222</span>
</div> <div id="div3" class="item" style="position:relative;">
<span style="display:inline-block;background: green;width:150px;height:50px;cursor:pointer;">123</span>
<span class="cont">hello333333</span>
</div> </div>
window.onload = function(){
var oSpan1 = document.getElementById("span1");
var oMenu = document.getElementById("menu");
var oSMenu = oMenu.childNodes; for(var n=oSMenu.length-1; n>=0; n--){
if(oSMenu[n].className == "item"){
oSMenu[n].onmouseover = function(evt){
var target = oTargetByClass._get_target_child(this.childNodes, "cont");
target.style.display = "block";
} oSMenu[n].onmouseout = function(evt){
var target = oTargetByClass._get_target_child(this.childNodes, "cont");
target.style.display = "none";
}
}
} var oTargetByClass = { _get_target_child: function(childNodes, child_class){
for(var i = childNodes.length-1; i>=0; i--){
if(childNodes[i].className == child_class){
return childNodes[i];
}
}
}
}
}
仿京东左侧菜单 hover效果-简易demo的更多相关文章
- iOS仿京东分类菜单之UICollectionView内容
在上<iOS仿京东分类菜单实例实现>已经实现了大部分主体的功能,本文是针对右边集合列表进行修改扩展,使它达到分组的效果,本文涉及到的主要是UICollectionView的知识内容,左边列 ...
- jQuery仿京东无限级菜单HoverTree
官方网址:http://keleyi.com/jq/hovertree/ 效果图: 看了上面效果图,你或许已经明白为什么是仿京东菜单.如果还不明白,请访问http://list.jd.com/list ...
- 仿京东树形菜单插件hovertree
hovertree是一个仿京东的树形菜单jquery插件,暂时有银色和绿色两种. 官方网址:http://keleyi.com/jq/hovertree/欢迎下载使用 查看绿色效果:http://ke ...
- Ionic 左侧菜单(登录主页详情demo)
1.项目结构 2.截图效果展示 3.主要js 代码 $stateProvider .state('app', { url: "/app", abstract: tru ...
- Flex 仿Winxp左侧菜单
呆毛放出,源码暂时不能公布,一直比较喜欢winxp的左侧菜单样式,以前也用xslt实现过,但总是达不到完美,没想到FLex轻松做到了这一点,几乎和winxp一模一样.
- iOS仿京东分类菜单实例实现
在APP开发过程中此功能还是比较常见的模块,左边为菜单展示,右边为菜单下数据的展示,选择不同的菜单右边的数据源进行更新,此实例主要运用到UITableView,UICollectionView,OC谓 ...
- 仿QQ空间长图效果简易版--母亲节感恩
手机网站 母亲节最火的两件事 1.NBA 杜兰特在获MVP催泪致辞献给母亲:她才是真的MVP. 2.QQ空间长图 ------------------------------------------- ...
- 用Vue2仿京东省市区三级联动效果
三级联动,随着越来越多的审美,出现了很多种,好多公司都仿着淘宝的三级联动 ,好看时尚,so我们公司也一样……为了贴代码方便,我把写在data里面省市区的json独立了出来,下载贴进去即可用,链接如下 ...
- Android Studio 使用ViewPager + Fragment实现滑动菜单Tab效果 --简易版
描述: 之前有做过一个记账本APP,拿来练手的,做的很简单,是用Eclipse开发的: 最近想把这个APP重新完善一下,添加了一些新的功能,并选用Android Studio来开发: APP已经完善了 ...
随机推荐
- mahout源码分析之DistributedLanczosSolver(五)Job over
Mahout版本:0.7,hadoop版本:1.0.4,jdk:1.7.0_25 64bit. 1. Job 篇 接上篇,分析到EigenVerificationJob的run方法: public i ...
- spring cloud-给Eureka Server加上安全的用户认证
前言 在前面的一篇文章中 spring cloud中启动Eureka Server 我们启动了Eureka Server,然后在浏览器中输入http://localhost:8761/后,直接回车,就 ...
- eclipse maven 报错Could not get the value for parameter encoding for plugin execution default
问题描述:更改默认的maven仓库路径完成后.即存maven项目或者新建maven项目的时候出现如下错误 Could not get the value for parameter encoding ...
- du 命令秘籍
导读 du命令是检查硬盘使用情况,统计文件或目录及子目录使用硬盘的空间大小.参数的不同组合,可以更快的提高工作效率,以下仅列出了经常使用到的参数,如需更详细的信息,请用man du命令来获得. 1.命 ...
- C++数据结构面试题
原文:http://1527zhaobin.iteye.com/blog/1537110 一.判断链表是否存在环型链表问题: 说明:判断一个链表是否存在环,例如下面这个链表就存在环,n1--> ...
- POJ2762 Going from u to v or from v to u? 强连通+缩点
题目链接: poj2762 题意: 给出一幅单向图.问这张图是否满足 随意两点ab 都能 从a到达b 或 从b到达a 题解思路: 推断一幅图是否满足弱连通 首先想到的是将图中的 强连通分量(能互 ...
- GetProcAddress 使用注意事项
使用 GetProcAddress Function 时,有以下几点需要特别留意: 1. 第二个参数类型是 LPCSTR,不是 : 2. 用 __declspec(dllexport),按 C 名称修 ...
- [HTML5] Avoiding CSS Conflicts via Shadow DOM CSS encapsulation
Shadow DOM is part of the web components specification. It allows us to ship self contained componen ...
- (字符串)最长公共字串(Longest-Common-SubString,LCS)
题目: 给定两个字符串X,Y,求二者最长的公共子串,例如X=[aaaba],Y=[abaa].二者的最长公共子串为[aba],长度为3. 子序列是不要求连续的,字串必须是连续的. 思路与代码: 1.简 ...
- MongoDB社区版本和企业版本差别
MongoDB社区版本和企业版本差异主要体现在安全认证.系统认证等方面,具体信息参考下表: 版本特性 社区版本 企业版本 JSON数据模型.自由模式 支持 支持 水平扩展的自动分片功能 支持 支持 内 ...