当前位置:首页 > 个人杂谈 > 正文内容

网站导航在手机上点击不了怎么解决呢?

日期: 2019-11-26 | 分类: 个人杂谈 | 浏览: 295次

最近着手新网站的事情,网站还是沿用这个博客的模板,不过,博客使用了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 – 34px) / 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: 4px;
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并放至同一个目录下即可。

等等,别走! ^_^

好消息,快手官方发红包啦,登录即送2元,秒提现! 查看详情>>

  • 评论:(0)

已有 0 位网友发表了一针见血的评论,你还等什么?

◎欢迎大家参与讨论

站内搜索