帶有漢堡菜單的響應式導航
[英]Responsive Navigation w/ hamburger menu
問題描述
我對嘗試理解JavaScript非常陌生，而且似乎無法弄清楚如何對漢堡菜單進行編碼以打開並在移動視圖中顯示導航。 我可以在桌面上瀏覽主導航，在這些視圖中可以看到手機和平板電腦的外觀，但該按鈕不起作用。 我在其中嘗試了一些JavaScript，但沒有用。 我將所有內容都放在一個片段中，以便有人可以幫助我理解這一點。 謝謝！
$('.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>
1 個解決方案
解決方案1
1 已采納 2017-04-12 04:29:01
我添加了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>
當響應式漢堡菜單出現在小屏幕上時，導航欄中的列表不會自行隱藏
[英]Lists in navigation bar would not hide itself when responsive hamburger menu appears in small screen
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.