cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div id="menu-container"></div>

<!--

In this snippet the submenu mounts and unmounts from the DOM with an added slide-down animation effect using a React Add-on called ReactCSSTransitionGroup.

Wrapping a component in a ReactCSSTransitionGroup adds and exposes to you some possible extra transition phases: appear, enter, and leave. It applies pairs of class names during those phases. This gives you an easy way to apply basic CSS animations when the component enters and leaves the DOM. You can control the class names you'll be using and the durations of transitions by passing specific props to the ReactCSSTransitionGroup component.

If you want to learn more, there's very good documentation explaining all this in detail:
https://reactcommunity.org/react-transition-group/
https://reactjs.org/docs/animation.html#high-level-api-reactcsstransitiongroup

If you're not familiar with CSS transitions yet, you can learn about them on https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions (MDN web docs are the best). Be sure to check out how to keep your animations cheap and smooth: https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/.

Note how I added a container around the transitioned Submenu to constrain it and control the starting point of the animation. You can comment out the styles for the container (.submenu-container) to see the state of affairs before doing this.

Check out some cool examples of using ReactCSSTransitionGroup to achieve other slide animation effects:
- https://codepen.io/agrewell/pen/ZYdGOJ
- https://medium.com/front-end-developers/sliding-react-components-4873e232907e

-->
            
          
!
            
              $color-blue: #00aeef;
$color-blue-dark: #0d2035;
$submenu-width: 180px;

/*
  Slide animation styles

  You may need to add vendor prefixes for transform depending on your desired browser support.
*/

.slide-enter {
  transform: translateY(-100%);
  transition: .3s cubic-bezier(0, 1, 0.5, 1);

  &.slide-enter-active {
    transform: translateY(0%);
  }
}

.slide-leave {
  transform: translateY(0%);
  transition: .3s ease-in-out;

  &.slide-leave-active {
    transform: translateY(-100%);
  }
}

/*
  CSS for the submenu container, needed to adjust the behaviour to our needs.
  Try commenting out this part to see how the animation looks without the container involved.
*/

.submenu-container {
  height: 150px; // this value can be higher, but needs to be set
  min-width: $submenu-width;
  position: absolute;
  overflow: hidden;
  z-index: -1;  
}


/*
  Layout styles.

  I like to work on stuff that's good looking so I remixed a cool simple menu by Mike Rojas (thanks!): https://codepen.io/mikerojas87/pen/rojKb 
*/

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

.menu-container {
  text-align: center;
}

nav {
  ul {
    list-style: none;
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 0;
  }
}

.nav {
  display: inline-block;
  margin: 2rem auto 0;
  background: $color-blue-dark;
  color: #fff;
  text-align: left;
  
  a {
    display: block;
    padding: 0 16px;
    line-height: inherit;
    cursor: pointer;
  }
}
  
.nav__menu {
  line-height: 45px;
  font-weight: 700;
  text-transform: uppercase;
}
  
.nav__menu-item {
  display: inline-block;
  position: relative;

  &:hover {
    background-color: $color-blue;

    .nav__submenu {
      display: block;
    }
  }
}
    
.nav__submenu {
  font-weight: 300;
  text-transform: none;
  display: none;
  position: absolute;
  width: $submenu-width;
  background-color: $color-blue;
}
    
.nav__submenu-item {
  &:hover {
    background: rgba(#000, 0.1);
  }
}

            
          
!
            
              let CSSTransitionGroup = React.addons.CSSTransitionGroup;

class Submenu extends React.Component {
  render() {
    return (
      <ul className="nav__submenu">
        <li className="nav__submenu-item ">
          <a>Our Company</a>
        </li>
        <li className="nav__submenu-item ">
          <a>Our Team</a>
        </li>
        <li className="nav__submenu-item ">
          <a>Our Portfolio</a>
        </li>
      </ul>
    )
  }
}

class Menu extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showAboutMenu: false
    };
  }
  
  handleHover = (event) => {
    this.setState({ showAboutMenu: true });
  };
  
  handleLeave = (event) => {
    this.setState({ showAboutMenu: false });
  };
  
  render() {
    return (
      <nav className="nav">
        <ul className="nav__menu">
          <li className="nav__menu-item">
            <a>Home</a>
          </li>
          <li className="nav__menu-item" onMouseLeave={this.handleLeave}>
            <a onMouseEnter={this.handleHover}>
              About
            </a>
            <div className="submenu-container">
              <CSSTransitionGroup
                transitionName="slide"
                transitionEnterTimeout={300}
                transitionLeaveTimeout={300}
              >
                { this.state.showAboutMenu && <Submenu /> }
              </CSSTransitionGroup>
            </div>
          </li>

          <li className="nav__menu-item">
            <a>Contact</a>
          </li>
        </ul>
      </nav>
    )
  }
}

ReactDOM.render(
  <Menu />,
  document.getElementById("menu-container")
);
            
          
!
999px
Loading ..................

Console