html css 仿微信底部自定義選單

阿新 • • 發佈：2019-01-22

最近幾個月一直從事微信開發,從剛開始的懵懂漸漸成長了一點。今天覺得微信底部自定義選單,如果能在html的頁面上也能顯示就好了.

記得以前看過某個網頁有類似效果.查找了該網頁的css. ok現在html css 實現微信自定義選單效果.

不多說直接上程式碼。

/**
 * 仿微信自定義選單
 * 
 * @author xuyw
 * @email [email protected]
 * @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};
})();

微信自定義選單

效果圖

html css 仿微信底部自定義選單

最近幾個月一直從事微信開發,從剛開始的懵懂漸漸成長了一點。今天覺得微信底部自定義選單,如果能在html的頁面上也能顯示就好了. 記得以前看過某個網頁有類似效果.查找了該網頁的css. ok現在html css 實現微信自定義選單效果. 不多說直接上程式碼

仿微信 RadioButton 自定義點選效果

1.Android Studio 步驟: 1.選中drawable目錄後點擊滑鼠右鍵New-Drawable resource file，如圖: 2.輸入檔名稱，點選ok，如圖：

微信中curl返回false-curl呼叫微信建立自定義選單返回false

我在微信建立選單欄的時候出現了curl返回結果false，我查了後才發現多了空格，為了以後不犯錯，記錄一下： $url = ' https://api.weixin.qq.com/cgi-bin/menu/create?access_token='.$accessToken; 在這行程式碼中

php curl返回false填坑記-curl呼叫微信建立自定義選單返回false

首先宣告一點，這個錯誤可能在你的開發生涯中不會遇到，除非你直接複製了微信公眾平臺的api地址。不過這應該算是php中curl擴充套件的一個bug，為什麼是bug呢？讓我們仔細來看。下邊是示例程式碼，程式碼的功能是呼叫微信公眾平臺的建立自定義選單介面來建立自定義選單。建

簡單的自定義BottomBar-仿微信底部導航欄

今天寫一個簡單的自定義的BottomBar。圖片文字都是比較隨意的，具體實現中自己可以修改。下面是實現圖：首先我們現在佈局中把想要顯示的整個介面的基本佈局搭建成功。（其實主要在於設定你的Tab。如果專案中用到Bootmbar的地方比較多或者是你想複用性高一點的話

ios開發之--仿（微信）自定義表情鍵盤

lai signed avi 創建不能 url div load mps 先附上demo：https://github.com/hgl753951/CusEmoji.git 效果圖如下：先說下具體的實現功能： 1，本地加載了一些H5的代碼，直接使用webview的lo

Android 仿「微信」自定義數字鍵盤

最終效果：實現這個自定義鍵盤的思路很簡單： 1. 要寫出一個數字鍵盤的佈局； 2. 與 Edittext 結合使用，對每個按鍵的點選事件進行處理； 3. 禁用系統軟鍵盤。有了思路，實現起來就不難了。 1. 實現鍵盤的 xml 佈局網格

微信刪除自定義菜單

err 定義菜單 menu code span nsf init lds 使用接口創建自定義菜單後，開發者還可使用接口刪除當前使用的自定義菜單。　　刪除菜單的接口如下： https://api.weixin.qq.com/cgi-bin/menu/delete?acce

使用微信JSSDK自定義微信分享標題、描述、和圖標

工具包 on() 包括 images 定義能力實現手機 2.0 最近做一個項目的時候用到微信的分享，實現定義分享標題，圖片，了解到微信在發布JSSDK後，把包括自定義分享在內的眾多網頁服務接口進行了統一。如果要想自定義分享自己的網頁信息給好友或朋友圈，就最好使用這個

配置微信jssdk自定義分享

執行 app $.ajax brush bug timeline 打開相關 mage 前段時間做這個功能的時候遇到這個問題，之前的話是微信自動抓取界面第一張圖，現在微信更新api，必須自行配置，接入jssdk，才能實現該功能。詳細可以查看微信的jssdk文檔微信官方開

微信分享自定義

微信分享：分享給朋友，分享到朋友圈 getQueryString:function(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var

使用微信JSSDK自定義微信分享標題、描述、和圖示

最近做一個專案的時候用到微信的分享，實現定義分享標題，圖片，瞭解到微信在釋出JSSDK後，把包括自定義分享在內的眾多網頁服務介面進行了統一。如果要想自定義分享自己的網頁資訊給好友或朋友圈，就最好使用這個統一的網頁服務介面。微信JS-SDK是微信公眾平臺面向網頁開發者提供的基於微信內的網頁開發

java-微信分享自定義內容功能（總結）

java寫微信分享自定義內容功能遇到的一個bug 需求：使用者通過關注公眾號開啟邀請好友頁面（前提必須先登入）點選手機右上角豎形

企業微信嵌入自定義專案（微信useId校驗登陸使用者合法性）

好久沒有寫部落格了，最近有一點小收穫，來記錄一下。免的以後使用的時候又找不到。最近，公司需要用企業微信整合內部專案。原本以為是另外一個大神的事，結果落到我頭上了。慚愧花費了兩天時間，哎。。。博主在這裡走了不少彎路。在這建議大家，儘量能閱讀官方文件再入手。我百度攻略耗費半天時間，然而收穫甚微。好了，

Android專案導航欄之仿微信底部導航欄TabLayout+ViewPager+Fragment

一、實現效果：二、依賴jar包： compile 'com.android.support:design:24+'三、專案工程結構：四、XML佈局 activity_main.xml佈局： <?xml version="1.0" encoding="u

TP5 微信網頁自定義分享類

荊軻刺秦王上一篇部落格介紹了微信自定義分享內容的獲取微信簽名包的，但是有一個問題就是，微信截至本文發表，仍然對於獲取access_token 有上限，就像這樣：為了解決這個問題，我們需要將上篇文章的獲取 access_token 的Jssdk 類稍微

TP5 實現微信網頁自定義分享

荊軻刺秦王文章部分借鑑於：https://www.cnblogs.com/sunshineliulu/p/8034286.html 在實際操作中還有一些需要注意的問題： 1.登入微信公眾平臺，設定—公眾號設定—功能設定裡，填寫『JS介面安全域名』。填寫的域名須通過ICP備案的驗證，

微信分享自定義內容實現

做html5的童鞋，微信中的分享，包括分享給qq好友、分享到朋友圈等，如何來自定義其中的內容呢？下面咱們一起聊聊。微信JS-SDK中的分享有兩種方案。第1種，可以自定義分享的“title”與“圖片”，即使沒有微信JSSDK的許可權也可以操作。

微信網頁自定義分享踩坑日誌

0、先上主要內容入坑在微信網頁開發中，使用JSSDK自定義分享內容。按官方文件去弄，然後出現的問題是：IOS手機自定義分享正常，而安卓手機自定義分享不生效，但是wx.config之類的配置都是ok。我使用的JSSDK版本是1.4.0。分享API是updateAppMessageShareData。

導致微信JSSDK 自定義分享內容介面失效的一種原因

在微信開發者工具上除錯分享介面成功，真機測試的時候卻失敗了。後來發現是手機反應比較慢 wx.config()還未執行成功後面繫結分享按鈕事件的程式碼就開始執行了導致繫結失敗因此在頁面載入時需

html css 仿微信底部自定義選單

相關推薦