-2
 <div class="hamburger">
        hamburger
        </div>

Hey guys I'm trying to create a hamburger menu like the menu in this link that I provided. i have nothing only html. And I don't know hoe create this? You guys can help me I think. Did you find anything like this? Or can you tell me how to do this? https://www.hugeinc.com/us

Sarath P.S
  • 7
  • 4

1 Answers1

0

Basically, you'll have 2 elements there - the button ('H' on the link you provided), and the navigation - list of links, that is hidden by default. Clicking on the 'H' button would show the navigation menu (and change text from H to Huge, or whatever you want).

<style>
    .hidden {
       display:none;
    }
</style>

<div class="hamburger">
    H
</div>
<div class="navigation hidden">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
</div>

<script>
   $('.hamburger').click(function(){
     $('.navigation').toggleClass('hidden');
     $(this).text()==='H'?$(this).text('Huge'):$(this).text('H');
   });
</script>

That's the basic idea how it would work. You can adjust it to your needs and style it how you want it to look.

(I haven't tested it, so it may contain some syntax errors - but the idea stands).

Mirza Mašić
  • 119
  • 1
  • 6