手机端css中怎么让css仿微信底部菜单导航栏不被输入菜单顶上去·

来源：蜘蛛抓取(WebSpider) 时间：2017-01-26 07:59 标签： h5底部键盘顶上去
posts - 276,&
comments - 113,&
trackbacks - 0
效果体验：可以使用手机浏览器查看体验效果。以下是手机底部导航栏完整代码，HTML文件代码：
&!DOCTYPE html&
&meta http-equiv="Content-Type" content="text/ charset=utf-8"/&
&meta name="viewport" content="width=device-width, initial-scale=1" /&
&title&手机底部导航栏 - 何问起&/title&&base target="_blank"/&
&meta charset="utf-8" /&
&link rel="stylesheet" type="text/css" href="/texiao/mobile/5/hovertreebottom.css" media="all"&
&div class="bg"&&/div&
&div class="hovertreebottom"&
&div id="hovertreebottom_ul"&
&ul class="box"&
&a href="javascript:;" class=""&&span&何问起&/span&&/a&
&dd&&a href=""&&span&首页&/span&&/a&&/dd&
&dd&&a href="/texiao/"&&span&特效&/span&&/a&&/dd&
&dd&&a href="/menu/aspnet/"&&span&ASP.NET&/span&&/a&&/dd&
&dd&&a href="/down/"&&span&源码下载&/span&&/a&&/dd&
&dd&&a href="/hvtart/bjae/j0x9ww3x.htm"&&span&原文&/span&&/a&&/dd&
&a href="javascript:;" class=""&&span&柯乐义&/span&&/a&
&dd&&a href=""&&span&首页&/span&&/a&&/dd&
&dd&&a href="/a/bjad/5vw5k0au.htm"&&span&CSS3旋转&/span&&/a&&/dd&
&dd&&a href="/"&&span&工具&/span&&/a&&/dd&
&dd&&a href="/menu/jquery/"&&span&jQuery&/span&&/a&&/dd&
&a href="javascript:;" class="on"&&span&HoverTree&/span&&/a&
&dd&&a href="/"&&span&谜语&/span&&/a&&/dd&
&dd&&a href="/yzdd/bjae/a8rbum7w.htm"&&span&看图回答&/span&&/a&&/dd&
&dd&&a href="/miyu/bjae/m81a842g.htm"&&span&何问起（猜字）&/span&&/a&&/dd&
&dd&&a href="/menu/sqlserver/"&&span&Sql Server&/span&&/a&&/dd&
&div id="hovertreebottom_masklayer" class="masklayer_div on"&&&/div&
&script src="/texiao/mobile/5/hovertreebottom.js"&&/script&
&script type="text/javascript"&
hovertreebottom.bindClick(document.getElementById("hovertreebottom_ul").querySelectorAll("li&a"), document.getElementById("hovertreebottom_masklayer"));
当一级菜单的样式为 class="on" 时，默认是自动弹出子菜单例如&a href="javascript:;" class="on"&&span&HoverTree&/span&&/a&
web前端资源：&
阅读(...) 评论()css3视差滚动显示底部隐藏导航栏代码，适用多种浏览器
1、请不要问“在不在”之类的问题，有问题直接问！2、学生或暂时没有工作的童鞋，整站资源免费下载！3、赞助充值9.9元享终身VIP,整站资源无限下载！4、下载的人多，服务器卡，所以点击“下载后”要等一会儿5、程序员加油，交流群： 在线
下载资源：
下载积分：
css3视差滚动显示底部隐藏导航栏代码
友情提示：垃圾评论一律封号...
css3视差滚动显示底部隐藏导航栏代码
所需积分：10
亲，积分不够，多去发布资源、评论、签到、
或联系QQ人工充值
用户名/邮箱
两周内免登录
注册即送5积分安卓手机输入法弹出,消失会触发
window.onresize事件，我们一般的解决方法是获取焦点，底部隐藏，失去焦点，底部菜单出现，但是，有些人会点击这个按钮收起键牌
那么，这个时候你的失去焦点无效，还有一种方法呢，是把position:改成position:这样底部菜单就不会顶上去，但是这种方法，经过我的实验，还是会被输入法顶上去，这两种方法都不要完全解决问题，还有一种是布局的问题，主页面:position:relative,底部菜单:position：这个方法在一定的时间段内有用，这几种方法在做逛周边的时候我都用过，结果全被测试打回，这个bug只能解决,毕竟有些处女座是无法忍受这种问题,写了那么多的废话，下面贴出解决办法:兼容安卓和苹果:
安卓手机。针对这个输入法隐藏事件
安卓手机有这个事件,iphone没有,iphone点击这个按钮会让input框失去焦点
window.onresize = function () {
var h = $(window).height();
//console.log(h+','+window.screen.availHeight)
var u = navigator.userA
if (u.indexOf('Android') & -1 || u.indexOf('Linux') & -1) {
if(h &= window.screen.availHeight/2){
$('#toNav').css({'position':'absoult',"margin-top":"-.5rem",'display':'none'});
$('#toNav').css({'position':'fixed','display':'block'});
}}$('input').on('focus',function(){
$('#toNav').hide();
$('input').on('blur',function(){
$('#toNav').show();
})注:有代码洁癖的人可看下面的，前面代码，已解决底部菜单被输入法顶上去的问题另外input框是去焦点，底部菜单出现时，会出现底部菜单被弹上去，然后再弹下来,这个一般有些人都不会忍，所有我们失去焦点需要改变一下底部的样式，在安卓上和iphone上有时候底部的样式有可能会不同，这个时候我们需要判断手机类型去修改样式
阅读(...) 评论()

我要回帖

更多关于 h5底部键盘顶上去 的文章

 

随机推荐