你的位置:首页 > 网页设计

[网页设计]手机底部导航栏完整代码


效果体验:http://hovertree.com/texiao/mobile/5.htm

可以使用手机浏览器查看体验效果。

以下是手机底部导航栏完整代码,HTML文件代码:

 

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1" /><title>手机底部导航栏 - 何问起</title><base target="_blank"/><meta charset="utf-8" /><link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/mobile/5/hovertreebottom.css" media="all"></head><body><div class="bg"></div><div class="hovertreebottom"><nav><div id="hovertreebottom_ul"><ul class="box"><li><a href="javascript:;" class=""><span>何问起</span></a><dl><dd><a href="http://hovertree.com"><span>首页</span></a></dd><dd><a href="http://hovertree.com/texiao/"><span>特效</span></a></dd><dd><a href="http://hovertree.com/menu/aspnet/"><span>ASP.NET</span></a></dd><dd><a href="http://hovertree.com/down/"><span>源码下载</span></a></dd><dd><a href="http://hovertree.com/hvtart/bjae/j0x9ww3x.htm"><span>原文</span></a></dd></dl></li><li><a href="javascript:;" class=""><span>柯乐义</span></a><dl><dd><a href="http://keleyi.com"><span>首页</span></a></dd><dd><a href="http://keleyi.com/a/bjad/5vw5k0au.htm"><span>CSS3旋转</span></a></dd><dd><a href="http://tool.keleyi.com/"><span>工具</span></a></dd><dd><a href="http://keleyi.com/menu/jquery/"><span>jQuery</span></a></dd></dl></li><li><a href="javascript:;" class="on"><span>HoverTree</span></a><dl><dd><a href="http://m.hovertree.com/"><span>谜语</span></a></dd><dd><a href="http://m.hovertree.com/yzdd/bjae/a8rbum7w.htm"><span>看图回答</span></a></dd><dd><a href="http://m.hovertree.com/miyu/bjae/m81a842g.htm"><span>何问起(猜字)</span></a></dd><dd><a href="http://hovertree.com/menu/sqlserver/"><span>Sql Server</span></a></dd></dl></li></ul></div></nav><div id="hovertreebottom_masklayer" class="masklayer_div on">&nbsp;</div></div><script src="http://hovertree.com/texiao/mobile/5/hovertreebottom.js"></script><script type="text/javascript">hovertreebottom.bindClick(document.getElementById("hovertreebottom_ul").querySelectorAll("li>a"), document.getElementById("hovertreebottom_masklayer"));</script></body></html>

 

 

当一级菜单的样式为 时,默认是自动弹出子菜单
例如
<a href="javascript:;" ><span>HoverTree</span></a>

web前端资源: http://www.cnblogs.com/jihua/p/webfront.html