html css 仿微信底部自己定义菜单

近期几个月一直从事微信开发,从刚開始的懵懂渐渐成长了一点。

今天认为微信底部自己定义菜单,假设能在html的页面上也能显示就好了.

记得曾经看过某个网页有类似效果.查找了该网页的css. ok如今html css 实现微信自己定义菜单效果.

不多说直接上代码。

/**

 * 仿微信自己定义菜单

 *

 * @author xuyw

 * @email xyw10000@163.com

 * @date 2014-07-27

 */

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title> New Document </title>

  <meta name="Generator" content="EditPlus">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <link rel="stylesheet" type="text/css" href="menu.css" media="all">

 </head>

 <body>

 <div class="bg">

				<img src="imgs/home-default17.jpg" width="100%" height="100%;">

			</div>

<div data-role="widget" data-widget="nav4" class="nav4">

			<nav>

				<div id="nav4_ul" class="nav_4">

					<ul class="box">

								<li>

																	<a href="javascript:;" class=""><span>关于我们</span></a>

																	<dl>

																					<dd>

																									<a href="#"><span>电话</span></a>

																							</dd>

																					<dd>

																									<a href="#"><span>地址</span></a>

																							</dd>

																					<dd>

																									<a href="#"><span>在线客服</span></a>

																							</dd>

																					<dd>

																									<a href="#"><span>在线QQ</span></a>

																							</dd>

																			</dl>

															</li>

																									<li>

																	<a href="javascript:;" class=""><span>电商</span></a>

																	<dl>

																					<dd>

																									<a href="#"><span>微信会员卡</span></a>

																							</dd>

																					<dd>

																									<a href="#"><span>微社区</span></a>

																							</dd>

																					<dd>

																									<a href="#"><span>微投票</span></a>

																							</dd>

																					<dd>

																									<a href="#"><span>微调研</span></a>

																							</dd>

																			</dl>

															</li>

																										<li>

																	<a href="javascript:;" class="on"><span>会员专区</span></a>

																	<dl>

																					<dd>

																									<a href="#"><span>微商城</span></a>

																							</dd>

																					<dd>

																									<a href="#"><span>微餐饮</span></a>

																							</dd>

																					<dd>

																									<a href="#"><span>微团购</span></a>

																							</dd>

																					<dd>

																									<a href="#"><span>微汽车</span></a>

																							</dd>

																			</dl>

															</li>

												</ul>

				</div>

			</nav>

			<div id="nav4_masklayer" class="masklayer_div on"> </div>

			<script src="nav4.js"></script>

			<script type="text/javascript">

				nav4.bindClick(document.getElementById("nav4_ul").querySelectorAll("li>a"), document.getElementById("nav4_masklayer"));

			</script>

		</div>

 </body>

</html>

css

*{padding:0; margin:0;}

.bg {

position: absolute;

z-index: -1;

top: 0;

left: 0;

right: 0;

bottom: 0;

opacity: 0.8;

}

ul, ol, li, dl {

list-style-type: none;

}

.box {

width: 100%;

display: -webkit-box;

display: -moz-box;

-webkit-box-orient: horizontal;

-moz-box-orient: horizontal;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

}

.box > * {

-webkit-box-flex: 1;

-moz-box-flex: 1;

}

a:link, a:visited {

color: #575757;

text-decoration: none;

}

a {

text-decoration: none;

-webkit-tap-highlight-color: rgba(0, 0, 0, 0.35);

}

a:link, a:visited {

color: #575757;

text-decoration: none;

}

a {

text-decoration: none;

-webkit-tap-highlight-color: rgba(0, 0, 0, 0.35);

}

.nav4{

	height:45px;

}

.nav4 ul{

	position:fixed;

	z-index:200;

	bottom:0;

	left:0;

	width:100%

}

.nav4 li{

	border:1px solid rgba(190,190,190,1);

	height:45px;

	border-bottom:0;

	border-right:0;

	position:relative;

	-webkit-box-shadow:inset 0 0 3px #fff;

}

.nav4 li:nth-of-type(1){border-left;0;}

