website-developer-in-meerut
website-designer-in-meerut
freelance-webite-developer

Need an Eye-caching Website - Contact Me Today !

responsive-hamburger-menu

Responsive Hamburger Menu

  • 109
  • 18-Nov-2021
  • Codepen

  • Details

    index.html
    <!DOCTYPE html>
    
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
            <meta name="viewport" content="width=device-width, initial-scale=1" />
    
            <title>Stanislav Andreev</title>
    
            <!-- normalize css -->
    
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" />
    
            <!-- https://fonts.google.com/ -->
    
            <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet" type="text/css" />
    
            <!-- https://fontawesome.com/ -->
    
            <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous" />
    
            <link href="css/style.css" rel="stylesheet" type="text/css" />
    
            <link href="css/navigation.css" rel="stylesheet" type="text/css" />
        </head>
    
        <body>
            <!-- Header and nav -->
    
            <header>
                <section id="nav">
                    <div class="wrapper">
                        <nav class="site-nav">
                            <!-- <h1 class="logo">Atech<span>Seva</span></h1> -->
    
                            <h1 class="logo"><img src="logo/logo.png" alt="" /></h1>
    
                            <div class="menu-toggle">
                                <div class="hamburger"></div>
                            </div>
    
                            <ul class="open desktop">
                                <li>
                                    <a href="javascript:void(0)" id="one"><i class="fas fa-home site-nav--icon"></i>Home</a>
                                </li>
    
                                <li>
                                    <a href="javascript:void(0)"><i class="fas fa-users site-nav--icon"></i>About us</a>
                                </li>
    
                                <li>
                                    <a href="javascript:void(0)"><i class="fas fa-download site-nav--icon"></i>Service</a>
                                </li>
    
                                <li>
                                    <a href="javascript:void(0)"><i class="fas fa-globe site-nav--icon"></i>Blog</a>
                                </li>
    
                                <li>
                                    <a href="javascript:void(0)"><i class="fas fa-phone site-nav--icon"></i>Contact us</a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </section>
            </header>
            <!-- script for navigation menu -->
            <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha384-vk5WoKIaW/vJyUAd9n/wmopsmNhiy+L2Z+SBxGYnUkunIxVxAv/UtMOhba/xskxh" crossorigin="anonymous"></script>
            <script src="js/01.js"></script>
        </body>
    </html>
    

    JS

    $.noConflict();
    jQuery(document).ready(function ($)
    {
        $('.menu-toggle').click(function ()
        {
            $('ul').toggleClass('opening');
            $(this).toggleClass('open');
        });
    });

Preview
whatsapp

Sagar Kumar
Typically replies within an hour

Atechseva
Hi there 👋

How can I help you?
×
Chat