带有汉堡菜单的响应式导航

Question

I am very new to trying to understand javascript and I cannot seem to figure out how to code my hamburger menu to open up and show my navigation in mobile view. 我对尝试理解JavaScript非常陌生，而且似乎无法弄清楚如何对汉堡菜单进行编码以打开并在移动视图中显示导航。 I am able to have my main navigation in desktop and the look of what I want for mobile and tablet in those views but the button does not work. 我可以在桌面上浏览主导航，在这些视图中可以看到手机和平板电脑的外观，但该按钮不起作用。 I have some javascript in there that I tried out but it didn't work. 我在其中尝试了一些JavaScript，但没有用。 I'll put everything in a snippet so that maybe someone can help me understand this. 我将所有内容都放在一个片段中，以便有人可以帮助我理解这一点。 Thank you! 谢谢！

 $('.toggle').click(function () { "use strict"; $('nav ul').slideToggle(); }); $(window).resize(function () { "use strict"; if ($(window).width() > 780) { $('nav ul').removeAttr('style'); } });

 /* Start global */ * { padding: 0; margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-decoration: none; font-family: arial, tahoma; list-style: none; /* outline: 1px solid brown;*/ } /* End global */ header { background-color: #333; height: 500px; } /* Start navigation bar */ nav { height: 80px; background-color: #222; border-bottom: 1px solid #555 } .logo { padding: 10px; width: auto; float: left; } .logo img { height: 55px; } .list-item { float: right; margin-right: 25px; margin-top: 17px; } .list-item li { float: left; padding: 13px 13px; font-size: 18px; border-radius: 3px; transition: all .7s ease-in-out; } .list-item li a { color: #EEE; } .list-item li:hover { background-color: brown; } /* End navigation bar */ /* Start nav bar for small screens */ .icon { display: none; } .toggle { float: right; margin: 20px; color: #EEE; font-size: 30px; border: 1px solid #EEE; padding: 0px 5px; border-radius: 4px; cursor: pointer; } /* End nav bar for small screens */ /* Start media query */ @media (max-width: 775px) { .icon { display: block; width: 100%; height: 80px; background-color: #111; border-bottom: 1px solid #444; } .list-item { width: 100%; margin: 0; padding: 0; position: relative; top: -4px; background-color: #222; display: none; } .list-item li { text-align: center; display: block; border-bottom: 1px solid #333; float: none; } .result-iframe { border: 0; background: white; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; } /* End media query */ }

 <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta charset="UTF-8"> <title>Untitled Document</title> <link href="about.css" rel="stylesheet"> <link href="about.js" rel="alternate"> </head> <body> <header> <nav> <div class="logo"> <img src="https://s-media-cache-ak0.pinimg.com/736x/ec/13/a7/ec13a753972c254761be4d9d5666d341.jpg" /> </div> <div class="icon"> <span class="toggle">☰</span> </div> <ul class="list-item"> <li><a href="#">Home</a></li> <li><a href="#">Facebook</a></li> <li><a href="#">Twitter</a></li> <li><a href="#">Categorys</a></li> <li><a href="#">Contact us</a></li> <li><a href="#">About us</a></li> </ul> </nav> </header> </body> </html>

Answer 1

I've added jQuery and it seems to be working fine. 我添加了jQuery ，它似乎运行良好。

 $('.toggle').click(function () { "use strict"; $('nav ul').slideToggle(); }); $(window).resize(function () { "use strict"; if ($(window).width() > 780) { $('nav ul').removeAttr('style'); } });

 /* Start global */ * { padding: 0; margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-decoration: none; font-family: arial, tahoma; list-style: none; /* outline: 1px solid brown;*/ } /* End global */ header { background-color: #333; height: 500px; } /* Start navigation bar */ nav { height: 80px; background-color: #222; border-bottom: 1px solid #555 } .logo { padding: 10px; width: auto; float: left; } .logo img { height: 55px; } .list-item { float: right; margin-right: 25px; margin-top: 17px; } .list-item li { float: left; padding: 13px 13px; font-size: 18px; border-radius: 3px; transition: all .7s ease-in-out; } .list-item li a { color: #EEE; } .list-item li:hover { background-color: brown; } /* End navigation bar */ /* Start nav bar for small screens */ .icon { display: none; } .toggle { float: right; margin: 20px; color: #EEE; font-size: 30px; border: 1px solid #EEE; padding: 0px 5px; border-radius: 4px; cursor: pointer; } /* End nav bar for small screens */ /* Start media query */ @media (max-width: 775px) { .icon { display: block; width: 100%; height: 80px; background-color: #111; border-bottom: 1px solid #444; } .list-item { width: 100%; margin: 0; padding: 0; position: relative; top: -4px; background-color: #222; display: none; } .list-item li { text-align: center; display: block; border-bottom: 1px solid #333; float: none; } .result-iframe { border: 0; background: white; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; } /* End media query */ }

 <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta charset="UTF-8"> <title>Untitled Document</title> <link href="about.css" rel="stylesheet"> <link href="about.js" rel="alternate"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body> <header> <nav> <div class="logo"> <img src="https://s-media-cache-ak0.pinimg.com/736x/ec/13/a7/ec13a753972c254761be4d9d5666d341.jpg" /> </div> <div class="icon"> <span class="toggle">☰</span> </div> <ul class="list-item"> <li><a href="#">Home</a></li> <li><a href="#">Facebook</a></li> <li><a href="#">Twitter</a></li> <li><a href="#">Categorys</a></li> <li><a href="#">Contact us</a></li> <li><a href="#">About us</a></li> </ul> </nav> </header> </body> </html>

带有汉堡菜单的响应式导航

问题描述

1 个解决方案

解决方案1
1 已采纳 2017-04-12 04:29:01

带有汉堡菜单的响应式导航

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-04-12 04:29:01

解决方案1
1 已采纳 2017-04-12 04:29:01