网站导航在手机上点击不了怎么解决呢？
作者: 葛屹肃 | 日期: 2019-11-26 | 分类: 个人杂谈
最近着手新网站的事情，网站还是沿用这个博客的模板，不过，博客使用了2个导航，一个是基于PC，另一个基于手机，我打算改良下，做成响应式的导航，网上搜索响应式的代码，测试通过了，但是，真正使用时，碰到了问题，那就是手机上点击不了导航的链接。
由于对于html元素的了解不多，为了这个简单问题可以花了不少时间，这是就是缺乏知识所付出的代价了。幸运的是，最终还是将问题完美的解决掉。
网站导航在手机上点击不了，是由于手机是下拉式导航，当导航展开时，其实与其他DIV是重叠在一起，如果使用默认值的话，那么DIV会挡住导航，该如何解决呢？
很简单，css有一个元素：z-index。z-index属性设置元素的堆叠顺序,拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。因此，只需要将导航的css的UL加上z-index:9，导航将置于其他DIV的前面，点击时自然生效。
以下是完整的响应式导航代码：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<HTML>
<HEAD>
<META http-equiv=Content-Type content=”text/html; charset=gb2312″>
<TITLE>响应式导航</TITLE>
<META NAME=”Generator” CONTENT=”EditPlus”>
<META NAME=”Author” CONTENT=”">
<META NAME=”Keywords” CONTENT=”">
<META NAME=”Description” CONTENT=”">
<meta name=”viewport” content=”width=device-width,initial-scale=1,maximum-scale=1″ />
<meta name=”apple-mobile-web-app-capable” content=”yes” />
<meta name=”apple-mobile-web-app-status-bar-style” content=”blank” />
<meta name=”format-detection” content=”telephone=no” />
<style type=”text/css”>
* {
margin: 0px;
padding: 0px;
}.container {
background-color: #333;
height: 48px;
position: relative;
}.container ul {
padding-left: 100px;
}.container ul li {
list-style: none;
float: left;
width: 100px;
color: rgba(255, 255, 255, 0.8);
text-align: center;
height: 48px;
line-height: 48px;
cursor: pointer;
}.container ul li:hover {
color: rgba(255, 255, 255, 1);
}.container .menu {
width: 40px;
height: 30px;
border: 2px solid white;
position: absolute;
line-height: 30px;
text-align: center;
border-radius: 6px;
color: white;
cursor: pointer;
right: 40px;
top: calc((48px – 38px) / 2);
display: none;
-webkit-user-select: none;
}@media all and (max-width: 767px) {
.container .menu {
display: block;
}
.container ul {
position: absolute;
top: 50px;
padding-left: 0px;
right: 10px;
display: none;
z-index:9;
}
.container ul li {
float: none;
background-color: #333;
border-radius: 5px;
margin-bottom: 1px;
}
.container ul li:hover {
background-color: #333;
opacity: 0.9;
}
}
</style>
</HEAD>
<BODY>
<nav>
<ul>
<li>首页</li>
<li>贴吧</li>
<li>糯米</li>
<li>翻译</li>
<li>地图</li>
<li>图片</li>
<li>知道</li>
</ul>
<div>〓</div>
</nav>
</BODY>
<script type=”text/javascript” src=”jquery.min.js”></script>
<script type=”text/javascript”>
$(“.menu”).toggle(
function() {
$(this).css(“background-color”, “rgba(255,255,255,0.5)”);
$(“.container ul”).slideDown(200);
},
function() {
$(this).css(“background-color”, “transparent”);
$(“.container ul”).slideUp(200);
$(this).toggleClass(“active”);
}
);
$(window).resize(function() {
if($(this).width() > 767) $(“.container ul”).show(500);
});
</script>
</HTML>
注：代码中引用jquery.min.js，测试时可下载jquery.min.js并放至同一个目录下即可。
文章链接：https://www.geyisu.com/1172.html
