您的位置:首页 - HTML5
HTML5仿微信手机底部导航菜单
如果你经常使用微信,经常关注公众号,那么你对微信底部的菜单应该比较熟悉。打开以下网址看看,这是一款jQuery+HTML5仿微信手机底部导航菜单。

效果体验:http://keleyi.com/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.com/keleyi/phtml/jqtexiao/38/hovertreewx.css" />
<script src="http://keleyi.com/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://keleyi.com">首页</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://keleyi.com/a/bjac/nmwpqgag.htm">人走路</a></li>
<li><a href="http://keleyi.com/a/bjac/e8t7hoj4.htm">下雪</a></li>
<li><a href="http://keleyi.com/a/bjac/xkqqoac2.htm">选美</a></li>
<li><a href="http://keleyi.com/a/bjad/8e9jd0u5.htm">星系</a></li>
<li><a href="http://keleyi.com/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>
本站导航
相关文章
柯乐义 Copyright© keleyi.com