Skip to content
Advertisements

CSS Menu Icon

Codepen:


HTML CODE:

  <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 CODE:

        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);
        }
Advertisements

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: