gpt4 book ai didi

css - 试图制作一个有标签的导航栏,一个标签有下拉菜单,在移动设备上标签变成汉堡菜单,这是动画

转载 作者:行者123 更新时间:2023-11-28 00:09:29 25 4
gpt4 key购买 nike

我正在尝试让我的 Navbar 有一些特定的东西。

我希望它:-固定在顶部- 有选项卡,包括一个带有下拉菜单的选项卡。- 在手机上响应式地变成汉堡菜单-让汉堡菜单动画流畅。

我一直在更改我从 MDBootstrap 获得的代码之间的属性。它给了我:- 固定导航顶部栏-我想要的颜色- 汉堡菜单和下拉选项卡-动画汉堡菜单

问题是即使在宽大的浏览器窗口中,汉堡菜单也在那里。

我希望汉堡菜单仅在浏览器不够宽时显示。

<button class="navbar-toggler third-button" type="button" data-toggle="collapse" data-target="#navbarSupportedContent22"
aria-controls="navbarSupportedContent22" aria-expanded="false" aria-label="Toggle navigation">

我只是不确定如何组合我在这里找到的响应式顶部导航: https://www.w3schools.com/howto/howto_js_topnav_responsive.asp https://mdbootstrap.com/docs/jquery/navigation/navs/

进入伟大的 MDBoostrap 版本。谁能帮忙?

最佳答案

看看这个 pen我做了;我相信我使用了与您引用的 W3 相同的资源~

HTML

<body>
<header class="topnav" id="myTopnav">
<a href="#" class="active">Responsive Navigation</a>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<a href="#">Link 5</a>
<a href="#">Link 6</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</header>
<main>
<p>A Responsive Navigation system that is Fixed on Desktop.</p>
<p>On mobile devices, a Hamburger Icon will be displayed in the upper-right corner. Click it once to open the navigation, then click it again to close.</p>
</main>
</body>

JS

function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}

关于css - 试图制作一个有标签的导航栏,一个标签有下拉菜单,在移动设备上标签变成汉堡菜单,这是动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55475813/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com