title: how to put url in javascript array for nav menu
body: <p>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:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="root" class="menu"&gt;
      &lt;nav&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a id="web" href="http://darrellewillis.com" onclick="location.href=this.href;"&gt;Web&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a id="operations" href="http://darrellewillis.com"&gt;Operations&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a id="m&amp;a" href="http://darrellewillis.com"&gt;M&amp;A&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a id="finance" href="http://darrellewillis.com"&gt;Finance&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>value: function render() {
            var _this2 = this;
            var iconArrayOne = ["Web", "Operations"];
            var iconArrayTwo = ["M &amp; A", "Finance"];
            var tooltipArrayOne = ["Web", "Operations"];
            var tooltipArrayTwo = ["M &amp; A", "Finance"];
  </code></pre>
  
  <p>Thank you so much for any help that anyone can give!</p>
  
  <p>Full Code:
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>(function() {
    'use strict';
  
    var hasOwn = {}.hasOwnProperty;
  
    function classNames() {
      var classes = [];
  
      for (var i = 0; i &lt; 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) &amp;&amp; arg[key]) {
              classes.push(key);
            }
          }
        }
      }
  
      return classes.join(' ');
    }
  
    if (typeof module !== 'undefined' &amp;&amp; module.exports) {
      module.exports = classNames;
    } else if (typeof define === 'function' &amp;&amp; typeof define.amd === 'object' &amp;&amp; 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 &lt; 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 &amp;&amp; (typeof call === "object" || typeof call === "function") ? call : self;
  }
  
  function _inherits(subClass, superClass) {
    if (typeof superClass !== "function" &amp;&amp; superClass !== null) {
      throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
    }
    subClass.prototype = Object.create(superClass &amp;&amp; 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 &amp; A", "Finance"];
        var tooltipArrayOne = ["Web", "Operations"];
        var tooltipArrayTwo = ["M &amp; 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'));</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://npmcdn.com/react-motion@0.4.2/build/react-motion.js"&gt;&lt;/script&gt;
  
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;body&gt;
  
    &lt;div id="root" class="menu"&gt;
      &lt;nav&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a id="web" href="http://darrellewillis.com" onclick="location.href=this.href;"&gt;Web&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a id="operations" href="http://darrellewillis.com"&gt;Operations&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a id="m&amp;a" href="http://darrellewillis.com"&gt;M&amp;A&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a id="finance" href="http://darrellewillis.com"&gt;Finance&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/nav&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>