MENÜ ANIMATION

Html

  <div class="menu_box">

        <!-- section 1 -->

        <a href="#"

           class="box"

           style="background: #15870d">

           <i class="fa fa-home"></i>

        </a>

        <!-- section 2 -->

        <a href="#"

           class="box"

           style="background: #b51f1f">

           <i class="fa fa-search"></i>

        </a>

        <!-- section 3 -->

        <a href="#"

           class="box"

           style="background: #ab6623">

           <i class="fa fa-globe"></i>

        </a>

        <!-- section 4 -->

        <a href="#"

           class="box"

           style="background: #0d7b54">

           <i class="fa fa-envelope"></i>

        </a>

        <!-- section 5 -->

        <a href="#"

           class="box"

           style="background: #760f64">

           <i class="fa fa-phone"></i>

        </a>

        <!-- section 6 -->

        <a href="#"

           class="box"

           style="background: #777b04">

            <i class="fa fa-trash"></i>

        </a>

    </div>

CSS

body{

            margin: 0;

            padding: 0;

            background: #333;

        }

        .menu_box{

            position: absolute;

            width: 100px;

            height: 360px;

            display: block;

            top: 50%;

            margin-top: -180px;

            border-radius: 0px 20px 20px 0px;

            overflow: hidden;

        }

        .box {

            width: 100%;

            height: 60px;

            display: block;

            transition: .4s ease-in-out;

        }

        a{text-decoration: none;}

        .fa{

            display: flex;

            height: 60px;

            align-items: center;

            justify-content: center;

            color: #ccc;

            font-size: 24px;

        }

        .box:hover{

            transform: scale(1.3);

        }

Codepen : https://codepen.io/UmutYurdugulCode/pen/oOBpJV 《---