menu example

by Yuriy Petrichenko

HTML

<div id="button">
<article class="first_line">|</article>
<article class="second_line">|</article>
</div>
  <ul>
        <li>I</li>
        <li>Love</li>
        <li>You</li>
    </ul>

CSS

body{
    background: url(https://wallpaperbrowse.com/media/images/Abstract-and-colorful-background-HD-wallpaper.jpg);
}
ul{
display:none;
list-style:none;
cursor:pointer;
padding-left:0px;
width:100%;
}
li{
    border:2px solid red;
    border-radius:21px;
    width:300px;
    text-align:center;
    font-size:30px;
    margin:2px;
    background-color:white;
     transition:all .5s;
     margin-top:10px;
     margin-bottom:2px;
     box-shadow: 0px 0px 2px 2px LightSkyBlue;
}
li:hover{
    opacity:.8;
    transition:all .5s;
    background-color:red;
    color:white;
}
#button{
    animation: gig 1s linear infinite;
    margin-right:10px;
    border-radius:50%;
    cursor:pointer;
    display:flex;
    justify-content:space-around;
    height:55px;
    width:55px;
    background-color:LightSkyBlue;
    transition:all .5s;
}
.first_line{
   font-size:40px;
    color:white;
    transition:all .5s;
    font-weight:bold;

}
.second_line{
     font-weight:bold;
    font-size:40px;
    color:white;
transition:all .5s;
}
#button:hover .first_line{
    color:LightSkyBlue;
     transition:all .5s;
     transform: rotate(45deg)translateY(-10px) translateX(10px);
}
#button:hover .second_line{
    color:LightSkyBlue;
        transform: rotate(-45deg) translateY(-10px) translateX(-10px);
  transition:all .5s;
}
#button:hover{
     box-shadow: 0px 0px 2px 2px LightSkyBlue;
    animation: gig 1s linear infinite;
 background-color:white;
 transition:all .5s;
}
h1{
    display:none;
}
@keyframes gig{
    0%{

        transform:rotate(0deg);
    }
    100%{
        
        transform:rotate(360deg);
    }
}

JavaScript

$("#button").click(function(){
        $("ul").slideToggle()("slow");
            });