如果你經常使用微信，經常關注公眾號，那麼你對微信底部的菜單應該比較熟悉。打開以下網址看看，這是一款jQuery+HTML5仿微信手機底部導航菜單。
效果體驗：http:///keleyi/phtml/jqtexiao/38.htm
可以使用手機浏覽器體驗效果。
HTML文件代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" /><base target="_blank" />
<meta name="viewport" content="width = device-width, initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 1.0, user-scalable = no" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="keywords" content="" />
<meta name="description" content="hovertree" />
<title>jQuery+CSS3移動端仿微信菜單-</title>
<link rel="stylesheet" type="text/css" href="http:///keleyi/phtml/jqtexiao/38/hovertreewx.css" />
<script src="http:///keleyi/pmedia/jquery/jquery-1.11.3.min.js"></script>
</head>
<body>
<h1>注意看右下角，按鈕是固定在右下角的！適合移動端支持css3屬性的浏覽器</h1>
<div class="keleyirap">
<!--右下角按鈕↓-->
<div class="btn-open-close"><div class="expan3"></div></div>
<!--右下角按鈕↑-->
<!--↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓3列菜單開始↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓-->
<div class="btn3 clearfix">
<div class="menu">
<div class="bt-name"><a href="http://">首頁</a></div>
</div><!--menu-->
<div class="menu">
<div class="bt-name">HoverTree</div>
<div class="sanjiao"></div>
<ul class="new-sub">
<li><a href="http://hovertree.com/menu/jquery/">jQuery</a></li>
<li><a href="http://hovertree.com/hvtart/bjae/e3c9b53337d68d7e.htm">猜謎語</a></li>
<li><a href="http://hovertree.com/hvtart/bjae/5w5svpu4.htm">CSS菜單</a></li>
<li><a href="http://hovertree.com/texiao/">特效庫</a></li>
</ul>
</div><!--menu-->
<div class="menu">
<div class="bt-name"></div>
<div class="sanjiao"></div>
<ul class="new-sub">
<li><a href="http:///a/bjac/nmwpqgag.htm">人走路</a></li>
<li><a href="http:///a/bjac/e8t7hoj4.htm">下雪</a></li>
<li><a href="http:///a/bjac/xkqqoac2.htm">選美</a></li>
<li><a href="http:///a/bjad/8e9jd0u5.htm">星系</a></li>
<li><a href="http:///a/bjae/x9ty3te1.htm">jQuery下載</a></li>
</ul>
</div><!--menu-->
</div><!--btn3-->
<!--↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑3列菜單end↑↑↑↑↑↑↑↑↑↑↑↑↑↑-->
</div><!--keleyirap-->
<div class="btn-fullbg"></div>
<script>
//彈出垂直菜單
$(".keleyirap .menu").click(function () {
if ($(this).hasClass("cura")) {
$(this).children(".keleyirap .new-sub").hide(); //當前菜單下的二級菜單隱藏
$(".keleyirap .menu").removeClass("cura"); //同一級的菜單項
} else {
$(".keleyirap .menu").removeClass("cura"); //移除所有的樣式
$(this).addClass("cura"); //給當前菜單添加特定樣式
$(".keleyirap .menu").children(".keleyirap .new-sub").hide(); //隱藏所有的二級菜單
$(this).children(".keleyirap .new-sub").show(); //展示當前的二級菜單
}
});
//彈出垂直菜單end
//底部右側彈出隱藏
var flag3 = 1;
$(".btn-open-close,.btn-fullbg").click(function() {
if (flag3 == 1) {
$(".btn3,.expan3,.btn-fullbg").show();
$(".btn-open-close").addClass('expan2');
flag3 = 0;
} else {
$(".btn-fullbg,.new-sub,.btn3,.expan3").hide();
$(".menu").removeClass('cura');
$(".btn-open-close").removeClass('expan2');
flag3 = 1;
}
})
//底部右側彈出隱藏end
</script>
</body>
</html>