CSS Tip

Navigation menu with sliding items

Create a simple navigation menu with a sliding effect

<nav>
  <ul id="menu">
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li class="active"><a href="/shop">Shop</a></li>
    <li><a href="/contact">Contact</a></li>
</ul>
</nav>
nav {
  --c: #E5DDCB;
  --b: #524656;
  
  background: var(--b);
  display: flex;
}
ul {
  margin: 0 0 0 auto;
  padding: 0;
  display: flex;
  list-style: none;
}
ul li a {
  padding: 0 .8em;
  display: block;
  color: #0000;
  background: 
    linear-gradient(var(--c) 50%,var(--b) 0) 
    0% var(--_i,100%)/100% 200%;
  text-shadow:
    0 calc(2em - var(--_i,2em)) var(--c),
    0 var(--_i,-2em) var(--b);
  text-decoration: none;
  font: bold 30px/2em sans-serif;
  overflow: hidden;
  outline-offset: -5px;
  transition: .5s;
}
ul li a:hover,
ul li.active a{
  --_i: 0px;
}
ul li a:focus-visible{
  outline: 2px dashed var(--c);
}
ul li.active a:focus-visible {
  outline-color: var(--b);
}

See the Pen CSS only menu with sliding effect by Temani Afif (@t_afif) on CodePen.

More detail: css-tricks.com/cool-hover-effects-that-use-css-text-shadow

More CSS Tips