<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React</title>
<script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>
<style>
*{
margin:0;
padding:0;
}
ul{
list-style:none;
}
.menus{

}
.menus .menu{
float:left;
margin-left:4px;
}
.menus .menu button{
padding:4px;
}
.menus ul.sub-menu{
background:#c1d2e3;
}
.menus ul li{
padding-left:4px;
}
</style>
</head>
<body>
<div id="example">
<!-- <div class="menus">
<div class="menu">
<button>
{buttonName}
</button>
<ul class="sub-menu">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>

<div class="menu">
<button>
{buttonName}
</button>
<ul class="sub-menu">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div> -->
</div>
<script type="text/babel">
var Menu = React.createClass({
mover : function() {
this.setState({
open : true
});
},
mout : function() {
this.setState({
open : false
});
},
getInitialState : function() {
return {
open : false
}
},
render : function() {
return (
<div className="menu">
<button onMouseOver={this.mover} onMouseOut={this.mout}>
{this.props.menuData.name}
</button>
<ul className="sub-menu" style={{display:this.state.open ? "block" : "none"}}>
{this.props.menuData.arr.map((el, index) => {
return (<div key={index}>{el}</div>)
})}
</ul>
</div>)
}
});
var Menus = React.createClass({
render : function() {
return (<div className="menus">
{this.props.data.map((el ,index)=>{
return (<Menu key={index} menuData={el}/>)
})}
</div>);
}
});
var data = [
{
name : "menuName",
arr : [
"menu1",
"menu2",
"menu3",
"menu4"
]
},
{
name : "menuName1111",
arr : [
"menu-1",
"menu-2",
"menu-3",
"menu-4"
]
}
];
ReactDOM.render(<Menus data={data} />, document.getElementById("example"));
</script>
</body>
</html>

React实现了一个鼠标移入的菜单栏效果的更多相关文章

  1. WPF在后台中写一个鼠标移入移出的操作

    在这个问题上我纠结了好久就是为了一个问题就是forebackground这个属性 lblPwd.Foreground = Brushes.Black;我以前一直以为是fontground这个属性可是我 ...

  2. 从外国html5网站上扒来一个鼠标经过的css3 效果，感觉很不错

    鼠标经过的时候,感觉有点像一张纸卷上去的感觉. 下面是代码 <div class="main-container types"> <div class=" ...

  3. css 鼠标移入边框填充效果

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. js鼠标移入移出事件会被子元素触发解决方法

    问题:js写了一个鼠标移入移出事件,但是发现会被内部子元素不断的触发 解决方法:建立一个空的div定位到需要触发的位置,然后设置大小和触发范围一样,最后将事件写在空的div上.

  5. JS实现鼠标移入DIV随机变换颜色

    今天分享一个在 JavaScript中,实现一个鼠标移入可以随机变换颜色,本质就是js的随机数运用. 代码如下: <!DOCTYPE html> <html> <head ...

  6. jquery自定义滚动条 鼠标移入或滚轮时显示 鼠标离开或悬停超时时隐藏

    一.需求: 我需要做一个多媒体播放页面,左侧为播放列表,右侧为播放器.为了避免系统滚动条把列表和播放器隔断开,左侧列表的滚动条需要自定义,并且滚动停止和鼠标离开时要隐藏掉. 二.他山之石: 案例来自h ...

  7. Jquery事件：鼠标移入移出(mouseenter,mouseleave)

    前几天帮朋友做了一个单页面,其中有个效果就是鼠标移动到头像上变换头像样式,当鼠标移出时恢复头像样式.当时没多想,脑子就蹦出了mouseover,mouseout两个方法. 但是在编写页面的过程中,无论 ...

  8. JS鼠标移入，移出事件

    该事件的效果就像百度首页的设置选项,当鼠标移入,移出时的效果,废话不多说了,直接上码. <!DOCTYPE html><html lang="en">< ...

  9. 关于js判断鼠标移入元素的方向--解释

    一开始我是这么想的,将待移入的元素分割四块,用mousemove获取第一次鼠标落入的区域来判断鼠标是从哪个方向进去的. 所以只要写个算法来判断鼠标的值落入该元素的区域就可以得出鼠标移入的方向,如下图: ...

随机推荐

  1. asp.net针对SQLSERVER数据库备份和恢复的一揽子问题解决

    一.备份 先备份到服务端,用gridview显示出来,点击可以下载到本地 二.恢复 这是很麻烦的事情,本人查阅不少资料,耗费不少时间才搞定. 直接恢复数据库时不行的,会提示数据库正在使用,恢复失败等信 ...

  2. Linux中修改环境变量及生效方法（永久、临时）环境变量查看

    参考link:https://blog.csdn.net/u011630575/article/details/49839893 在项目中有一次帮忙组里搭环境时遇见了这部分的相关操作,记录一下.

  3. 升级nginx 和nchan

    #下载sudo wget http://nginx.org/download/nginx-1.14.0.tar.gzsudo wget https://github.com/slact/nchan/a ...

  4. go web framework gin 路由表的设计

    在上一篇go web framework gin 启动流程分析这一篇文章中,我分析了go gin启动的过程,在这一篇文章中我将继续上面的分析,讨论gin 中路由表是如何设计的? 首先查看engine. ...

  5. tail语法

    本文介绍Linux下tail命令的使用方法.linux tail命令用途是依照要求将指定的文件的最后部分输出到标准设备,通常是终端,通俗讲来,就是把某个档案文件的最后几行显示到终端上,假设该档案有更新 ...

  6. APPicon的生成

    APPIcon 工厂图标的生成:http://icon.wuruihong.com/#/home

  7. 开源中国/码云 README.md上传图片的爬坑记录

    整理代码,将电脑中长期没有用过的代码放到码云上托管,给项目录制gif动画,在写项目README.md时使用,结果在上传图片时一直出问题,现记录下最后解决方法: 1. 最初直接将录制好的图片放入到img ...

  8. Windows7下安装python3.6.3

    官网下载即可!看清自己的电脑是32还是64! 分享一个网速慢同学可下载网址:https://pan.baidu.com/s/1kU5OCOB#list/path=%2Fpub%2Fpython 1.p ...

  9. OneStopEnglish corpus: A new corpus for automatic readability assessment and text simplification-paper

    这篇论文的related work非常详尽地介绍了各种readability的语料 abstract这个paper描述了onestopengilish这个三个level的文本语料的收集和整理,阐述了再 ...

  10. js layer.js

    var index = parent.layer.getFrameIndex(window.name); parent.layer.close(index); 关闭弹出页 全屏弹出页面 layer.o ...