JQuery-汉堡菜单创建与动画


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

嘿,伙计们,我正在尝试创建一个汉堡菜单,就像我提供的这个链接中的菜单一样。我什么都没有,只有html。我不知道是霍创造的吗?我想你们可以帮我。你发现这样的东西了吗?或者你能告诉我怎么做吗?https://www.hugeinc.com/us

基本上,这里有两个元素-按钮(您提供的链接上的'H'(和导航-链接列表,默认情况下是隐藏的。单击">H"按钮将显示导航菜单(并将文本从"H"更改为"巨大"或您想要的任何内容(。

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

这就是它的基本原理。你可以根据自己的需要进行调整,并按照自己想要的方式进行造型。

(我还没有测试过,所以它可能包含一些语法错误,但这个想法是有效的(

相关内容

  • 没有找到相关文章

最新更新