[英]Ul/div not getting height
I am having trouble getting my navbar to show up when I press my "menu button". 按下“菜单按钮”时,我的导航栏无法显示。 The div seems to show up in the code, however, with a height of 0
. div似乎显示在代码中,但是高度为0
。 Here's the relevant code to the problem. 这是该问题的相关代码。 Do you have any suggestions in how I go about fixing this? 您对我如何解决此问题有任何建议吗?
var onOff = 0; function dropdown() { "use strict"; var navbar = document.getElementById("nav_ul"); var ulDiv = document.getElementById("ulDiv"); if (onOff === 0) { navbar.setAttribute("class", "navShow"); ulDiv.setAttribute("class", "navShow"); onOff = 1; } else if (onOff === 1) { navbar.setAttribute("class", "navHide"); ulDiv.setAttribute("class", "navHide"); onOff = 0; } }
#ulDiv{ text-align: center; float: none; } ul{ position: relative; bottom: 0; margin-left: auto; margin-right: auto; padding-bottom: 20px; } li { display: inline; padding-top: 0; margin-top: 0; padding-left: 20px; padding-right: 20px; padding-bottom: 5px; } .navHide{ display: none; } .navShow{ display: block; height:auto; } @media screen and (max-width: 1005px) { #ulDiv{ height: auto; } #nav_ul{ display: none; width: 100px; z-index: 3; position: absolute; top: 106px; left: 0px; margin: 0px; padding-bottom: 20px; } li{ display: inline-block; } }
<header> <nav id="navbar" class="navbar"> <a href="home.html" id="logoA"><img id="logo" alt="logo" src="logo_dk.jpg"></a> <button id="menu-but" onclick="dropdown()"><img id="meny-icon" alt="meny icon" src="menu-icon.png"></button> <div id="ulDiv"><ul id="nav_ul" class="none"> <li><a href="home.html">Forside</a></li> <li><a href="#">Advokater</a></li> <li><a href="#">Sagsområder</a></li> <li><a href="#">Internationalt</a></li> <li><a href="#">Oplysninger</a></li> <li><a href="#">Karriere</a></li> <li><a href="#">Historie</a></li> <li><a href="#">Kontakt</a></li> </ul> </div> </nav> </header>
var onOff = 0; window.dropdown = function() { "use strict"; var navbar = document.getElementById("nav_ul"); var ulDiv = document.getElementById("ulDiv"); if (onOff === 0) { navbar.setAttribute("class", "navShow"); ulDiv.setAttribute("class", "navShow"); onOff = 1; } else if (onOff === 1) { navbar.setAttribute("class", "navHide"); ulDiv.setAttribute("class", "navHide"); onOff = 0; } }
#ulDiv{ text-align: center; float: none; display: none; } ul{ position: relative; bottom: 0; margin-left: auto; margin-right: auto; padding-bottom: 20px; } li { display: inline; padding-top: 0; margin-top: 0; padding-left: 20px; padding-right: 20px; padding-bottom: 5px; } header .navHide{ display: none; } header .navShow{ display: block !important; height:auto; } @media screen and (max-width: 1005px) { #ulDiv{ height: auto; } #nav_ul{ width: 100px; z-index: 3; position: absolute; top: 106px; left: 0px; margin: 0px; padding-bottom: 20px; } li{ display: inline-block; } }
<header> <nav id="navbar" class="navbar"> <a href="home.html" id="logoA"><img id="logo" alt="logo" src="logo_dk.jpg"></a> <button id="menu-but" onclick="window.dropdown()"><img id="meny-icon" alt="meny icon" src="menu-icon.png"></button> <div id="ulDiv"><ul id="nav_ul" class="none"> <li><a href="home.html">Forside</a></li> <li><a href="#">Advokater</a></li> <li><a href="#">Sagsområder</a></li> <li><a href="#">Internationalt</a></li> <li><a href="#">Oplysninger</a></li> <li><a href="#">Karriere</a></li> <li><a href="#">Historie</a></li> <li><a href="#">Kontakt</a></li> </ul> </div> </nav> </header> <script> </script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.