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 ...

随机推荐

在你的Android手机上运行Linux
之前试过许多方法(也就几种),像什么Complete Linux Installer,Debian noroot,利用已有的Linux构造Bootstrap之类,要么就是复杂得要命(调了两天没有调出来 ...
HDU - 2612 Find a way（BFS搜索）
题目: 链接思路: 用BFS分别以‘Y’和‘M’的位置为起点进行两次搜索,并把这两次的搜索结果在一个二维数组中保存下来,在对地图遍历遇到‘@’更行最小值. PS: 如果用‘Y’和‘M’点分别去搜每个 ...
linux学习系列博客地址汇总
2018-09-28 16:03:43 CentOS7 yum命令:这是一个用来管理rpm包进行自动化安装的C/S模式的一个程序. CentOS7(无图形界面)支持中文显示的办法:系统安装好之后,有可 ...
安装php扩展(以swoole)为例
一.下载swoole到/usr/local/src目录下,操作 git clone https://gitee.com/swoole/swoole.git; 二.cd swoole,phpize(如果 ...
如何自己实现session功能
session字如其意,它的存在就是为了保持会话状态.PHP中的$_SESSION让我们很方便的使用它,但是如果PHP本身不提供这个功能,我们该如何实现呢?且听我慢慢忽悠. session的实现原理 ...
基础知识：if条件、while循环、for循环相关练习
1.实现用户输入用户名和密码,当用户名为 seven 且密码为 123 时,显示登陆成功,否则登陆失败! while True: name = input('请输入用户名:') psw = inpu ...
NioEventLoop.run select处理IO事件（boss/worker）流程：
NioEventLoop.run select处理IO事件(boss/worker)流程:processSelectedKeysprocessSelectedKeysOptimizedprocessS ...
IDEA-基本设置
目录: 1.设置内存 2.设置编码格式 3.设置换行符 4.设置新建Class文档说明 5.添加自定义注释 6.设置自己的maven 工欲善其事,必先利其器,设置好基础的设置才能事半功倍!少踩坑!以下 ...
Android Studio 使用图片
首先将图片放在drawable下然后: <ImageView android:layout_width="wrap_content" android:layout_heig ...
python标准库笔记
1.python互联网数据处理模块 base64数据编码二进制数据 encode ASCII字符 ASCll字符 decode 二进制数据 json数据交换格式轻量的数据交换格式,json暴露的A ...

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

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

随机推荐

热门专题