固定底部导航菜单-续集（BottomMenu-移动端V3.0）

适应在客户端，点击弹出二级菜单。因为手机不支持hover.所以使用click点击实现弹出菜单，并且一级菜单聚焦变色，变化背景图片

核心css片段

====================

根据css3伪类元素:before实现

在根据/*A.active.tab:befre就是说同时有这两个class的A标签的before伪元素*/

.bottommenu li>a.active{
color: #318BE3;
}
.bottommenu .tab:before {
content: '';
display: block;
width: 42px;
height: 42px;
margin: 0 auto;
background: url(../images/icon.png) no-repeat;
background-size: 42px;
}
.bottommenu .homeI_zhuye:before {
background-position: 1px -83px;
}
/*A.active.tab:befre就是说同时有这两个class的A标签的before伪元素*/
.bottommenu li>a.active.homeI_zhuye:before {
background-position: 0px -366px;
}
.bottommenu .homeI_dingdan:before {
background-position: 1px 4px;
}
.bottommenu li>a.active.homeI_dingdan:before {
background-position: 1px -474px;
}
.bottommenu .homeI_chanpin:before {
background-position: -1px -168px;
}
.bottommenu li>a.active.homeI_chanpin:before {
background-position: -1px -572px;
}
.bottommenu .homeI_yonghu:before {
background-position: 0px -259px;
}
.bottommenu li>a.active.homeI_yonghu:before {
background-position: 1px -672px;
}

=====================

核心js代码
$(".bottommenu li .tab").click(function() {
$(".bottommenu li .tab").removeClass('active');
$(this).addClass("active");
});

});

==============HTML=============

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en">
<html>

<head>
<title>bottommenu底部导航菜单-移动端 </title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"/>
<link href="css/base.css" type="text/css" rel="stylesheet" />
<link href="css/bottommenu.css" type="text/css" rel="stylesheet" />
<script language="javascript" type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script language="javascript" type="text/javascript" src="js/pop-layer.js"></script>
</head>

<body>

</div>
</body>

</html>

====================CSS===========================

