Skip to content

CSS Yellow Menu


HTML CODE:

 <ul>
            <li>
                <a href="#">home
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                </a>
            </li>
            <li><a href="#">about
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                </a>
            </li>
            <li><a href="#">services
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                </a>
            </li>
            <li><a href="#">portfolio
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                </a>
            </li>
            <li><a href="#">contact
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                </a>
            </li>
        </ul>

CSS MENU:

body{
  margin:0;
  padding:0;
  font-family:sans-serif;
  background-color:#ffff61;
}
ul{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  margin:0;
  padding:0;
  display:flex;
}
ul li{
  position:relative;
  list-style:none;
}
ul li a{
  position:relative;
  width:120px;
  height:40px;
  display:block;
  text-transform:uppercase;
  text-decoration:none;
  color:#262626;
  text-align:center;
  line-height:40px;
  box-sizing:border-box;
  transition:.5s;
}
ul li a:hover{
    color: #fff;
    transform-origin: bottom;
}
ul li a span{
  position:absolute;
  background:#000;
  width:25%;
  height:100%;
  transform-origin:top;
  transform:scaleY(0);
  transition:transform .5s;
  z-index:-1;
}
ul li a:hover span{
  transform:scaleY(1);
  transform-origin:bottom
}
ul li a span:nth-child(1){
  transition-delay:.0s;
  left:0;
}
ul li a span:nth-child(2){
  transition-delay:.15s;
  left:25%;
}
ul li a span:nth-child(3){
  transition-delay:.30s;
  left:50%;
}
ul li a span:nth-child(4){
  transition-delay:.45s;
  left:75%;
}

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: