<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>
这就是它的基本原理。你可以根据自己的需要进行调整,并按照自己想要的方式进行造型。
(我还没有测试过,所以它可能包含一些语法错误,但这个想法是有效的(