javascript - 2级响应式菜单不显示 block

标签 javascript css menu responsive

我正在尝试让我的旧菜单适应较小的屏幕尺寸。我的菜单图标工作正常，但是当我打开列表时，它显示为内联而不是 block 。我尝试了几种选择，但无法使其正常工作。 

function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "menu") {
        x.className += " responsive";
    } else {
        x.className = "menu";
    }
}
/* Main menu */


.menu
{
	width: 100%;
	margin: -15px 0 0 0;
	padding: 0 0 0 0;
	list-style: none;
	background: #d1d1d1;
	background: -moz-linear-gradient(#d1d1d1, #b6b6b6);
	background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #d1d1d1),color-stop(1, #b6b6b6));
	background: -webkit-linear-gradient(#d1d1d1, #b6b6b6);
	background: -o-linear-gradient(#d1d1d1, #b6b6b6);
	background: -ms-linear-gradient(#d1d1d1, #b6b6b6);
	background: linear-gradient(#d1d1d1, #b6b6b6);
	border-bottom: 4px solid #005da2;
	-moz-box-shadow: 0 2px 1px #9c9c9c;
	-webkit-box-shadow: 0 2px 1px #9c9c9c;
	box-shadow: 0 2px 1px #9c9c9c;
}

.menu li
{
	float: left;
	padding: 0 0 10px 0;
	position: relative;
	line-height: 0;
	border-right: 1px solid #b6b6b6;
}

.menu li:hover {
	background: #0186ba;
	background: -moz-linear-gradient(#04acec,  #0186ba);	
	background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
	background: -webkit-linear-gradient(#04acec,  #0186ba);
	background: -o-linear-gradient(#04acec,  #0186ba);
	background: -ms-linear-gradient(#04acec,  #0186ba);
	background: linear-gradient(#04acec,  #0186ba);
	/*-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
    -webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
    box-shadow: 0 0 2px rgba(255,255,255,.5);	
    -moz-border-radius: 5px;
    border-radius: 5px;*/
	z-index: 9999 !important;
}

.menu a 
{
	float: left;
	height: 25px;
	padding: 10px 25px 0 25px;
	color: #000;
	text-transform: uppercase;
	font: bold 12px/25px Arial, Helvetica;
	text-decoration: none;
}

.menu li:hover > a
{
	color: #fafafa;
}

*html .menu li a:hover /* IE6 */
{
	color: #fafafa;
}

.menu li:hover > ul
{
	display: block;
	z-index: 9999 !important;
}

/* Sub-menu */

.menu ul
{
    list-style: none;
    margin: 0;
    padding: 0;    
    display: none;
    position: absolute;
    top: 45px;
    left: 0;
    z-index: 9999 !important;    
    background: #444;
    background: -moz-linear-gradient(#444, #111);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
    background: -webkit-linear-gradient(#444, #111);    
    background: -o-linear-gradient(#444, #111);	
    background: -ms-linear-gradient(#444, #111);	
    background: linear-gradient(#444, #111);
    -moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
    -webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
    box-shadow: 0 0 2px rgba(255,255,255,.5);
}

.menu ul ul
{
  top: 0;
  left: 150px;
  z-index: 9999 !important;
}

.menu ul li
{
    float: none;
    margin: 0;
    padding: 0;
    display: block;  
    -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}

.menu ul li:last-child
{   
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;    
}

.menu ul a
{    
    padding: 10px;
	height: 40px;
	width: auto;
	height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
	text-transform: none;
	color: #fff;

}

*html .menu ul a /* IE6 */
{    
	height: 10px;
}

*:first-child+html .menu ul a /* IE7 */
{    
	height: 10px;
}

.menu ul a:hover
{
    background: #0186ba;
	background: -moz-linear-gradient(#04acec,  #0186ba);	
	background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
	background: -webkit-linear-gradient(#04acec,  #0186ba);
	background: -o-linear-gradient(#04acec,  #0186ba);
	background: -ms-linear-gradient(#04acec,  #0186ba);
	background: linear-gradient(#04acec,  #0186ba);
}

.menu ul li:first-child > a
{
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}

.menu ul li:first-child > a:after
{
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #444;
}

.menu ul ul li:first-child a:after
{
    left: -8px;
    top: 12px;
    width: 0;
    height: 0;
    border-left: 0;	
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
    border-right: 8px solid #444;
}

.menu ul li:first-child a:hover:after
{
    border-bottom-color: #04acec; 
}

.menu ul ul li:first-child a:hover:after
{
    border-right-color: #04acec; 
    border-bottom-color: transparent; 	
}


.menu ul li:last-child > a
{
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}

/* Clear floated elements */
.menu:after 
{
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}


ul.menu li.icon {display: none;}

/* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */
@media screen and (max-width:680px) {
  ul.menu li:not(:first-child) {display: none;}
  ul.menu li.icon {
    float: right;
    display: inline-block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
@media screen and (max-width:680px) {
  ul.menu.responsive {position: relative;}
  ul.menu.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.menu.responsive li {
    float: none;
    display: inline;
  }
  ul.menu.responsive li a {
    display: block;
    text-align: left;
  }
}

* html .menu             { zoom: 1; } /* IE6 */
*:first-child+html .menu { zoom: 1; } /* IE7 */
    	<!--MENU-->
        <ul class="menu" id="myTopnav">
            <li><a href="#">Home</a></li>
            <li><a href="#">Videos</a>
              <ul>
      <li><a href="#">Videos 1</a></li>
      <li><a href="#">Videos 2</a></li>
      <li><a href="#">Videos 3</a></li>
               </ul>
         </li>
              
      <li><a href="#">Headlines</a>
            	<ul>
 <li><a href="#">Headlines All</a></li>
<li><a href="#">Headlines Last Week</a></li>
               </ul>
            </li>
    <li><a href="#">Pictures</a></li>
          </li>
<li class="icon">
    <a href="javascript:void(0);" onclick="myFunction()">&#9776;</a>
  </li>

最佳答案

您必须将 display: block; 放在 li 上。

另外，不要忘记删除 a 元素上的 float: none; 设置。

我在图标上添加了一个 z-index，以便即使您位于第一个元素上方也能够将其关闭。

这可能对您有帮助:

function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "menu") {
        x.className += " responsive";
    } else {
        x.className = "menu";
    }
}
/* Main menu */


.menu
{
	width: 100%;
	margin: -15px 0 0 0;
	padding: 0 0 0 0;
	list-style: none;
	background: #d1d1d1;
	background: -moz-linear-gradient(#d1d1d1, #b6b6b6);
	background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #d1d1d1),color-stop(1, #b6b6b6));
	background: -webkit-linear-gradient(#d1d1d1, #b6b6b6);
	background: -o-linear-gradient(#d1d1d1, #b6b6b6);
	background: -ms-linear-gradient(#d1d1d1, #b6b6b6);
	background: linear-gradient(#d1d1d1, #b6b6b6);
	border-bottom: 4px solid #005da2;
	-moz-box-shadow: 0 2px 1px #9c9c9c;
	-webkit-box-shadow: 0 2px 1px #9c9c9c;
	box-shadow: 0 2px 1px #9c9c9c;
}

.menu li
{
	float: left;
	padding: 0 0 10px 0;
	position: relative;
	line-height: 0;
	border-right: 1px solid #b6b6b6;
}

.menu li:hover {
	background: #0186ba;
	background: -moz-linear-gradient(#04acec,  #0186ba);	
	background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
	background: -webkit-linear-gradient(#04acec,  #0186ba);
	background: -o-linear-gradient(#04acec,  #0186ba);
	background: -ms-linear-gradient(#04acec,  #0186ba);
	background: linear-gradient(#04acec,  #0186ba);
	/*-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
    -webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
    box-shadow: 0 0 2px rgba(255,255,255,.5);	
    -moz-border-radius: 5px;
    border-radius: 5px;*/
	z-index: 9999 !important;
}

.menu a 
{
	float: left;
	height: 25px;
	padding: 10px 25px 0 25px;
	color: #000;
	text-transform: uppercase;
	font: bold 12px/25px Arial, Helvetica;
	text-decoration: none;
}

.menu li:hover > a
{
	color: #fafafa;
}

*html .menu li a:hover /* IE6 */
{
	color: #fafafa;
}

.menu li:hover > ul
{
	display: block;
	z-index: 9999 !important;
}

/* Sub-menu */

.menu ul
{
    list-style: none;
    margin: 0;
    padding: 0;    
    display: none;
    position: absolute;
    top: 45px;
    left: 0;
    z-index: 9999 !important;    
    background: #444;
    background: -moz-linear-gradient(#444, #111);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
    background: -webkit-linear-gradient(#444, #111);    
    background: -o-linear-gradient(#444, #111);	
    background: -ms-linear-gradient(#444, #111);	
    background: linear-gradient(#444, #111);
    -moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
    -webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
    box-shadow: 0 0 2px rgba(255,255,255,.5);
}

.menu ul ul
{
  top: 0;
  left: 150px;
  z-index: 9999 !important;
}

.menu ul li
{
    float: none;
    margin: 0;
    padding: 0;
    display: block;  
    -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}

.menu ul li:last-child
{   
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;    
}

.menu ul a
{    
    padding: 10px;
	height: 40px;
	width: auto;
	height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
	text-transform: none;
	color: #fff;

}

*html .menu ul a /* IE6 */
{    
	height: 10px;
}

*:first-child+html .menu ul a /* IE7 */
{    
	height: 10px;
}

.menu ul a:hover
{
    background: #0186ba;
	background: -moz-linear-gradient(#04acec,  #0186ba);	
	background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
	background: -webkit-linear-gradient(#04acec,  #0186ba);
	background: -o-linear-gradient(#04acec,  #0186ba);
	background: -ms-linear-gradient(#04acec,  #0186ba);
	background: linear-gradient(#04acec,  #0186ba);
}

.menu ul li:first-child > a
{
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}

.menu ul li:first-child > a:after
{
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #444;
}

.menu ul ul li:first-child a:after
{
    left: -8px;
    top: 12px;
    width: 0;
    height: 0;
    border-left: 0;	
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
    border-right: 8px solid #444;
}

.menu ul li:first-child a:hover:after
{
    border-bottom-color: #04acec; 
}

.menu ul ul li:first-child a:hover:after
{
    border-right-color: #04acec; 
    border-bottom-color: transparent; 	
}


.menu ul li:last-child > a
{
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}

/* Clear floated elements */
.menu:after 
{
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}


ul.menu li.icon {display: none;}

/* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */
@media screen and (max-width:680px) {
  ul.menu li:not(:first-child) {display: none;}
  ul.menu li.icon {
    float: right;
    display: inline-block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
@media screen and (max-width:680px) {
  ul.menu.responsive {position: relative;}
  ul.menu.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 10000;
  }
  ul.menu.responsive li {
    float: none;
    display: block;
  }
  ul.menu.responsive li a {
    display: block;
    text-align: left;
    float: none;
  }
}

* html .menu             { zoom: 1; } /* IE6 */
*:first-child+html .menu { zoom: 1; } /* IE7 */
<!--MENU-->
        <ul class="menu" id="myTopnav">
            <li><a href="#">Home</a></li>
            <li><a href="#">Videos</a>
              <ul>
      <li><a href="#">Videos 1</a></li>
      <li><a href="#">Videos 2</a></li>
      <li><a href="#">Videos 3</a></li>
               </ul>
         </li>
              
      <li><a href="#">Headlines</a>
            	<ul>
 <li><a href="#">Headlines All</a></li>
<li><a href="#">Headlines Last Week</a></li>
               </ul>
            </li>
    <li><a href="#">Pictures</a></li>
          </li>
<li class="icon">
    <a href="javascript:void(0);" onclick="myFunction()">&#9776;</a>
  </li>

关于javascript - 2级响应式菜单不显示 block ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38767740/

上一篇：javascript - 为什么滚动不能正常工作？

下一篇：javascript - 如何在 if 中转到元素的父元素

相关文章：

Javascript 日期对象不正确的日期

javascript - Canvas 上的画线是点缀的

css - 向侧边栏添加左边框(Wordpress 24 主题)

android - 在 ActionBar 上正确居中 Logo 的最佳方法是什么？

CSS 下拉菜单 + 平面 UI

iphone - 如何将菜单项添加到 iOS 中的共享菜单

javascript - AngularJs:如何使 ui-select 正常工作？

javascript - 使用 javascript 在单击按钮时逐字突出显示句子中的文本

php - AJAX:跳转到由 PHP 使用 xmlhttp.open 动态创建的页面中的另一个部分(onClick() 是否在 href 之前运行？)

css - 如何在 MVC5 中切换 _Layout View

©2024 IT工具网  联系我们