繁体   English   中英

为什么我的汉堡菜单上的转换不起作用?

Why my transition on my hamburger menu not working?

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我有过渡问题。

我想在单击移动视图上的图标(条)后开始转换。 但是过渡不起作用。当我单击图标时,会出现导航,但不会执行过渡。

我的代码: https : //codepen.io/ji-nov-ek/pen/gOwNZea

 // Hamburger menu let toggle = document.getElementById("toggle"); let nav = document.querySelector("nav"); toggle.addEventListener('click', function() { if (nav.style.display === "flex") { nav.style.display = "none"; nav.style.opacity = "0"; } else { nav.style.display = "flex"; nav.style.opacity = "1"; } });
 /* Global Styles */ @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); * { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; text-decoration: none; font-family: 'Poppins', sans-serif; } html { font-size: 10px; } ul { list-style: none; } a { text-decoration: none; color: #434343; font-family: 'Poppins', sans-serif; } h1, h2, h3 { font-family: 'Poppins', sans-serif; } body { background-color: #ffffff; } .case { height: 100vh; } .case .hero { background-color: #ffffff; } .case .hero header { background-color: #4281C1; min-height: 10rem; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .case .hero header .logo { width: 28rem; } .case .hero header .logo img { width: 100%; height: 100%; } .case .hero header nav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; min-height: 10rem; margin: 1rem 0; } .case .hero header nav ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; margin-left: 10rem; margin-right: 20rem; } .case .hero header nav ul li { font-size: 2rem; color: #434343; padding: 1rem; text-transform: uppercase; } .case .hero header nav .icons { margin-left: 0rem; margin-right: 0rem; } .case .hero header nav .icons i { font-size: 2rem; color: #434343; padding: 1rem; } .hero { height: 70vh; } .active { color: #ffffff; border-bottom: 1px solid #ffffff; } #toggle { display: none; } @media (max-width: 1024px) { .case .hero header { min-height: 8rem; } .case .hero header .logo { width: 22rem; } .case .hero header nav { min-height: 8rem; margin: 1rem 0; } .case .hero header nav ul { margin-left: 5rem; margin-right: 8rem; } .case .hero header nav ul li { font-size: 1.8rem; padding: 0.8rem; } .case .hero header nav .icons { margin-left: 0rem; margin-right: 0rem; } .case .hero header nav .icons i { font-size: 2rem; color: #434343; padding: 0.8rem; } } @media (max-width: 768px) { .case .hero header { min-height: 8rem; } .case .hero header .logo { width: 18rem; } .case .hero header nav { min-height: 8rem; margin: 1rem 0; } .case .hero header nav ul { margin-left: 5rem; margin-right: 5rem; } .case .hero header nav ul li { font-size: 1.6rem; padding: 0.5rem; } .case .hero header nav .icons { margin-left: 0rem; margin-right: 0rem; } .case .hero header nav .icons i { font-size: 2rem; color: #434343; padding: 0.5rem; } } @media (max-width: 640px) { .case .hero header { min-height: 8rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .case .hero header .logo { width: 18rem; display: none; } .case .hero header nav { min-height: 8rem; width: 100%; margin: 0; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; position: absolute; top: 80px; background-color: #4281C1; z-index: 4; text-align: center; border-top: 2px solid #ffffff; border-bottom: 2px solid #ffffff; display: none; opacity: 0; -webkit-transition: all ease-in 0.7s; transition: all ease-in 0.7s; } .case .hero header nav ul { margin: 0.5rem 1rem; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .case .hero header nav ul li { font-size: 1.6rem; } .case .hero header nav .icons { margin-left: 0rem; margin-right: 0rem; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .case .hero header nav .icons i { font-size: 2rem; color: #434343; } #toggle { font-size: 3rem; color: #ffffff; padding: 2rem; display: -webkit-box; display: -ms-flexbox; display: flex; } }
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.1/css/all.css" integrity="sha384-xxzQGERXS00kBmZW/6qxqJPyxW3UR0BPsL4c8ILaIWXva5kFi7TxkIIaMiKtqV1Q" crossorigin="anonymous"> <div class="case"> <section class="hero"> <header> <i class="fas fa-bars" id="toggle"></i> <nav> <div class="logo"> <img src="css/img/web/logo.png" alt="Logo kelimkac.cz"> </div> <ul> <li><a href="#" class="active">Domů</a></li> <li><a href="#">O nás</a></li> <li><a href="#">Produkty</a></li> <li><a href="#">Kontakt</a></li> </ul> <ul class="icons"> <i class="fas fa-user"></i> <i class="fas fa-shopping-cart"></i> </ul> </nav> </header> <h1>Test</h1> </section> </div>

不知道是什么问题?

感谢您的帮助!

2 个回复

 // Hamburger menu let toggle = document.getElementById("toggle"); let nav = document.querySelector("nav"); toggle.addEventListener('click', function() { nav.classList.toggle('active'); });
 /* Global Styles */ @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); * { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; text-decoration: none; font-family: 'Poppins', sans-serif; } html { font-size: 10px; } ul { list-style: none; } a { text-decoration: none; color: #434343; font-family: 'Poppins', sans-serif; } h1, h2, h3 { font-family: 'Poppins', sans-serif; } body { background-color: #ffffff; } .case { height: 100vh; } .case .hero { background-color: #ffffff; } .case .hero header { background-color: #4281C1; min-height: 10rem; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .case .hero header .logo { width: 28rem; } .case .hero header .logo img { width: 100%; height: 100%; } .case .hero header nav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; min-height: 10rem; margin: 1rem 0; } .case .hero header nav ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; margin-left: 10rem; margin-right: 20rem; } .case .hero header nav ul li { font-size: 2rem; color: #434343; padding: 1rem; text-transform: uppercase; } .case .hero header nav .icons { margin-left: 0rem; margin-right: 0rem; } .case .hero header nav .icons i { font-size: 2rem; color: #434343; padding: 1rem; } .hero { height: 70vh; } .active { color: #ffffff; border-bottom: 1px solid #ffffff; } #toggle { display: none; } @media (max-width: 1024px) { .case .hero header { min-height: 8rem; } .case .hero header .logo { width: 22rem; } .case .hero header nav { min-height: 8rem; margin: 1rem 0; } .case .hero header nav ul { margin-left: 5rem; margin-right: 8rem; } .case .hero header nav ul li { font-size: 1.8rem; padding: 0.8rem; } .case .hero header nav .icons { margin-left: 0rem; margin-right: 0rem; } .case .hero header nav .icons i { font-size: 2rem; color: #434343; padding: 0.8rem; } } @media (max-width: 768px) { .case .hero header { min-height: 8rem; } .case .hero header .logo { width: 18rem; } .case .hero header nav { min-height: 8rem; margin: 1rem 0; } .case .hero header nav ul { margin-left: 5rem; margin-right: 5rem; } .case .hero header nav ul li { font-size: 1.6rem; padding: 0.5rem; } .case .hero header nav .icons { margin-left: 0rem; margin-right: 0rem; } .case .hero header nav .icons i { font-size: 2rem; color: #434343; padding: 0.5rem; } } @media (max-width: 640px) { .case .hero header { min-height: 8rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .case .hero header .logo { width: 18rem; display: none; } .case .hero header nav { min-height: 8rem; width: 100%; margin: 0; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; position: absolute; top: 80px; background-color: #4281C1; z-index: 4; text-align: center; border-top: 2px solid #ffffff; border-bottom: 2px solid #ffffff; visibility: hidden; opacity: 0; -webkit-transition: all ease-in 0.7s; transition: all ease-in 0.7s; } .case .hero header nav.active { opacity: 1; visibility: visible; } .case .hero header nav ul { margin: 0.5rem 1rem; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .case .hero header nav ul li { font-size: 1.6rem; } .case .hero header nav .icons { margin-left: 0rem; margin-right: 0rem; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .case .hero header nav .icons i { font-size: 2rem; color: #434343; } #toggle { font-size: 3rem; color: #ffffff; padding: 2rem; display: -webkit-box; display: -ms-flexbox; display: flex; } }
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.1/css/all.css" integrity="sha384-xxzQGERXS00kBmZW/6qxqJPyxW3UR0BPsL4c8ILaIWXva5kFi7TxkIIaMiKtqV1Q" crossorigin="anonymous"> <div class="case"> <section class="hero"> <header> <i class="fas fa-bars" id="toggle"></i> <nav> <div class="logo"> <img src="css/img/web/logo.png" alt="Logo kelimkac.cz"> </div> <ul> <li><a href="#" class="active">Domů</a></li> <li><a href="#">O nás</a></li> <li><a href="#">Produkty</a></li> <li><a href="#">Kontakt</a></li> </ul> <ul class="icons"> <i class="fas fa-user"></i> <i class="fas fa-shopping-cart"></i> </ul> </nav> </header> <h1>Test</h1> </section> </div>

修复了您的代码。 检查一下。 不要那样改变显示模式。

显示:无; 从页面中删除一个块,就好像它从不存在一样。 一个块不能部分显示; 它要么在那里,要么不在。 可见性也是如此; 你不能指望一个块是半隐藏的,根据定义,它是可见的! 幸运的是,您可以使用不透明度来代替渐变效果。 更多信息

因此,不是切换显示(flex/none)切换高度(auto / 0)。

1 汉堡菜单不起作用

我正在尝试学习汉堡菜单的工作方式。 它不起作用。 我尝试添加“就绪功能”以及没有任何更改。 我正在用脚本标签在html中编写js代码,我是否应该单独提及js代码? &lt;script&gt; $( document ).ready(function() { $( ".cr ...

2 我的汉堡菜单不起作用

我的汉堡菜单似乎不起作用。 当我单击汉堡包图标本身时,什么也没有发生。 我之前使用过这个完全相同的代码,并且在那里工作得很好。 当我单击菜单时,菜单项只是滑动打开。 我觉得给javascript代码正确的Classs / ID做错了。 但是我不确定。 有谁知道出什么问题了吗? ...

3 汉堡菜单不起作用

我已经很接近这个汉堡菜单了,但仍然无法正常工作。 任何帮助都会很棒。 (我敢肯定这很明显,但树木和其他所有东西都是森林。)对于一个新手来说,看来我的js不能正常工作/触发/无论正确的词是什么。 也许我把它链接错了? &lt;!DOCTYPE html&gt; &lt;tit ...

7 纯 HTML 和 CSS 汉堡菜单不起作用

我现在正在使用 html 和 css(无 js)制作汉堡菜单,但 :checked + .something 不起作用。 我正在寻找解决方案大约 3 个小时,但我找不到任何解决方案。 如果你能帮助我,那就太好了。 也许我在某个地方搞砸了,因为我是从视频中观看的,但我和他做了完全相同的事情,但我不起作 ...

8 为什么我的Materialize Sidenav汉堡菜单不起作用?

我使用的工具栏顶部带有导航栏,该导航栏仅显示“汉堡”按钮(在移动设备上)和“刷新”按钮。 这样做很好,但是当您单击汉堡包图标时,什么也不会发生! 侧边栏无法打开。 我怎样才能解决这个问题? 这是我的代码(重要的事情): 是的,我确实具有Materialise CSS和JS,以 ...

9 CSS和仅HTML汉堡菜单不起作用

我正在尝试为一个班级建立一个网站(我只能使用css和html,不能使用jquery或javascript或其他任何东西),并且希望在小屏幕上查看网站时使用汉堡菜单,并且已经按照本教程进行操作( http:// codingtips.kanishkkunal.in/css-hamburger-me ...

2015-12-07 16:29:10 0 421   html/ css
10 网站上的汉堡菜单不起作用

我正在使用从PixelHint下载的以下Web模板: http ://pixelhint.com/demo/la_casa/ 我已经上传并开始对其进行编辑,将其保存在计算机上(而不是FTP上)时,汉堡包菜单有效,但自上传以来,响应中的汉堡包菜单不再显示。 我的网站可以在这里找到: h ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM