hamburger-menu 相关问题

我是初学者，正在尝试使用 Bootstrap。引导导航栏在响应式屏幕中无法正常工作。帮我改正我的错误。我是初学者，正在尝试使用 Bootstrap。引导导航栏在响应式屏幕中无法正常工作。帮我改正我的错误 <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap. min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" /> </head> <body> <nav class="navbar navbar-light"> <div class="container-fluid"> <h2>Posts</h2> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarItems"> <span class="navbar-toggler-icon"></span> </button> <div class="navbar-collapse" id="navbarItems"> <ul class="navbar-nav"> <li class="nav-item"><a class="nav-link" href="#">Feed</a></li> <li class="nav-item"><a class="nav-link" href="#">Week</a></li> <li class="nav-item"><a class="nav-link" href="#">Month</a></li> <li class="nav-item"><a class="nav-link" href="#">Year</a></li> <li class="nav-item"><a class="nav-link" href="#">Infinity</a></li> <li class="nav-item"><a class="nav-link" href="#">Latest</a></li> </ul> </div> </div> </nav> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous" ></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous" ></script> </body> </html> 已经提供了整个代码，正在尝试当我点击汉堡包图标时，它会折叠并再次点击会重新打开它。我看到您的 HTML 中缺少一些属性和类，请尝试将其添加到您的 html 中它应该可以工作。此外，您在按钮中使用了错误的属性。 // This <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarItems"> <span class="navbar-toggler-icon"></span> </button> // To This <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarItems" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation" > <span class="navbar-toggler-icon"></span> </button> // This <div class="navbar-collapse" id="navbarItems"></div> // To This <div class="collapse navbar-collapse" id="navbarItems"></div> 希望这对你有用:)

html css bootstrap-5 hamburger-menu

回答 1 投票 0

有没有办法让我的汉堡菜单显示在右侧？（我可以在那里买到汉堡包，但不是弹出菜单）

HTML ... HTML <div class="hamburger-menu"> <input id="menu__toggle" type="checkbox" /> <label class="menu__btn" for="menu__toggle"> <span></span> </label> <ul class="menu__box"> <li><a class="menu__item" href="#">Home</a></li> <li><a class="menu__item" href="#">About</a></li> <li><a class="menu__item" href="#">Team</a></li> <li><a class="menu__item" href="#">Contact</a></li> <li><a class="menu__item" href="#">Twitter</a></li> </ul> </div> CSS #menu__toggle { opacity: 0; } #menu__toggle:checked + .menu__btn > span { transform: rotate(45deg); } #menu__toggle:checked + .menu__btn > span::before { top: 0; transform: rotate(0deg); } #menu__toggle:checked + .menu__btn > span::after { top: 0; transform: rotate(90deg); } #menu__toggle:checked ~ .menu__box { left: 0 !important; } .menu__btn { position: fixed; top: 20px; right: 20px; width: 26px; height: 26px; cursor: pointer; z-index: 1; } .menu__btn > span, .menu__btn > span::before, .menu__btn > span::after { display: block; position: absolute; width: 100%; height: 2px; background-color: #616161; transition-duration: .25s; } .menu__btn > span::before { content: ''; top: -8px; } .menu__btn > span::after { content: ''; top: 8px; } .menu__box { display: block; position: fixed; top: 0; left: -100%; width: 300px; height: 100%; margin: 0; padding: 80px 0; list-style: none; background-color: #ECEFF1; box-shadow: 2px 2px 6px rgba(0, 0, 0, .4); transition-duration: .25s; } .menu__item { display: block; padding: 12px 24px; color: #333; font-family: 'Roboto', sans-serif; font-size: 20px; font-weight: 600; text-decoration: none; transition-duration: .25s; } .menu__item:hover { background-color: #CFD8DC; } 用 css 制作的汉堡包图标位于右侧且功能齐全，但我似乎无法在那里获得菜单我希望菜单背景及其中的内容位于屏幕的右侧，而不是默认的左侧。当然，在这种情况下，我也希望动画来自右侧。我试过的 Under menu__box, float: right; Under menu__box, change left: -100%; to right: -100%; 以及删除 - 我变了 #menu__toggle:checked ~ .menu__box { left: 0 !important; } 到 #menu__toggle:checked ~ .menu__box { right: 0 !important; } 然后左变：-100%；向右：-100%；我完全查看了这行代码，我很抱歉，但希望其他人得到帮助

html css position hamburger-menu

回答 1 投票 0

React 初学者。我的 NavBar 给出错误“Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') i can't seem to tell why.”

我尝试创建和使用动画汉堡菜单图标，而不是为我的 Navbar 组件制作的图标 `const menu = document.querySelector('.menu_button'); const showMenu = 文档。

reactjs react-navigation responsive hamburger-menu

回答 2 投票 0

当我调整窗口大小时或在移动设备上，响应式导航栏不显示菜单

我正在尝试建立我的第一个网站，一个星期以来我一直被这个问题所困扰。当我调整窗口大小时或当我在暴民上使用该网站时，我想创建一个带有汉堡菜单的响应式导航栏...

html css navbar responsive hamburger-menu

回答 1 投票 0

hamburger-menu 相关问题

最新问题