Question

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

嗨，我正在尝试创建一个汉堡菜单，就像我在此提供的链接中的菜单一样。我只有HTML。而且我不知道创建这个吗？我想你们可以帮助我。你找到这样的东西了吗？还是可以告诉我该怎么做？ https://www.hugeinc.com/us

Answer 1

基本上，那里有2个元素-按钮（您提供的链接上的“ H ”）和导航-链接列表，默认情况下处于隐藏状态。单击“ H ”按钮将显示导航菜单（并将文本从“ H”更改为“ Huge”，或您想要的任何内容）。

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

这是基本原理。您可以根据需要对其进行调整，并对其样式进行外观设置。

（我尚未测试过，所以它可能包含一些语法错误-但是这个想法仍然有效）。

JQuery-创建带有动画的汉堡菜单

1 个答案: