我的导航栏在最大宽度为480px的移动设备上无响应

时间：2017-06-10 06:16:54

标签： html css3 responsive-design

我有一个自定义下拉导航栏，可响应480像素以上的屏幕。我创建了一个隐藏的菜单图标，在480px以下，显示图标，点击它时，应显示导航栏，包括下拉列表。低于480像素，图标显示效果不错，但点击后，下拉列表不会显示。我正在使用HTML5和CSS3。

＆＃13;
＆＃13; 
/*Styles the background-color of an active link*/
    .menu ul .active{
    	color: #ffffff;
    	background: #red; /* For browsers that do not support gradients */
        background: -webkit-linear-gradient(red 20%, green); /* For Safari 5.1 to 6.0 */
        background: -o-linear-gradient(red 20%, green); /* For Opera 11.1 to 12.0 */
        background: -moz-linear-gradient(red 20%, green); /* For Firefox 3.6 to 15 */
        background: linear-gradient(red 20%, green); /* Standard syntax */
        background: linear-gradient(red 20%, green); /* Standard syntax */
    }
    
    
    .navbar{
    	width:100%;
    	max-width:1000px;
    	text-align:center;
    	margin-top:-8px;
    	margin-bottom:60px;
    	margin-left:160px;
    }
    
    .menu ul{
    	/*Removes bullets*/
    	list-style:none;
    }
    
    /*Styles each list within ul*/
    .menu ul li{
    	background-color:green;
    	border:1px solid #ffffff;
    	width:100%;
    	max-width:173px;
    	height:35px;
    	line-height:35px;
    	margin:auto;
    	text-align:center;
    	/*Makes the list dispaly in a horizontal maneer*/
    	float:left;
    	position: relative;
    	border-radius:8px;
    	font: 15px;
    	font-weight:regular;
    }
    
    .menu ul li a{
    	text-decoration:none;
    	color:white;
    	display:block;
    }
    
    
    .menu ul li a:hover{
    	background-color:red;
    	border-radius:8px;
    }
    
    .menu ul ul{
    	position:absolute;
    	margin-left:-40px;
    	display:none;
    }
    
    .menu ul li:hover >ul{
    	display:block;
    }
    
    .menu ul ul ul{
    	width:100%;
    	margin-left:134px;
    	top:0px;
    }
    
    /*Display the drop-down on hover*/
    /*+ selecctor styles every element that are placed immediately after another element */
    .menu ul li a:hover + .menu ul li ul, .menu ul li ul:hover{
    	display:block;
    }
    
    /*Hide Checkbox*/
    input[type=checkbox]{
    	display:none;
    }
    
    /*Show menu when invisible checkbox is checked*/
    /*We select checkbox and then use selector column checked to make sure that the checkbox is checked*/
    /*~ selects everything that is beneath element on the left shoul be styled with CSS style within the curly bracket*/
    input[type=checkbox]:checked ~ .list{
    	display:block;
    }
    
    /*Styles the menu-label according to its class*/
    .show-menu{
    	font-family:"Helvetica Neue", Helvetica, Arial,sans-serif;
    	text-decoration:none;
    	color:#fff;
    	background: #19c589;
    	text-align:center;
    	padding:10px 0;
    	display:none;
    }
    
    
    /*Responsive styles*/
    @media screen and (max-width:480px){
    	/*Make drop-down links appear inline*/
    	.menu ul{
    		position:static;
    		display: none;
    	}
    	
    	/*Create vertical spacing*/
    	.menu ul li{
    		margin-bottom:1px;
    	}
    	
    	/*Make all menu links full width*/
    	.menu ul li, .menu li a{
    		width:100%;
    	}
    	
    	.show-menu{
    		display:block;
    	}
    	body{
    		background-image:none;
    	}
    
    
    }
＆＃13; 
<!DOCTYPE html>
    <html>
    <head>
    <link href='style.css' rel='stylesheet' type='text/css'>
    </head>
    <body>
    
    <!-- Clicking on the label will check the checkbox because for and id of checkbox are the same-->
    <label for="show-menu" class="show-menu"> Menu </label> 
    <input type="checkbox" id="show-menu">
    
    
    <div class="navbar">
    	<div class="menu">
    		<ul class ="list">
    			<li class="active">  Home </li>
    			<li> <a href="humanities.html"> Humanities <span class="arrow">&#9660; </span> </a>
    				<ul>
    					<li> <a href="#" rel="nofollow"> Music </a></li>
    					<li> <a href="#" rel="nofollow"> Linguistics </a></li>
    					<li> <a href="#" rel="nofollow"> Penology  </a></li>
    					<li> <a href="#" rel="nofollow"> Anthropology </a></li>
    					<li> <a href="#" rel="nofollow"> Sociology <span class="arrow">  &rang;</span></a>
    						<ul>
    							<li><a href="#" rel="nofollow"> Psychology</a></li>
    							<li><a href="#" rel="nofollow"> Counselling </a></li>
    							<li><a href="#" rel="nofollow"> C.M.D </a></li>
    						</ul> 
    					</li>  
    					
    				</ul>
    				
    				
    				
    			</li>
    			<li> <a href="education.html"> Education <span class="arrow">&#9660; </span> </a>
    				<ul>
    					<li> <a href="#" rel="nofollow"> E.C.D.E </a></li>
    					<li> <a href="#" rel="nofollow"> Science </a></li>
    					<li> <a href="#" rel="nofollow"> Arts with Edu </a>
    						<ul>
    							<li><a href="#" rel="nofollow"> Swahili </a></li>
    							<li><a href="#" rel="nofollow"> Psychology </a></li>
    							<li><a href="#" rel="nofollow"> Sociology of Ed. </a></li>
    							<li><a href="#" rel="nofollow"> Liberal Ed. </a></li>
    						</ul> 
    					</li>  
    					
    				</ul>
    			</li>
    			<li> <a href="eng.html"> Engineering <span class="arrow">&#9660; </span> </a>
    				<ul>
    					<li> <a href="#" rel="nofollow"> Electrical </a></li>
    					<li> <a href="#" rel="nofollow"> Civil & Structural </a></li>
    					<li> <a href="#" rel="nofollow"> Aeronautical </a></li>
    					<li> <a href="#" rel="nofollow"> Chemical </a></li>
    					<li> <a href="#"rel="nofollow" > Mechanical </a>
    						<ul>
    							<li><a href="#" rel="nofollow"> Industrial </a></li>
    							<li><a href="#" rel="nofollow"> Automotive </a></li>
    						</ul> 
    					</li>  
    					
    				</ul>
    			</li>
    			<li> <a href="contact.php" rel="nofollow"> Contact Us</a></li>
    		</ul>
    		
    	</div>
    </div>
    
    </body>
    </html>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

我认为这需要点击事件（JavaScript）到您的菜单按钮。这是我在jsfiddle中编写的代码：https://jsfiddle.net/capozzic1/qacyh592/4/。要运行该小提琴，首先选择页面的中间部分以将html页面（位于右下方）调整为移动设备的大小，然后单击左上角的“运行”，然后单击HTML中的大菜单按钮可以看到其余的导航栏链接显示。

此外，如果在显示菜单栏时再次单击该菜单栏，它将返回显示无。

如果您添加此脚本：

var menuBtn = document.querySelector(".show-menu");
var menu = document.querySelector(".menu ul");
menuBtn.onclick = function(){

if (menu.style.display == "none") { 
    menu.style.display = "block";
} else { 
    menu.style.display = "none";
}


}

然后单击菜单按钮应该会显示导航栏的其余部分。您可以添加此脚本将其放入名为script.js的文件中，然后在您的html中，在正文的下半部分放置

"<script src="script.js"></script>"

答案 1 :(得分：0)

问题是你的#show-menu复选框没有做任何事情，所以你只需添加一行

  #show-menu:checked ~ .navbar .menu ul {display: block;}

到你的CSS。然后单击大菜单按钮就可以了。无需额外的JavaScript例程。

提示：以完整页面模式运行代码段，以便您可以使窗口足够窄。

＆＃13;
＆＃13; 
/*Styles the background-color of an active link*/

.menu ul .active {
  color: #ffffff;
  background: #red;
  /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(red 20%, green);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(red 20%, green);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(red 20%, green);
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(red 20%, green);
  /* Standard syntax */
  background: linear-gradient(red 20%, green);
  /* Standard syntax */
}

.navbar {
  width: 100%;
  max-width: 1000px;
  text-align: center;
  margin-top: -8px;
  margin-bottom: 60px;
  margin-left: 160px;
}

.menu ul {
  /*Removes bullets*/
  list-style: none;
}


/*Styles each list within ul*/

.menu ul li {
  background-color: green;
  border: 1px solid #ffffff;
  width: 100%;
  max-width: 173px;
  height: 35px;
  line-height: 35px;
  margin: auto;
  text-align: center;
  /*Makes the list dispaly in a horizontal maneer*/
  float: left;
  position: relative;
  border-radius: 8px;
  font: 15px;
  font-weight: regular;
}

.menu ul li a {
  text-decoration: none;
  color: white;
  display: block;
}

.menu ul li a:hover {
  background-color: red;
  border-radius: 8px;
}

.menu ul ul {
  position: absolute;
  margin-left: -40px;
  display: none;
}

.menu ul li:hover>ul {
  display: block;
}

.menu ul ul ul {
  width: 100%;
  margin-left: 134px;
  top: 0px;
}


/*Display the drop-down on hover*/


/*+ selecctor styles every element that are placed immediately after another element */

.menu ul li a:hover+.menu ul li ul,
.menu ul li ul:hover {
  display: block;
}


/*Hide Checkbox*/

input[type=checkbox] {
  display: none;
}


/*Show menu when invisible checkbox is checked*/


/*We select checkbox and then use selector column checked to make sure that the checkbox is checked*/


/*~ selects everything that is beneath element on the left shoul be styled with CSS style within the curly bracket*/

input[type=checkbox]:checked~.list {
  display: block;
}


/*Styles the menu-label according to its class*/

.show-menu {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-decoration: none;
  color: #fff;
  background: #19c589;
  text-align: center;
  padding: 10px 0;
  display: none;
}


/*Responsive styles*/

@media screen and (max-width: 480px) {
  /*Make drop-down links appear inline*/
  .menu ul {
    position: static;
    display: none;
  }
  /*Create vertical spacing*/
  .menu ul li {
    margin-bottom: 1px;
  }
  /*Make all menu links full width*/
  .menu ul li,
  .menu li a {
    width: 100%;
  }
  .show-menu {
    display: block;
  }
  body {
    background-image: none;
    margin-top:70px; /* ML remove this line; this is a patch for the full screen snippet problem */
  }

  #show-menu:checked ~ .navbar .menu ul {display: block;}
}
＆＃13; 
<!-- Clicking on the label will check the checkbox because for and id of checkbox are the same-->
<label for="show-menu" class="show-menu"> Menu </label>
<input type="checkbox" id="show-menu">


<div class="navbar">
  <div class="menu">
    <ul class="list">
      <li class="active"> Home </li>
      <li> <a href="humanities.html"> Humanities <span class="arrow">&#9660; </span> </a>
        <ul>
          <li> <a href="#" rel="nofollow"> Music </a></li>
          <li> <a href="#" rel="nofollow"> Linguistics </a></li>
          <li> <a href="#" rel="nofollow"> Penology  </a></li>
          <li> <a href="#" rel="nofollow"> Anthropology </a></li>
          <li> <a href="#" rel="nofollow"> Sociology <span class="arrow">  &rang;</span></a>
            <ul>
              <li><a href="#" rel="nofollow"> Psychology</a></li>
              <li><a href="#" rel="nofollow"> Counselling </a></li>
              <li><a href="#" rel="nofollow"> C.M.D </a></li>
            </ul>
          </li>

        </ul>



      </li>
      <li> <a href="education.html"> Education <span class="arrow">&#9660; </span> </a>
        <ul>
          <li> <a href="#" rel="nofollow"> E.C.D.E </a></li>
          <li> <a href="#" rel="nofollow"> Science </a></li>
          <li> <a href="#" rel="nofollow"> Arts with Edu </a>
            <ul>
              <li><a href="#" rel="nofollow"> Swahili </a></li>
              <li><a href="#" rel="nofollow"> Psychology </a></li>
              <li><a href="#" rel="nofollow"> Sociology of Ed. </a></li>
              <li><a href="#" rel="nofollow"> Liberal Ed. </a></li>
            </ul>
          </li>

        </ul>
      </li>
      <li> <a href="eng.html"> Engineering <span class="arrow">&#9660; </span> </a>
        <ul>
          <li> <a href="#" rel="nofollow"> Electrical </a></li>
          <li> <a href="#" rel="nofollow"> Civil & Structural </a></li>
          <li> <a href="#" rel="nofollow"> Aeronautical </a></li>
          <li> <a href="#" rel="nofollow"> Chemical </a></li>
          <li> <a href="#" rel="nofollow"> Mechanical </a>
            <ul>
              <li><a href="#" rel="nofollow"> Industrial </a></li>
              <li><a href="#" rel="nofollow"> Automotive </a></li>
            </ul>
          </li>

        </ul>
      </li>
      <li> <a href="contact.php" rel="nofollow"> Contact Us</a></li>
    </ul>

  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题