我试图使扩展按钮有导航菜单的链接。我尝试了几种不同的方法，但都无济于事。我尝试用document.getElementById()创建变量，这也不起作用。完整的代码是附加的，但这里是HTML和JS部分，我试图与工作:
HTML<div id="root" class="menu">
<nav>
<ul>
<li><a id="web" href="http://darrellewillis.com" onclick="location.href=this.href;">Web</a>
</li>
<li><a id="operations" href="http://darrellewillis.com">Operations</a>
</li>
<li><a id="m&a" href="http://darrellewillis.com">M&A</a>
</li>
<li><a id="finance" href="http://darrellewillis.com">Finance</a>
</li>
</ul>
</nav>
</div>
value: function render() {
var _this2 = this;
var iconArrayOne = ["Web", "Operations"];
var iconArrayTwo = ["M & A", "Finance"];
var tooltipArrayOne = ["Web", "Operations"];
var tooltipArrayTwo = ["M & A", "Finance"];
非常感谢任何人能给予的任何帮助!
完整代码:
(function() {
'use strict';
var hasOwn = {}.hasOwnProperty;
function classNames() {
var classes = [];
for (var i = 0; i < arguments.length; i++) {
var arg = arguments[i];
if (!arg) continue;
var argType = typeof arg;
if (argType === 'string' || argType === 'number') {
classes.push(arg);
} else if (Array.isArray(arg)) {
classes.push(classNames.apply(null, arg));
} else if (argType === 'object') {
for (var key in arg) {
if (hasOwn.call(arg, key) && arg[key]) {
classes.push(key);
}
}
}
}
return classes.join(' ');
}
if (typeof module !== 'undefined' && module.exports) {
module.exports = classNames;
} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {
// register as 'classnames', consistent with npm package name
define('classnames', [], function() {
return classNames;
});
} else {
window.classNames = classNames;
}
}());
var _createClass = function() {
function defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
return function(Constructor, protoProps, staticProps) {
if (protoProps) defineProperties(Constructor.prototype, protoProps);
if (staticProps) defineProperties(Constructor, staticProps);
return Constructor;
};
}();
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
function _possibleConstructorReturn(self, call) {
if (!self) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
}
return call && (typeof call === "object" || typeof call === "function") ? call : self;
}
function _inherits(subClass, superClass) {
if (typeof superClass !== "function" && superClass !== null) {
throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
}
subClass.prototype = Object.create(superClass && superClass.prototype, {
constructor: {
value: subClass,
enumerable: false,
writable: true,
configurable: true
}
});
if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
}
var _React = React;
var Component = _React.Component;
var _ReactDOM = ReactDOM;
var render = _ReactDOM.render;
var _ReactMotion = ReactMotion;
var Motion = _ReactMotion.Motion;
var StaggeredMotion = _ReactMotion.StaggeredMotion;
var spring = _ReactMotion.spring;
var _ref = "";
var noop = _ref.noop;
var App = function(_Component) {
_inherits(App, _Component);
function App() {
_classCallCheck(this, App);
var _this = _possibleConstructorReturn(this, (App.__proto__ || Object.getPrototypeOf(App)).call(this));
_this.state = {
active: false
};
_this._onClick = _this._onClick.bind(_this);
return _this;
}
_createClass(App, [{
key: "_onClick",
value: function _onClick() {
this.setState({
active: !this.state.active
});
}
}, {
key: "render",
value: function render() {
var _this2 = this;
var iconArrayOne = ["Web", "Operations"];
var iconArrayTwo = ["M & A", "Finance"];
var tooltipArrayOne = ["Web", "Operations"];
var tooltipArrayTwo = ["M & A", "Finance"];
return React.createElement(
"div", {
className: "container"
},
React.createElement(
ButtonGroup,
null,
React.createElement(
StaggeredMotion, {
defaultStyles: [{
x: -45,
o: 0
}, {
x: -45,
o: 0
}],
styles: function styles(prevInterpolatedStyles) {
return prevInterpolatedStyles.map(function(_, i) {
return i === prevInterpolatedStyles.length - 1 ? {
x: spring(_this2.state.active ? 0 : -45, {
stiffness: 330,
damping: 20
}),
o: spring(_this2.state.active ? 1 : 0, {
stiffness: 330,
damping: 20
})
} : {
x: spring(prevInterpolatedStyles[i + 1].x, {
stiffness: 330,
damping: 20
}),
o: spring(prevInterpolatedStyles[i + 1].o, {
stiffness: 330,
damping: 20
})
};
});
}
},
function(interpolatingStyles) {
return React.createElement(
ButtonGroup,
null,
interpolatingStyles.map(function(style, i) {
return React.createElement(
Button, {
key: i,
style: {
position: 'relative',
right: style.x,
opacity: style.o,
pointerEvents: _this2.state.active ? 'auto' : 'none'
}
},
React.createElement(Tooltip, {
text: tooltipArrayOne[i]
}),
iconArrayOne[i]
);
})
);
}
),
React.createElement(
Motion, {
defaultStyle: {
s: 0.675
},
style: {
s: spring(this.state.active ? 1 : 0.675, {
stiffness: 330,
damping: 14
})
}
},
function(interpolatingStyles) {
return React.createElement(
Button, {
className: "button--large",
onClick: _this2._onClick,
style: {
transform: 'scale(' + interpolatingStyles.s + ')'
}
},
React.createElement("span", {
className: _this2.state.active ? 'icon active' : 'icon'
})
);
}
),
React.createElement(
StaggeredMotion, {
defaultStyles: [{
x: -45,
o: 0
}, {
x: -45,
o: 0
}],
styles: function styles(prevInterpolatedStyles) {
return prevInterpolatedStyles.map(function(_, i) {
return i === 0 ? {
x: spring(_this2.state.active ? 0 : -45, {
stiffness: 330,
damping: 20
}),
o: spring(_this2.state.active ? 1 : 0, {
stiffness: 330,
damping: 20
})
} : {
x: spring(prevInterpolatedStyles[i - 1].x, {
stiffness: 330,
damping: 20
}),
o: spring(prevInterpolatedStyles[i - 1].o, {
stiffness: 330,
damping: 20
})
};
});
}
},
function(interpolatingStyles) {
return React.createElement(
ButtonGroup,
null,
interpolatingStyles.map(function(style, i) {
return React.createElement(
Button, {
key: i,
style: {
position: 'relative',
left: style.x,
opacity: style.o,
pointerEvents: _this2.state.active ? 'auto' : 'none'
}
},
React.createElement(Tooltip, {
text: tooltipArrayTwo[i]
}),
iconArrayTwo[i]
);
})
);
}
)
)
);
}
}]);
return App;
}(Component);
var Tooltip = function Tooltip(props) {
return React.createElement(
"span", {
className: "tooltip"
},
props.text
);
};
var ButtonGroup = function ButtonGroup(props) {
return React.createElement(
"div", {
className: "button-group",
style: props.style
},
props.children
);
};
var Button = function Button(props) {
return React.createElement(
"button", {
className: classNames('button', props.className),
style: props.style,
onClick: props.onClick || noop
},
props.children
);
};
render(React.createElement(App, null), document.getElementById('root'));body {
background: #F3F3F3;
}
.container {
position: absolute;
top: 50%;
left: 50%;
display: block;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
margin: 0 auto;
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: translate(-50%, -50%) scale(1, 1);
transform: translate(-50%, -50%) scale(1, 1);
}
.button-group {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.button {
position: relative;
outline: none;
background: #000000;
width: 70px;
height: 70px;
border: 0;
border-radius: 100px;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), 0 2px 0 rgba(108, 46, 185, 0.2);
margin: 0 12px;
color: #FFF;
cursor: pointer;
}
.button--large {
z-index: 1;
position: relative;
width: 60px;
height: 60px;
}
.button:hover .tooltip {
top: -100%;
opacity: 0;
}
.icon {
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: background 0.3s ease;
transition: background 0.3s ease;
}
.icon,
.icon:before,
.icon:after {
position: absolute;
display: block;
background: #FFF;
width: 6px;
height: 6px;
border-radius: 10px;
}
.icon:before,
.icon:after {
content: '';
-webkit-transition: all 100ms ease, right 100ms 100ms ease, left 100ms 100ms ease;
transition: all 100ms ease, right 100ms 100ms ease, left 100ms 100ms ease;
}
.icon:before {
left: -11px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.icon:after {
right: -11px;
-webkit-transform: translateX(50%);
transform: translateX(50%);
}
.icon.active {
background: transparent;
-webkit-transition: background 0.3s ease;
transition: background 0.3s ease;
}
.icon.active,
.icon.active:before,
.icon.active:after {
height: 3px;
}
.icon.active:before,
.icon.active:after {
width: 20px;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transition: all 100ms ease, width 100ms 100ms ease, -webkit-transform 300ms 200ms cubic-bezier(0.28, 0.55, 0.385, 1.65);
transition: all 100ms ease, width 100ms 100ms ease, -webkit-transform 300ms 200ms cubic-bezier(0.28, 0.55, 0.385, 1.65);
transition: all 100ms ease, width 100ms 100ms ease, transform 300ms 200ms cubic-bezier(0.28, 0.55, 0.385, 1.65);
transition: all 100ms ease, width 100ms 100ms ease, transform 300ms 200ms cubic-bezier(0.28, 0.55, 0.385, 1.65), -webkit-transform 300ms 200ms cubic-bezier(0.28, 0.55, 0.385, 1.65);
}
.icon.active:before {
left: 50%;
-webkit-transform: translateX(-50%) rotate(45deg);
transform: translateX(-50%) rotate(45deg);
}
.icon.active:after {
right: 50%;
-webkit-transform: translateX(50%) rotate(-45deg);
transform: translateX(50%) rotate(-45deg);
}
@-webkit-keyframes ripple {
0% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1), 0 0 0 10px rgba(255, 255, 255, 0.1), 0 0 0 20px rgba(255, 255, 255, 0.1), 0 0 0 30px rgba(255, 255, 255, 0.1);
}
100% {
box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.1), 0 0 0 20px rgba(255, 255, 255, 0.1), 0 0 0 30px rgba(255, 255, 255, 0.1), 0 0 0 40px rgba(255, 255, 255, 0);
}
}
@keyframes ripple {
0% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1), 0 0 0 10px rgba(255, 255, 255, 0.1), 0 0 0 20px rgba(255, 255, 255, 0.1), 0 0 0 30px rgba(255, 255, 255, 0.1);
}
100% {
box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.1), 0 0 0 20px rgba(255, 255, 255, 0.1), 0 0 0 30px rgba(255, 255, 255, 0.1), 0 0 0 40px rgba(255, 255, 255, 0);
}
}
.tooltip {
position: absolute;
top: -80%;
left: 50%;
display: inline-block;
background: rgba(0, 0, 0, 0.8);
border-radius: 2px;
padding: 4px;
box-sizing: border-box;
-webkit-transform: translate(-50%, 50%);
transform: translate(-50%, 50%);
color: #FFF;
font-size: 10px;
opacity: 0;
-webkit-transition: 200ms ease;
transition: 200ms ease;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://npmcdn.com/react-motion@0.4.2/build/react-motion.js"></script>
<!DOCTYPE html>
<html>
<body>
<div id="root" class="menu">
<nav>
<ul>
<li><a id="web" href="http://darrellewillis.com" onclick="location.href=this.href;">Web</a>
</li>
<li><a id="operations" href="http://darrellewillis.com">Operations</a>
</li>
<li><a id="m&a" href="http://darrellewillis.com">M&A</a>
</li>
<li><a id="finance" href="http://darrellewillis.com">Finance</a>
</li>
</ul>
</nav>
</div>
</body>
</html>像下面这样怎么样?我使用对象数组来定义按钮，而不是字符串数组:
var iconArrayOne = [
{name: "Web", link: "http://darrellewillis.com"},
{name: "Operations", link: "http://darrellewillis.com"}
];
var iconArrayTwo = [
{name: "M & A", link: "http://darrellewillis.com"},
{name: "Finance", link: "http://darrellewillis.com"}
];
然后使用link值创建一个函数来执行重定向:
function goTo(link) {
return function() {
window.location = link;
}
}
这是一个相当大的代码片段，所以这里有一个区别，以便您可以看到我在上下文中实际更改了什么。https://www.diffchecker.com/1jPJsqlx
(function() {
'use strict';
var hasOwn = {}.hasOwnProperty;
function classNames() {
var classes = [];
for (var i = 0; i < arguments.length; i++) {
var arg = arguments[i];
if (!arg) continue;
var argType = typeof arg;
if (argType === 'string' || argType === 'number') {
classes.push(arg);
} else if (Array.isArray(arg)) {
classes.push(classNames.apply(null, arg));
} else if (argType === 'object') {
for (var key in arg) {
if (hasOwn.call(arg, key) && arg[key]) {
classes.push(key);
}
}
}
}
return classes.join(' ');
}
if (typeof module !== 'undefined' && module.exports) {
module.exports = classNames;
} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {
// register as 'classnames', consistent with npm package name
define('classnames', [], function() {
return classNames;
});
} else {
window.classNames = classNames;
}
}());
var _createClass = function() {
function defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
return function(Constructor, protoProps, staticProps) {
if (protoProps) defineProperties(Constructor.prototype, protoProps);
if (staticProps) defineProperties(Constructor, staticProps);
return Constructor;
};
}();
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
function _possibleConstructorReturn(self, call) {
if (!self) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
}
return call && (typeof call === "object" || typeof call === "function") ? call : self;
}
function _inherits(subClass, superClass) {
if (typeof superClass !== "function" && superClass !== null) {
throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
}
subClass.prototype = Object.create(superClass && superClass.prototype, {
constructor: {
value: subClass,
enumerable: false,
writable: true,
configurable: true
}
});
if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
}
var _React = React;
var Component = _React.Component;
var _ReactDOM = ReactDOM;
var render = _ReactDOM.render;
var _ReactMotion = ReactMotion;
var Motion = _ReactMotion.Motion;
var StaggeredMotion = _ReactMotion.StaggeredMotion;
var spring = _ReactMotion.spring;
var _ref = "";
var noop = _ref.noop;
/* Method to create the function that creates the link-like behaviour */
function goTo(link) {
return function() {
window.location = link;
}
}
var App = function(_Component) {
_inherits(App, _Component);
function App() {
_classCallCheck(this, App);
var _this = _possibleConstructorReturn(this, (App.__proto__ || Object.getPrototypeOf(App)).call(this));
_this.state = {
active: false
};
_this._onClick = _this._onClick.bind(_this);
return _this;
}
_createClass(App, [{
key: "_onClick",
value: function _onClick() {
this.setState({
active: !this.state.active
});
}
}, {
key: "render",
value: function render() {
var _this2 = this;
//var iconArrayOne = ["Web", "Operations"];
//var iconArrayTwo = ["M & A", "Finance"];
var tooltipArrayOne = ["Web", "Operations"];
var tooltipArrayTwo = ["M & A", "Finance"];
/* Defining the new Arrays */
var iconArrayOne = [
{name: "Web", link: "http://darrellewillis.com"},
{name: "Operations", link: "http://darrellewillis.com"}
];
var iconArrayTwo = [
{name: "M & A", link: "http://darrellewillis.com"},
{name: "Finance", link: "http://darrellewillis.com"}
];
return React.createElement(
"div", {
className: "container"
},
React.createElement(
ButtonGroup,
null,
React.createElement(
StaggeredMotion, {
defaultStyles: [{
x: -45,
o: 0
}, {
x: -45,
o: 0
}],
styles: function styles(prevInterpolatedStyles) {
return prevInterpolatedStyles.map(function(_, i) {
return i === prevInterpolatedStyles.length - 1 ? {
x: spring(_this2.state.active ? 0 : -45, {
stiffness: 330,
damping: 20
}),
o: spring(_this2.state.active ? 1 : 0, {
stiffness: 330,
damping: 20
})
} : {
x: spring(prevInterpolatedStyles[i + 1].x, {
stiffness: 330,
damping: 20
}),
o: spring(prevInterpolatedStyles[i + 1].o, {
stiffness: 330,
damping: 20
})
};
});
}
},
function(interpolatingStyles) {
return React.createElement(
ButtonGroup,
null,
interpolatingStyles.map(function(style, i) {
return React.createElement(
Button, {
key: i,
style: {
position: 'relative',
right: style.x,
opacity: style.o,
pointerEvents: _this2.state.active ? 'auto' : 'none'
},
/* Using the goTo method */
onClick: goTo(iconArrayOne[i].link)
},
React.createElement(Tooltip, {
text: tooltipArrayOne[i]
}),
iconArrayOne[i].name
);
})
);
}
),
React.createElement(
Motion, {
defaultStyle: {
s: 0.675
},
style: {
s: spring(this.state.active ? 1 : 0.675, {
stiffness: 330,
damping: 14
})
}
},
function(interpolatingStyles) {
return React.createElement(
Button, {
className: "button--large",
onClick: _this2._onClick,
style: {
transform: 'scale(' + interpolatingStyles.s + ')'
}
},
React.createElement("span", {
className: _this2.state.active ? 'icon active' : 'icon'
})
);
}
),
React.createElement(
StaggeredMotion, {
defaultStyles: [{
x: -45,
o: 0
}, {
x: -45,
o: 0
}],
styles: function styles(prevInterpolatedStyles) {
return prevInterpolatedStyles.map(function(_, i) {
return i === 0 ? {
x: spring(_this2.state.active ? 0 : -45, {
stiffness: 330,
damping: 20
}),
o: spring(_this2.state.active ? 1 : 0, {
stiffness: 330,
damping: 20
})
} : {
x: spring(prevInterpolatedStyles[i - 1].x, {
stiffness: 330,
damping: 20
}),
o: spring(prevInterpolatedStyles[i - 1].o, {
stiffness: 330,
damping: 20
})
};
});
}
},
function(interpolatingStyles) {
return React.createElement(
ButtonGroup,
null,
interpolatingStyles.map(function(style, i) {
return React.createElement(
Button, {
key: i,
style: {
position: 'relative',
left: style.x,
opacity: style.o,
pointerEvents: _this2.state.active ? 'auto' : 'none'
},
onClick: goTo(iconArrayTwo[i].link)
},
React.createElement(Tooltip, {
text: tooltipArrayTwo[i]
}),
iconArrayTwo[i].name
);
})
);
}
)
)
);
}
}]);
return App;
}(Component);
var Tooltip = function Tooltip(props) {
return React.createElement(
"span", {
className: "tooltip"
},
props.text
);
};
var ButtonGroup = function ButtonGroup(props) {
return React.createElement(
"div", {
className: "button-group",
style: props.style
},
props.children
);
};
var Button = function Button(props) {
return React.createElement(
"button", {
className: classNames('button', props.className),
style: props.style,
onClick: props.onClick || noop
},
props.children
);
};
render(React.createElement(App, null), document.getElementById('root'));body {
background: #F3F3F3;
}
.container {
position: absolute;
top: 50%;
left: 50%;
display: block;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
margin: 0 auto;
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: translate(-50%, -50%) scale(1, 1);
transform: translate(-50%, -50%) scale(1, 1);
}
.button-group {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.button {
position: relative;
outline: none;
background: #000000;
width: 70px;
height: 70px;
border: 0;
border-radius: 100px;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), 0 2px 0 rgba(108, 46, 185, 0.2);
margin: 0 12px;
color: #FFF;
cursor: pointer;
}
.button--large {
z-index: 1;
position: relative;
width: 60px;
height: 60px;
}
.button:hover .tooltip {
top: -100%;
opacity: 0;
}
.icon {
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: background 0.3s ease;
transition: background 0.3s ease;
}
.icon,
.icon:before,
.icon:after {
position: absolute;
display: block;
background: #FFF;
width: 6px;
height: 6px;
border-radius: 10px;
}
.icon:before,
.icon:after {
content: '';
-webkit-transition: all 100ms ease, right 100ms 100ms ease, left 100ms 100ms ease;
transition: all 100ms ease, right 100ms 100ms ease, left 100ms 100ms ease;
}
.icon:before {
left: -11px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.icon:after {
right: -11px;
-webkit-transform: translateX(50%);
transform: translateX(50%);
}
.icon.active {
background: transparent;
-webkit-transition: background 0.3s ease;
transition: background 0.3s ease;
}
.icon.active,
.icon.active:before,
.icon.active:after {
height: 3px;
}
.icon.active:before,
.icon.active:after {
width: 20px;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transition: all 100ms ease, width 100ms 100ms ease, -webkit-transform 300ms 200ms cubic-bezier(0.28, 0.55, 0.385, 1.65);
transition: all 100ms ease, width 100ms 100ms ease, -webkit-transform 300ms 200ms cubic-bezier(0.28, 0.55, 0.385, 1.65);
transition: all 100ms ease, width 100ms 100ms ease, transform 300ms 200ms cubic-bezier(0.28, 0.55, 0.385, 1.65);
transition: all 100ms ease, width 100ms 100ms ease, transform 300ms 200ms cubic-bezier(0.28, 0.55, 0.385, 1.65), -webkit-transform 300ms 200ms cubic-bezier(0.28, 0.55, 0.385, 1.65);
}
.icon.active:before {
left: 50%;
-webkit-transform: translateX(-50%) rotate(45deg);
transform: translateX(-50%) rotate(45deg);
}
.icon.active:after {
right: 50%;
-webkit-transform: translateX(50%) rotate(-45deg);
transform: translateX(50%) rotate(-45deg);
}
@-webkit-keyframes ripple {
0% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1), 0 0 0 10px rgba(255, 255, 255, 0.1), 0 0 0 20px rgba(255, 255, 255, 0.1), 0 0 0 30px rgba(255, 255, 255, 0.1);
}
100% {
box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.1), 0 0 0 20px rgba(255, 255, 255, 0.1), 0 0 0 30px rgba(255, 255, 255, 0.1), 0 0 0 40px rgba(255, 255, 255, 0);
}
}
@keyframes ripple {
0% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1), 0 0 0 10px rgba(255, 255, 255, 0.1), 0 0 0 20px rgba(255, 255, 255, 0.1), 0 0 0 30px rgba(255, 255, 255, 0.1);
}
100% {
box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.1), 0 0 0 20px rgba(255, 255, 255, 0.1), 0 0 0 30px rgba(255, 255, 255, 0.1), 0 0 0 40px rgba(255, 255, 255, 0);
}
}
.tooltip {
position: absolute;
top: -80%;
left: 50%;
display: inline-block;
background: rgba(0, 0, 0, 0.8);
border-radius: 2px;
padding: 4px;
box-sizing: border-box;
-webkit-transform: translate(-50%, 50%);
transform: translate(-50%, 50%);
color: #FFF;
font-size: 10px;
opacity: 0;
-webkit-transition: 200ms ease;
transition: 200ms ease;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://npmcdn.com/react-motion@0.4.2/build/react-motion.js"></script>
<!DOCTYPE html>
<html>
<body>
<div id="root" class="menu">
<nav>
<ul>
<li><a id="web" href="http://darrellewillis.com" onclick="location.href=this.href;">Web</a>
</li>
<li><a id="operations" href="http://darrellewillis.com">Operations</a>
</li>
<li><a id="m&a" href="http://darrellewillis.com">M&A</a>
</li>
<li><a id="finance" href="http://darrellewillis.com">Finance</a>
</li>
</ul>
</nav>
</div>
</body>
</html>