Lesson 7 Practice Activities

Menu Slide Transition

Adding a subtle transition effects to menus can help a user feel comfortable with a user interface as it becomes more natural to use. Sudden changes between states can be jarring. For dropdown menus, sliding the menu down can be one effect that can help improve the user experience for users.

HTML Code


<nav>
  <ul class="horizontal-menu">
    <li><a href="#">Home</a></li>
    <li class="dropdown">
      <button type="button" class="dropdown-title">Main Link 1</button>
      <ul class="dropdown-menu">
        <li><a href="#">Sub-Link 1</a></li>
        <li><a href="#">Sub-Link 2</a></li>
        <li><a href="#">Sub-Link 3</a></li>
        <li><a href="#">Sub-Link 4</a></li>
        <li><a href="#">Sub-Link 5</a></li>
      </ul>
    </li>
    <li><a href="#">Main Link 2</a></li>
  </ul>
</nav>

CSS Code


.horizontal-menu > li > a,
.horizontal-menu > li .dropdown-title {
  transition: 200ms all 100ms ease-out;
}

.dropdown .dropdown-menu {
  transition: 200ms all 100ms ease-out;
}

.dropdown .dropdown-menu a {
  transition: 280ms all 100ms ease-out;
}