DWillis DWillis - 2 months ago 13
React JSX Question

how to put url in javascript array for nav menu

I am trying to make the expanded button have links for a nav menu. I have tried several different methods to no avail. I tried creating variables with document.getElementById() and this does not work either. Full code is attached, but here are the HTML and JS portions I am trying to work with:

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>


Javascript

value: function render() {
var _this2 = this;
var iconArrayOne = ["Web", "Operations"];
var iconArrayTwo = ["M & A", "Finance"];
var tooltipArrayOne = ["Web", "Operations"];
var tooltipArrayTwo = ["M & A", "Finance"];


Thank you so much for any help that anyone can give!

Full Code:


(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>




Answer

How about something like the below? I'm defining the buttons using an array of objects instead of an array of strings:

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"}
];

Then using the link value to create a function to do the redirect:

function goTo(link) {
  return function() {
    window.location = link;
  }
}

It's quite a large code snippet, so here is a diff so you can see what I actually changed in context. 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>