<!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. linux c使用socket进行http 通信，并接收任意大小的http响应（五）

    http.c data2.c http_url.c http.h data2.h http_url.h主要实现的功能是通过URL结构体来实现HTTP通信,你可以把这三个文件独立出来,作为HTTP通信模 ...

  2. vue-vuex状态管理-1

    export default vuex.Store{ State, //数据库. getters,// 是我们从数据库里取数据的 API,getters 得是一个”纯函数“ actions,//处理数 ...

  3. c语言：开平方根sqrt程序01

    #include <stdio.h> int sqrt01(int x); void main(void){ int x=49,y; y=sqrt01(x); if(y<0) pri ...

  4. Invalid demension,shape[-1,40,40,1]

    代码里定一个了没有用的placeholder, 或者说没有给这个placeholder 传值

  5. SharePoint Framework 基于团队的开发（一）

    博客地址:http://blog.csdn.net/FoxDave SharePoint Framework是新的用来构建SharePoint自定制的开发模型,它专注于客户端开发并用热门的开源工具gu ...

  6. C++ File Binary

    论操作非文本文件时,std::ios::binary的重要性 今天在读取图片文件的时候,根据图片数据的高宽对图片数据进行读取,但是出现了图片数据读取不完整,但是文件已经到达末尾的情况,中间想过read ...

  7. offsetWidth与clientWidth 区别

    offsetWidth       //元素宽度.内边距和边框,不包括外边距 offsetHeight      //元素高度.内边距和边框,不包括外边距 clientWidth        //元 ...

  8. ECB cspk7 加密

    public function test(){ $param = input('param.'); // $input = 'userid=7&gameid=100107&buycou ...

  9. shell中括号的特殊用法 linux if多条件判断

    一．   bash [  ] 单双括号 基本要素: Ø  [ ] 两个符号左右都要有空格分隔 Ø  内部操作符与操作变量之间要有空格:如  [  “a”  =  “b”  ] Ø  字符串比较中,&g ...

  10. Markdown最常用的几个语法

    更多语法请参考:Markdown语法说明 http://wowubuntu.com/markdown/