.nav4 li>a{

	font-size:15px;

	-webkit-box-sizing:border-box;

	box-sizing:border-box;

	/*border:1px solid #f9f8f9;*/

	-webkit-tap-highlight-color:rgba(0,0,0,0);

	border-bottom:0;

	display:block;

	line-height:45px;

	text-align:center;

	background:-webkit-gradient(linear, 0 0, 0 100%, from(#f1f1f1), to(#dcdcdc), color-stop(35% ,#ededed), color-stop(50%, #e3e3e3) );

}

.nav4 li>a:only-child span{

	background:none;

	padding-left:0;

}

.nav4 li>a.on + dl{

	display: block;

}

.nav4 li>a span{

	color: #4f4d4f;

	display: inline-block;

	padding-left: 15px;

	background: url(imgs/1.svg#2) no-repeat 4px 18px;

	-webkit-background-size: 9px auto;

	text-shadow:0px 1px 0px #ffffff;

}

/***********************/

.nav4 dl{

	display:none;

	position:absolute;

	z-index:220;

	bottom:60px;

	left:50%;

	width:100px;

	margin-left:-50px;

	background:red;

	/*min-height:100px;*/

	background:#e4e3e2;

	/*border:1px solid #afaeaf;*/

	border-radius:5px;

	-webkit-box-shadow:inset 0 0 3px #fff;

	background:url(imgs/2.svg#3) no-repeat center center;

	-webkit-background-size:100%;

	background-size:100%;

}

/*, .nav4 dl:after*/

.nav4 dl:before{

	content:"";

	display:inline-block;

	position:absolute;

	z-index:240;

	bottom:0;

	left:50%;

	/*width:0;

	height:0;

	border:8px solid red;

	border-color:#afaeaf transparent transparent transparent;

	margin-left:-8px;

	margin-bottom:-16px;*/

	width:10px;

	height:8px;

	background: url(imgs/1.svg#2) no-repeat center -55px;

	-webkit-background-size: 10px auto;

	bottom: -7px;

	margin-left: -5px;

}

/*.nav4 dl:after{

	z-index:241;

	border-color:#e4e3e2 transparent transparent transparent;

	margin-bottom:-15px;

}*/

.nav4 dl dd{

	line-height:45px;

	text-align:center;

	background:-webkit-gradient(linear, 0 0, 100% 0, from(rgba(194,194,194,0.8)), to(rgba(194,194,194,0.8)), color-stop(50%, rgba(194,194,194,0.8)));

	background-size:80% 1px;

	background-repeat:no-repeat;

	background-position: center bottom;

	/*background: url(imgs/3.svg#4) no-repeat center bottom;

	-webkit-background-size:100px 1px;*/

}

.nav4 dl dd:last-of-type{

	background:none;

}

.nav4 dl dd a{

	font-size: 15px;

	display:block;

	color:#4f4d4f;

	text-shadow:0px 1px 0px #ffffff;

	white-space: pre;

	overflow: hidden;

	text-overflow: ellipsis;

}

.nav4 .masklayer_div{

	display: none;

	position: fixed;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	z-index: 180;

	background: rgba(0,0,0,0);

}

.nav4 .masklayer_div.on{display: block;}

var nav4 =(function(){

	bindClick = function(els, mask){

		if(!els || !els.length){return;}

		var isMobile = "ontouchstart" in window;

		for(var i=0,ci; ci = els[i]; i++){

			ci.addEventListener("click", evtFn, false);

		}

		function evtFn(evt, ci){

			ci =this;

			for(var j=0,cj; cj = els[j]; j++){

				if(cj != ci){

					console.log(cj);

					cj.classList.remove("on");

				}

			}

			if(ci == mask){mask.classList.remove("on");return;}

			switch(evt.type){

				case "click":

					var on = ci.classList.toggle("on");

					mask.classList[on?

"add":"remove"]("on");

				break;

			}

		}

		mask.addEventListener(isMobile?"touchstart":"click", evtFn, false);

	}

	return {"bindClick":bindClick};

})();

微信自己定义菜单

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveHV5dzEwMDAw/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

效果图

附上下载链接 http://download.csdn.net/detail/a714115852/7684935

最后欢迎大家一起学习共同进步

html css 仿微信底部自己定义菜单的更多相关文章

仿微信底部自定义菜单移动web
最近在做微信开发,要实现微信公众号改版—-改成微官网形式,即移动web页面中实现公众号的主页面,包括了公众号的菜单在底部显示本文针对仿公众号底部菜单这个功能实现进行总结.实现采用html和css.J ...
<Android 基础（三十三）> TabHost ~ 仿微信底部菜单
简介 Container for a tabbed window view. This object holds two children: a set of tab labels that the ...
夺命雷公狗---微信开发17----自定义菜单的事件推送，响应菜单的CLICK
废话不多说,index.php 代码如下所示: <?php /** * wechat php test */ //define your token require_once "com ...
Android仿微信底部选项卡
第一步添加依赖 dependencies { compile 'com.yinglan.alphatabs:library:1.0.5' } 第二步布局使用 <?xml version=&q ...
简单的方法实现仿微信底部的Tab选项卡界面
在网上看了比较多的关于Tab的教程,发现都很杂乱.比较多的用法是用TitlePagerTabStrip和ViewPaper.不过TitlePagerTabStrip有个很大的缺陷,Tab里面的内容刚进 ...
Android高仿qq及微信底部菜单的几种实现方式
最近项目没那么忙,想着开发app的话,有很多都是重复,既然是重复的,那就没有必要每次都去写,所以就想着写一个app通用的基本框架,这里说的框架不是什么MVC,MVP,MVVM这种,而是app开发的通用 ...
Android自己定义TabActivity(实现仿新浪微博底部菜单更新UI)
现在Android上非常多应用都採用底部菜单控制更新的UI这样的框架,比如新浪微博点击底部菜单的选项能够更新界面.底部菜单能够使用TabHost来实现,只是用过TabHost的人都知道自己定义Tab ...
[Android] Android 使用 FragmentTabHost + Fragment 实现微信底部菜单
Android 使用 FragmentTabHost + Fragment 实现微信底部菜单利用FragmentTabHost实现底部菜单,在该底部菜单中,包括了4个TabSpec,每个TabS ...
css模仿微信弹出菜单
css模仿微信弹出菜单效果图: html: <div class="action-sheet-backdrop"> <div class="act ...

随机推荐

CAD交互绘制虚线（com接口）
用户可以在控件视区任意位置绘制直线. 主要用到函数说明: _DMxDrawX::DrawLine 绘制一个直线.详细说明如下: 参数说明 DOUBLE dX1 直线的开始点x坐标 DOUBLE dY ...
VS2008 ActiveX(ocx控件)的调试工具ActiveX Control Test Container安装说明
vs2008中的TSTCON( ActiveX Control Test Container )工具非自动安装,而是作为一个例程提供.所以应找到该例程,并编译: 如vs2008安装在默认路径则 1, ...
JavaSE-15 Log4j参数详解
一:日志记录器输出级别,共有5级(从前往后的顺序排列) ①fatel:指出严重的错误事件将会导致应用程序的退出 ②error:指出虽然发生错误事件,但仍然不影响系统的继续运行 ③warn:表明会出现潜 ...
JAVA基础——设计模式之观察者模式
观察者模式是对象的行为模式,又叫发布-订阅(Publish/Subscribe)模式.模型-视图(Model/View)模式.源-监听器(Source/Listener)模式或从属者(Dependen ...
Hibernate-02
一.hibernate实体创建规则 1.hibernate---->持久层ORM 映射框架,专注于数据的持久化工作. 2.持久化类创建规则 --->1.提供无参数的构造方法 2.私有化.对 ...
分分钟钟学会Python - 文件操作
文件操作 1 文件基本操作 obj = open('路径',mode='模式',encoding='编码') obj.write() # 写入 obj.read() # 读取 obj.close() ...
C++动态申请内存 new T()与new T[]的区别
new与delete 我们知道,new和delete运算符是用于动态分配和撤销内存的运算符. new的用法开辟单变量地址空间: i. 如 new int ; 指开辟一个存放数组的存储空间,返回一个指 ...
NRF24L01注意点
nrf24L01被设置为接收模式后,可通过6个不同的数据通道(data pipe)接收数据. 每个数据通道都有一个唯一的地址但是各数据通道的频率是相同的.这意味着可以有6个被配置成发送状态的nRF24 ...
Django——分页功能Paginator
Django分页功能----Paginator Paginator所需参数: Paginator(object_list,per_page) Paginator常用属性: per_page: 每页显示 ...
POJ 3469 网络流最小割
将两个CPU分别视作源点和汇点对于那些不在同一个CPU中的模块会产生的代价作为一条双向的容量弧这里每个模块可以在任意一个CPU中运行,相当于寻找一个割,分割后,在S集合中的模块安装在第一个CPU中 ...

html css 仿微信底部自己定义菜单

html css 仿微信底部自己定义菜单的更多相关文章

随机推荐

热门专题