Skip to content
Advertisements

JQuery Classic Responsive Menu

CODEPEN

JQuery Classic Responsive Menu

HTML

        <nav class="menu-bar">
            <div class="hamburger_icon" >
                <i class="fas fa-bars" id="bars"></i>
                <i class="fas fa-times" id="times"></i>
            </div> 
            <ul>
                <li class="act"><a href="#">HOME</a></li>
                <li><a href="#">SERVICES</a></li>
                <li><a href="#">CONTACT</a></li>
                <li><a href="#">ABOUT</a></li>
            </ul>
        </nav>

CSS

body{
    padding: 0;
    margin: 0;
    .menu-bar{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        background: #262626;
        li{
            display: block;
            float: left;
            padding: 10px 20px;
            transition: .3s;
            cursor: pointer;
            
            a{
                text-decoration: none;
                color: #eee;
                transition: .3s;
            }
            &:hover{
                background: #eee;
                color: #262626;
            }
            &:hover >a{
                color: #262626;
            }
        }
        .act{
            background: #eee;
        }
        .act > a{
            color: #262626;
        }
        .hamburger_icon{
            color: #fff;
            position: absolute;
            top: 0;
            left: 20px;
            font-size: 25px;
            cursor: pointer;
            display: none;

            &.active{
                background: none;
                font-family: "Font Awesome 5 Free"; font-weight: 600;content: "\f805";
                font-style: none;
            }
            &.active > #times{
                display: block;
            }
            &.active > #bars{
                display: none;
            }
            #times{
                position: absolute;
                top: 5px;
                left: 0px;
                font-size: 30px;
                display: none;
            }
        }
    }
}
@media (max-width:600px) and (min-width: 100px){
    body{
        .menu-bar{
            position: absolute;
            width: 100%;
            background: #262626;
            height: 40px;
            .hamburger_icon{
                display: block;
            }
            ul{
                padding: 0;
                margin-top: 40px;
                background: #484848;
                display: none;
            }
            li{
                display: block;
                float: none;
                padding: 10px 20px;
                transition: .3s;
                cursor: pointer;
                text-align: center;
                
                a{
                    text-decoration: none;
                    color: #eee;
                    transition: .3s;
                }
                &:hover{
                    background: #eee;
                    color: #262626;
                }
                &:hover >a{
                    color: #262626;
                }
            }
            .active{
                background: #eee;
            }
            .active > a{
                color: #262626;
            }
        }
    }
}

JS( JQuery)

    $(document).ready(function(){
         $(".hamburger_icon").click(function(){
             $(this).toggleClass("active");
             $("ul").toggle()
         })
    })
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: