如何在响应式设计的媒体查询中显示所有 ul li 列表？答案

【问题标题】：How to show all ul li list in media queries for responsive design?如何在响应式设计的媒体查询中显示所有 ul li 列表？
【发布时间】：2017-03-22 15:19:34
【问题描述】：

我有这个导航栏的示例 sn-p 代码。在桌面模式下查看时，它会显示所有列表项。但问题是当我根据媒体查询的宽度最小化浏览器的宽度时，我的导航栏只显示主页列表。

这是我的问题的一个例子：

点击切换按钮之前

点击切换按钮后

这就是我单击切换按钮时的样子，它不会显示所有列表项。在移动模式下查看时有什么方法可以显示所有列表项？

代码片段示例

	$(document).ready(function(){
  
  var toggle_primary_button    = $('.nav-toggle-button'),  
		toggle_primary_icon    	 = $('.nav-toggle-button i');
    
    // Basic functionality for nav-toggle-button
	$(toggle_primary_button).click(function(){
		primary_menu.toggleClass("show1");		
		toggle_primary_icon.toggleClass("fa-times").toggleClass("fa-navicon");
	});
    
    });

#nav-area{background:#5b0651;clear:both;text-align:center;height:68px;position:relative;}
#nav-area p{color:#fff;font:bold 20px/100% open sans;position:absolute;left:10px;top:8px;display:none;}
nav ul {list-style-type: none; margin: 0;padding: 0;overflow: hidden;background-color: #5b0651;height:68px;}
#nav-area {font-size:14px;}
nav li {float: left;}
nav ul li:after{content:url(images/lispacer.png) no-repeat;padding: 25px 5px;}
nav li a {display: inline-block;color: white;text-align:center;transition: all 0.3s linear;-webkit-transition: all 0.3s linear;padding: 25px 22px;text-decoration: none; }
nav li a:hover {background-color: #fff;color: black;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<!-- Navigation Div -->
				<div id="nav-area">
					<div class="container">
						<a class="nav-toggle-button">
							<i class="fa fa-navicon fa-2x">
							&nbsp;&nbsp;&nbsp;&nbsp;
							</i>
						</a>
						<nav class="dropdown">

								<ul>
									<li><a href="index.php">HOME</a></li>
									<li><a href="#">ABOUT US</a></li>
									<li><a href="#">SERVICES</a></li>
									<li><a href="#">CAREERS</a></li>
									<li><a href="#">RESOURCES</a></li>
									<li><a href="#">CONTACT US</a></li>
								</ul>
						</nav>
					</div>
				</div>

这里的代码是我的 media.css 链接。

媒体 CSS

@media only screen
and (max-width : 960px) {
    html, body{ -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;}
    img{max-width: 100%; height: auto;}


    #nav-area{padding:10px 10px 4px;height:auto;}
    nav ul li{width:48%;margin:0 0 6px!important;border:1px solid #fff;}
    nav ul li a{}
    nav ul li:after{content:""!important;}
}

@media only screen
and (max-width : 768px) {
    .logo,.contactinfo{float:none;text-align:center;}
}

@media only screen
and (max-width : 600px) {
    .nav-toggle-button, nav li, nav li span{display: block; }
    .fright-img, .fleft-img, .fcenter-img,nav, .maincontents img{display: none; margin:0;}

    #nav-area{min-height:100px;}
    #nav-area p{display:block;}

    nav{margin-top:30px;}
    nav ul li{display:block;width:100%;height:100%;}
    .dropdown ul ul{position:relative;padding:0;}
    .dropdown ul ul ul{left:0;}
    .dropdown ul ul li a{width:100%;}
    .toggle-button { display: block; }
    .dropdown ul li:hover > ul {display: none;}
}

【问题讨论】：

标签： jquery html css media-queries media

【解决方案1】：

您需要在 CSS 代码中从 nav ul 中删除 height:68px。它的高度固定为 68 像素，这就是为什么您只看到主页链接而没有其他链接的原因。希望对你有帮助。

【讨论】：