.bottom {
width: 100%;
height: 90px;
line-height: 90px;
position: fixed;
bottom: 0;
left: 0;
background: #FFFFFF;
}
.bottom li {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.bottom .bottommenu {
height: 90px;
border-top: 1px #dedede solid;
background: #F3F3F3;
}
.bottom .bottommenu>li {
float: left;
width: 25%;
height: 90px;
text-align: center;
position: relative;
padding-top: 10px;
}
.bottom .bottommenu>li+li {
border-left: 1px #dedede solid;
}
.bottommenu li>a {
color: #4f4d4f;
font-size: 16px;
display: block;
line-height: 32px;
padding-top: 4px;
}
.bottommenu .pop-layer {
/*visibility: hidden;*/

display: none;
text-align: center;
border-top: 1px #dedede solid;
background: #FFFFFF;
border-left: 1px #FFFFFF solid;
border-right: 1px #FFFFFF solid;
position: absolute;
bottom: 91px;
width: 100%;
/* -moz-box-shadow: 3px 3px 4px #333232;
-webkit-box-shadow: 2px 1px 2px #F1F1F1
box-shadow: 2px 1px 2px #F1F1F1;*/
}
.pop-layer li+li {
height: 50px;
border-top: 1px #dedede solid;
}
.pop-layer li a {
padding-top: 0;
height: 50px;
line-height: 50px;
}
.triangle-bottomleft {
width: 0;
height: 0;
border-bottom: 10px solid #dedede;
border-left: 10px solid transparent;
position: absolute;
right: 7px;
bottom: 7px;
}

=====================JS=========================

$(document).ready(function() {
$(".bottommenu li").click(function(e) {
if ($(this).find(".pop-layer").is(':hidden')) {
$(".bottommenu li .pop-layer").hide();
$(this).find(".pop-layer").show();
} else {
$(".bottommenu li .pop-layer").hide();
}
e.stopPropagation(); // 阻止冒泡
});

$(".pop-layer li").click(function(e) {
$(".pop-layer li").css('background', '#fff');
$(this).css('background', '#f0f0f0');
$(this).parent().show();
e.stopPropagation(); // 阻止冒泡
});

$(document).click(function() { // 点击空白消失
$(".bottommenu li .pop-layer").hide();
});

$(".bottommenu li .tab").click(function() {
$(".bottommenu li .tab").removeClass('active');
$(this).addClass("active");
});

});

=====================

感谢华-一棵树思维

下载地址：http://files.cnblogs.com/files/leshao/BottomMenu-%E7%A7%BB%E5%8A%A8%E7%AB%AFV3.0.rar

固定底部导航菜单-续集（BottomMenu-移动端V3.0）的更多相关文章

bootstrap 固定底部导航自适应
在使用bootstrap 底部导航的时候遇到了一个问题 -- 当我的内容超过一屏的时候,底部的部分内容会被固定的导航内容遮盖自己写了一个JS脚本,解决自适应的问题 <nav class=&qu ...
Bootstrap 固定底部导航栏菜单
直接上代码: <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" ...
第01章开发准备（对最新版的RN进行了升级）1-4 项目底部导航菜单开发
Flutter - 创建底部导航栏
之前写过的一篇文章介绍了 Flutter - 创建横跨所有页面的侧滑菜单, 这次就一起来学习一下底部导航栏. 底部导航栏在ios平台上非常常见,app store就是这样的风格.还有就是大家最常用的微 ...
底部导航栏-----FragmentTabHost
[说明] 1.主界面上添加父容器:FragmentTabHost 属于v4兼容包需要指定该id为android:id/tabhost,不能修改,表示由android系统来托管这个id. 本身是一个F ...
解决 scroll() position:fixed 抖动、导航菜单固定头部(底部)跟随屏幕滚动
一.导航栏或者页脚正常情况下固定在页面的相应位置,当页面滚动后,导航栏或者页脚固定在页面的顶部或者底部的情景一般就是将该块的代码样式的position设置为fixed.固定在顶部的话,将top设置为 ...
移动端可拖动导航菜单小demo
<!DOCTYPE html> <html lang="en"> <head> <title>移动端滑动导航菜单</title ...
h5移动端常见虚拟键盘顶起底部导航栏解决办法
在h5移动端开发中相信很多朋友跟我一样都会遇到页面底部导航被虚拟键盘顶起的问题,自己在网上找到的解决办法拿出来与大家分享,有不完美之处还望见谅,有更好的解决办法可以贴出来大家一起互相学习!! var ...
uni-app h5端跳转到底部导航栏的时候使用方法uni.switchTab跳转刷新页面更新数据
h5端的uni-app项目需求:uni-app h5端跳转到底部导航栏的时候使用方法uni.switchTab跳转刷新页面更新数据百度的方法如下: uni.switchTab({ url: '/p ...

随机推荐

》》QQ-注册
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
Asteroids!-裸的BFS
G - Asteroids! Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Subm ...
toolbar ,textfield,图片拉伸,Bundle
1 工具栏 UIToolbar 2 textField 协议方法一旦TextField成为第一响应,此方法就会调用 - (void)textFieldDidBeginEditing:(U ...
菜鸟版JAVA设计模式—外观模式
外观模式是一种比較easy理解的模式,作用非常easy.就是解耦合. 结构也是非常easy,一个外观类.这个外观类持有非常多的业务类. 再由客户类去调用这个外观类去实现一些列的业务操作... 这个模式 ...
XML解析之SAX
今天在敲代码的时候,想要实现地址选择功能,就是那个能够选择省.市.县的一个,用到的一个开源框架Android-PickerView,当然他这个里面尽管实现了能够选择的城市列表.可是他这是自己创建的,可 ...
JavaScript 实现命名空间（namespace）的最佳方案——兼容主流的定义类（class）的方法，兼容所有浏览器，支持用JSDuck生成文档
作者: zyl910 一.缘由在很多的面向对象编程语言中,我们可以使用命名空间(namespace)来组织代码,避免全局变量污染.命名冲突.遗憾的是,JavaScript中并不提供对命名空间的原生支 ...
Intellij idea 复制粘贴查找快捷键失效
遇到此问题,竟不能复制, 发现原因,是因为勾选了Vim模式, Tools,Vim Emulator,前面会有一个√,取消即可,如图: 我的是这个原因,复制粘贴快捷键失效,也有可能历史粘贴板的深度不够 ...
云储存第三方--阿里云OSS VS 又拍云USS
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #454545 } p. ...
iOS 写给iOS开发者的React Native学习路线(转)
我是一名iOS开发者,断断续续一年前开始接触React Native,最近由于工作需要,专职学习React Native也有一个多月了.网络上知识资源非常的多,但能让人豁然开朗.迅速学习的还是少数,我 ...
关于llvm kaleidoscope: 记一次Debug血泪之路
简而言之,慎(bu)用(yong)全局变量! 这次debug基本上花了我一周的时间,我基本上是晚上9点30下自习回然后调试到11点30,如此反复一周直到今天周五终于解决了,,以前都听说前辈们说尽量不 ...

固定底部导航菜单-续集（BottomMenu-移动端V3.0）

固定底部导航菜单-续集（BottomMenu-移动端V3.0）的更多相关文章

随机推荐

热门专题