Skip to content

Instantly share code, notes, and snippets.

/index.html

Created June 14, 2015 21:00
Show Gist options
  • Save anonymous/5fbb1fc2050ee7c95832 to your computer and use it in GitHub Desktop.
Save anonymous/5fbb1fc2050ee7c95832 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin React Menu Content Example // source http://jsbin.com/ruwiwizula
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="React Menu Content Example">
<script src="http://fb.me/react-with-addons-0.13.1.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
html,
body {
padding: 0;
margin: 0;
}
.menu {
position: relative;
height: 30px;
padding: 5px;
background: #eee;
border-bottom: 1px solid #ddd;
box-sizing: border-box;
}
.menu__item {
color: #aaa;
text-decoration: none;
padding: 5px;
font-family: verdana;
border-bottom: 1px solid transparent;
transition: all 500ms;
}
.menu__item.selected {
color: #777;
border-color: #aaa;
}
.content-container {
position: absolute;
top: 30px;
bottom: 0;
left: 0;
right: 0;
}
.content {
position: absolute;
padding: 5px;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: auto;
}
</style>
</head>
<body>
<script id="jsbin-javascript">
// menu component
var Menu = React.createClass({displayName: 'Menu',
getInitialState: function( ) {
return {
selectedItem: 0
};
},
render: function(){
return (
React.createElement("nav", {className: "menu"},
this.props.menuItems.map(function( menuItem, i ){
var selectedClass = "";
if( i == this.state.selectedItem ) {
selectedClass = " selected";
}
var className = "menu__item" + selectedClass;
return React.createElement("a", {key: i, href: menuItem.href, className: className, title: menuItem.title, onClick: this.handleMenuItemClick.bind(null, i)}, menuItem.label);
}.bind(this))
)
);
},
componentDidMount: function( ) {
this.props.onSelected( this.state.selectedItem );
},
handleMenuItemClick: function( i, e ) {
if( !this.props.onSelect ) {
this.setMenuItem( i );
return;
}
this.props.onSelect( i, this.setMenuItem.bind( this, i ) );
},
setMenuItem: function( index ) {
this.setState({
selectedItem: index
}, function(){
this.props.onSelected( index );
}.bind(this));
}
});
// content list component
var ContentList = React.createClass({displayName: 'ContentList',
render: function( ) {
return (
React.createElement("div", {className: "content-container"},
React.Children.map(this.props.children, function( child, i ){
if( i == this.props.visible )
return child;
return false;
}.bind(this))
)
);
}
});
// content component
var Content = React.createClass({displayName: 'Content',
render: function( ) {
return (
React.createElement("div", {className: "content"},
this.props.children
)
);
}
});
// application
var Application = React.createClass({displayName: 'Application',
getInitialState: function(){
var self = this;
var state = {
menuProps:{
menuItems: [
{
href: "#a",
title: "A",
label: "A Item"
},
{
href: "#b",
title: "B",
label: "B Item"
},
{
href: "#c",
title: "C",
label: "C Item"
}
],
onSelect: function( i, done ) {
console.log( "selecting: ", i );
//self.state
done( );
},
onSelected: function( i ) {
self.state.selectedContent = i;
self.setState( self.state );
}
},
selectedContent: 0
};
return state;
},
render: function(){
return (
React.createElement("div", null,
React.createElement(Menu, React.__spread({}, this.state.menuProps)),
React.createElement(ContentList, {visible: this.state.selectedContent},
React.createElement(Content, null,
"Content for A element"
),
React.createElement(Content, null,
"Content for B element"
),
React.createElement(Content, null,
"Content for C element"
)
)
)
);
}
});
React.render(React.createElement(Application, null), document.body);
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<meta name="description" content="React Menu Content Example">
<script src="//fb.me/react-with-addons-0.13.1.js"><\/script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">html, body {
padding: 0;
margin: 0; }
.menu {
position: relative;
height: 30px;
padding: 5px;
background: #eee;
border-bottom: 1px solid #ddd;
box-sizing: border-box; }
.menu__item {
color: #aaa;
text-decoration: none;
padding: 5px;
font-family: verdana;
border-bottom: 1px solid transparent;
transition: all 500ms;
&.selected {
color: #777;
border-color: #aaa; }
}
.content-container {
position: absolute;
top: 30px;
bottom: 0;
left: 0;
right: 0; }
.content {
position: absolute;
padding: 5px;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: auto; }
</script>
<script id="jsbin-source-javascript" type="text/javascript">// menu component
var Menu = React.createClass({
getInitialState: function( ) {
return {
selectedItem: 0
};
},
render: function(){
return (
<nav className="menu">
{this.props.menuItems.map(function( menuItem, i ){
var selectedClass = "";
if( i == this.state.selectedItem ) {
selectedClass = " selected";
}
var className = "menu__item" + selectedClass;
return <a key={i} href={menuItem.href} className={className} title={menuItem.title} onClick={this.handleMenuItemClick.bind(null, i)}>{menuItem.label}</a>;
}.bind(this))}
</nav>
);
},
componentDidMount: function( ) {
this.props.onSelected( this.state.selectedItem );
},
handleMenuItemClick: function( i, e ) {
if( !this.props.onSelect ) {
this.setMenuItem( i );
return;
}
this.props.onSelect( i, this.setMenuItem.bind( this, i ) );
},
setMenuItem: function( index ) {
this.setState({
selectedItem: index
}, function(){
this.props.onSelected( index );
}.bind(this));
}
});
// content list component
var ContentList = React.createClass({
render: function( ) {
return (
<div className="content-container">
{React.Children.map(this.props.children, function( child, i ){
if( i == this.props.visible )
return child;
return false;
}.bind(this))}
</div>
);
}
});
// content component
var Content = React.createClass({
render: function( ) {
return (
<div className="content">
{this.props.children}
</div>
);
}
});
// application
var Application = React.createClass({
getInitialState: function(){
var self = this;
var state = {
menuProps:{
menuItems: [
{
href: "#a",
title: "A",
label: "A Item"
},
{
href: "#b",
title: "B",
label: "B Item"
},
{
href: "#c",
title: "C",
label: "C Item"
}
],
onSelect: function( i, done ) {
console.log( "selecting: ", i );
//self.state
done( );
},
onSelected: function( i ) {
self.state.selectedContent = i;
self.setState( self.state );
}
},
selectedContent: 0
};
return state;
},
render: function(){
return (
<div>
<Menu {...this.state.menuProps} />
<ContentList visible={this.state.selectedContent}>
<Content>
Content for A element
</Content>
<Content>
Content for B element
</Content>
<Content>
Content for C element
</Content>
</ContentList>
</div>
);
}
});
React.render(<Application />, document.body);</script></body>
</html>
Raw
jsbin.ruwiwizula.css
html,
body {
padding: 0;
margin: 0;
}
.menu {
position: relative;
height: 30px;
padding: 5px;
background: #eee;
border-bottom: 1px solid #ddd;
box-sizing: border-box;
}
.menu__item {
color: #aaa;
text-decoration: none;
padding: 5px;
font-family: verdana;
border-bottom: 1px solid transparent;
transition: all 500ms;
}
.menu__item.selected {
color: #777;
border-color: #aaa;
}
.content-container {
position: absolute;
top: 30px;
bottom: 0;
left: 0;
right: 0;
}
.content {
position: absolute;
padding: 5px;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: auto;
}
Raw
jsbin.ruwiwizula.js
// menu component
var Menu = React.createClass({displayName: 'Menu',
getInitialState: function( ) {
return {
selectedItem: 0
};
},
render: function(){
return (
React.createElement("nav", {className: "menu"},
this.props.menuItems.map(function( menuItem, i ){
var selectedClass = "";
if( i == this.state.selectedItem ) {
selectedClass = " selected";
}
var className = "menu__item" + selectedClass;
return React.createElement("a", {key: i, href: menuItem.href, className: className, title: menuItem.title, onClick: this.handleMenuItemClick.bind(null, i)}, menuItem.label);
}.bind(this))
)
);
},
componentDidMount: function( ) {
this.props.onSelected( this.state.selectedItem );
},
handleMenuItemClick: function( i, e ) {
if( !this.props.onSelect ) {
this.setMenuItem( i );
return;
}
this.props.onSelect( i, this.setMenuItem.bind( this, i ) );
},
setMenuItem: function( index ) {
this.setState({
selectedItem: index
}, function(){
this.props.onSelected( index );
}.bind(this));
}
});
// content list component
var ContentList = React.createClass({displayName: 'ContentList',
render: function( ) {
return (
React.createElement("div", {className: "content-container"},
React.Children.map(this.props.children, function( child, i ){
if( i == this.props.visible )
return child;
return false;
}.bind(this))
)
);
}
});
// content component
var Content = React.createClass({displayName: 'Content',
render: function( ) {
return (
React.createElement("div", {className: "content"},
this.props.children
)
);
}
});
// application
var Application = React.createClass({displayName: 'Application',
getInitialState: function(){
var self = this;
var state = {
menuProps:{
menuItems: [
{
href: "#a",
title: "A",
label: "A Item"
},
{
href: "#b",
title: "B",
label: "B Item"
},
{
href: "#c",
title: "C",
label: "C Item"
}
],
onSelect: function( i, done ) {
console.log( "selecting: ", i );
//self.state
done( );
},
onSelected: function( i ) {
self.state.selectedContent = i;
self.setState( self.state );
}
},
selectedContent: 0
};
return state;
},
render: function(){
return (
React.createElement("div", null,
React.createElement(Menu, React.__spread({}, this.state.menuProps)),
React.createElement(ContentList, {visible: this.state.selectedContent},
React.createElement(Content, null,
"Content for A element"
),
React.createElement(Content, null,
"Content for B element"
),
React.createElement(Content, null,
"Content for C element"
)
)
)
);
}
});
React.render(React.createElement(Application, null), document.body);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment