响应式Navbar - 元素在调整大小时不会消失

时间：2017-05-22 12:59:35

标签： javascript html css responsive-design navigationbar

在这个我一直在摆弄的页面上，我做了一个临时的响应式导航菜单，当窗口变小时，它被标准菜单按钮和下拉菜单取代。

麻烦的是，当我再次将其重新调整大小时，下拉菜单会在原始导航的顶部保持可见。

我尝试使用媒体查询，但他们没有工作。我确实尝试过jquery，但我遇到的问题是，一旦盒子被赋予了属性＆＃34; display：none＆＃34;通过jquery，然后按钮的javascript显示下拉列表停止工作

以下是我正在使用的代码的简化版本......

＆＃13;
＆＃13; 
function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

window.onclick = function(event) {
  if (!event.target.matches('.hamburger')) {

    var dropdowns = document.getElementsByClassName("contents");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
＆＃13; 
/* header */
			
			.header {
					background:#fff;
					width:100%;
					height:170px;
					top:0;
					position:fixed;
					z-index:9999;
					white-space:nowrap;
					clear:both;
					transition:all 0.25s ease;
					border-bottom:1px solid;
			}
			
			
		
			}
			
			
			 .navbar {
				margin-top:130px;
				list-style-type: none;
                text-align: center;
                padding: 0px 0;
				color:#000;
				display:inline-block;
				

            }
			
			.navbar ul li {
                display: inline-block;
                margin-right: 0px;
	           color:#000 ;
            }
			
			
			.navbar ul li a {
                text-decoration: none;
                /* text-transform: uppercase; */
                color:#000 ;
				padding: 12px 12px;
                font-family: century gothic;
				text-align: center;
				display: block;
 
            }
			
			 .navbar ul li:last-child {
                margin-right: 0;
            }
			
			.navbar ul li a.active {
                text-decoration: none;
              /*  text-transform: uppercase; */
                color: #b1f73d;
				padding: 12px 12px;
                font-family: century gothic;
				text-align: center;
				display: block;
				bottom:0px;
            }
			
			
			.nav_a a {
				display: block;
				color: #000;
				text-align: center;
				padding: 12px 12px;
				text-decoration: none;
				font-family: century gothic;
			}
			
			
			.nav_a a:hover {
				color:#b1f73d;
			}
			
			.nav_a a.active:hover {
				color:#b1f73d;
			}
			
			.hdr-bnr {font-family:century gothic;font-weight:lighter;color:#000;font-size:1.25em;}
			
			
			
			
@media (min-width:1046px) and (max-width:9999999999px) {
			
			.hamburger {
				display:none;
				}
			
			.dropdown {
				display:none;
			}

}
			



@media (max-width: 1045px) {
	
			.header {
				background:#fff;
				width:100%;
				height:110px;
				top:0;
				position:fixed;
				z-index:9999;
				white-space:nowrap;
				clear:both;
			}
				
			
			
			.navbar {
				display:none;
				}
				
			
			.hamburger {
				display:block;
			}
			
		
}





/* burger */

.hamburger {
    background-color: #FFF;
    color: #00811f;
    padding: 14px;
    font-size: 3.5em;
    border: 1px;
    cursor: pointer;
	float:right;
	margin-right:5%;
  display:none
	border-radius:5px;
}

.hamburger:hover, .hamburger:focus {
    background-color: #FFF;
	color:#000;
}

.dropdown {
    position: relative;
    display: block;

}

.contents {
	margin-top:110px;
	font-family:century gothic;
    display: none;
	font-size:125%;
    position: absolute;
    background-color: #fff;
    width: 100%;
    overflow: auto;
 
    z-index: 1;
 
	
	
}


.contents a {
    color: #000;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
 
}

.dropdown a:hover {background-color: #00811f; }

.show {display:block; }
＆＃13; 
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
		


<div class="header">


<nav class="navbar">
            <ul>
                <li class="nav_a"><a class="active" href="javascript:void(0)">Home</a></li>
                <li class="nav_a"><a href="#">page2</a></li>
                <li class="nav_a"><a href="#">page3</a></li>
                <li class="nav_a"><a href="#">page4</a></li>
                <li class="nav_a"><a href="#">page5</a></li>
				
			</ul>
			
</nav>
				 
<button onclick="myFunction()" class="hamburger">☰</button>
		<span class="dropdown">
				<div id="myDropdown" class="contents">
					<a href="#">Home</a>
					<a href="#">page2</a>
					<a href="#">page3</a>
					<a href="#">page4</a>
					<a href="#">page5</a>
		
				</div>
		</span>
		
</div>

<p style="color:#000;margin-top:200px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
＆＃13;
＆＃13;
＆＃13;

道歉我试图减少尽可能多的体积，有人可以告诉我我做错了吗？

谢谢！

1 个答案:

答案 0 :(得分：0)

好的，既然你在评论中告诉我们以下内容：

  

如果您要点击汉堡包按钮以显示下拉菜单，然后调整窗口大小，您会注意到即使我已在媒体查询中将其定义为'display：none'，下拉菜单仍会保留在那里。

这是（据我所知）完全正确的行为，原因如下：

当您点击“汉堡包”按钮时，此次点击将切换菜单下拉菜单的class ='show'。在这种情况下，单击汉堡包按钮将更改此代码：

<div id="myDropdown" class="contents">
    <a href="#">Home</a>
    <a href="#">page2</a>
    <a href="#">page3</a>
    <a href="#">page4</a>
    <a href="#">page5</a>
</div>

指向:(添加或删除class ='show';具体取决于您是否打开或关闭菜单）

<div id="myDropdown" class="contents show">   <---- Adds or removes show class
    <a href="#">Home</a>
    <a href="#">page2</a>
    <a href="#">page3</a>
    <a href="#">page4</a>
    <a href="#">page5</a>
</div>

因此，由于您只是将汉堡包按钮的可见性设置为“display：none”，因此下拉列表仍会保持class ='show'。 最后，您只是使按钮不可见，而不是下拉菜单。

您只需更改

即可解决问题 
@media (min-width:1046px) and (max-width:9999999999px) {
        .dropdown {
            display:none;
        }
}

是

@media (min-width:1046px) and (max-width:9999999999px) {
        .dropdown .show { <--- specify that you don't want to show the dropdown if it has the class='show'
            display:none;
        }
}

（你也可以通过jQuery实现这个目的，方法是在下拉列表中添加或删除'show'类;或者通过触发下拉菜单的'toggle'功能） 我希望它有所帮助

function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

window.onclick = function(event) {
  if (!event.target.matches('.hamburger')) {

    var dropdowns = document.getElementsByClassName("contents");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
/* header */
			
			.header {
					background:#fff;
					width:100%;
					height:170px;
					top:0;
					position:fixed;
					z-index:9999;
					white-space:nowrap;
					clear:both;
					transition:all 0.25s ease;
					border-bottom:1px solid;
			}
			
			
		
			}
			
			
			 .navbar {
				margin-top:130px;
				list-style-type: none;
                text-align: center;
                padding: 0px 0;
				color:#000;
				display:inline-block;
				

            }
			
			.navbar ul li {
                display: inline-block;
                margin-right: 0px;
	           color:#000 ;
            }
			
			
			.navbar ul li a {
                text-decoration: none;
                /* text-transform: uppercase; */
                color:#000 ;
				padding: 12px 12px;
                font-family: century gothic;
				text-align: center;
				display: block;
 
            }
			
			 .navbar ul li:last-child {
                margin-right: 0;
            }
			
			.navbar ul li a.active {
                text-decoration: none;
              /*  text-transform: uppercase; */
                color: #b1f73d;
				padding: 12px 12px;
                font-family: century gothic;
				text-align: center;
				display: block;
				bottom:0px;
            }
			
			
			.nav_a a {
				display: block;
				color: #000;
				text-align: center;
				padding: 12px 12px;
				text-decoration: none;
				font-family: century gothic;
			}
			
			
			.nav_a a:hover {
				color:#b1f73d;
			}
			
			.nav_a a.active:hover {
				color:#b1f73d;
			}
			
			.hdr-bnr {font-family:century gothic;font-weight:lighter;color:#000;font-size:1.25em;}
			
			
			
			
@media (min-width:1046px) and (max-width:9999999999px) {
			
			.hamburger {
				display:none;
				}
			
			.dropdown .show {
				display:none;
			}

}
			



@media (max-width: 1045px) {
	
			.header {
				background:#fff;
				width:100%;
				height:110px;
				top:0;
				position:fixed;
				z-index:9999;
				white-space:nowrap;
				clear:both;
			}
				
			
			
			.navbar {
				display:none;
				}
				
			
			.hamburger {
				display:block;
			}
			
		
}





/* burger */

.hamburger {
    background-color: #FFF;
    color: #00811f;
    padding: 14px;
    font-size: 3.5em;
    border: 1px;
    cursor: pointer;
	float:right;
	margin-right:5%;
  display:none
	border-radius:5px;
}

.hamburger:hover, .hamburger:focus {
    background-color: #FFF;
	color:#000;
}

.dropdown {
    position: relative;
    display: block;

}

.contents {
	margin-top:110px;
	font-family:century gothic;
    display: none;
	font-size:125%;
    position: absolute;
    background-color: #fff;
    width: 100%;
    overflow: auto;
 
    z-index: 1;
 
	
	
}


.contents a {
    color: #000;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
 
}

.dropdown a:hover {background-color: #00811f; }

.show {display:block; }
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
		


<div class="header">


<nav class="navbar">
            <ul>
                <li class="nav_a"><a class="active" href="javascript:void(0)">Home</a></li>
                <li class="nav_a"><a href="#">page2</a></li>
                <li class="nav_a"><a href="#">page3</a></li>
                <li class="nav_a"><a href="#">page4</a></li>
                <li class="nav_a"><a href="#">page5</a></li>
				
			</ul>
			
</nav>
				 
<button onclick="myFunction()" class="hamburger">☰</button>
		<span class="dropdown">
				<div id="myDropdown" class="contents">
					<a href="#">Home</a>
					<a href="#">page2</a>
					<a href="#">page3</a>
					<a href="#">page4</a>
					<a href="#">page5</a>
		
				</div>
		</span>
		
</div>

<p style="color:#000;margin-top:200px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

相关问题
最新问题