手机底部导航栏完整代码
效果体验: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"> </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>
当一级菜单的样式为 class="on" 时,默认是自动弹出子菜单
例如
<a href="javascript:;" class="on"><span>HoverTree</span></a>
web前端资源: http://www.cnblogs.com/jihua/p/webfront.html
手机底部导航栏完整代码相关推荐
- 手把手教你制作手机底部导航栏,领导看完都说好
手把手教你制作手机底部导航栏,领导看完都说好
- android开发时华为手机底部导航栏挡住了应用布局
原因:使用安卓的BottomNavigationView控件开发底部导航栏同时使用了沉浸式状态栏导致华为手机的底部导航栏会盖住我应用的导航栏. 解决:先写一个工具类 import android.co ...
- Android studio实现底部导航,AndroidStudio制作底部导航栏以及用Fragment实现切换功能...
前言 大家好,我是 Vic,今天给大家带来AndroidStudio制作底部导航栏以及用Fragment实现切换功能的概述,希望你们喜欢 学习目标 AndroidStudio制作底部导航栏以及用Fra ...
- css+html模仿京东app底部导航栏
css+html模仿京东app底部导航栏 完成效果如下: 上下滑动页面,底部导航栏一直存在,位置不变 底部导航栏实现代码如下: 只需css写超简单代码 重点是footer标签,其余标签是为和京东导航栏 ...
- 小程序底部导航栏配置以及自定义导航栏
小程序底部导航栏可在根目录下的 app.json 文件进行全局配置,但是部分情况下需要我们自己进行自定义. ** 一 :在app.json 文件进行全局配置** {"pages": ...
- 一行代码实现底部导航栏TabLayout
欢迎关注公众号:JueCode app中底部导航栏已经是很常见的控件了,比如微信,简书,QQ等都有这类控件,都是点击底部标签切换界面.主要的实现手段有 RadioGroup FragmentTabLa ...
- android加号底部导航栏,EasyNavigation Android 底部导航栏████几行代码实现 Tab 导航(随意定制加号,带红点消息提示) @codeKK Android开源站...
几行代码轻松实现底部导航栏(Tab 文字图片高度随意更改): 中间可添加加号按钮,也可添加文字:(足够的属性满足你需要实现的加号样式) 如果还不能满足.中间可添加自定义 View: Tab 中随意添加 ...
- android qq底部菜单栏,怎么关闭手机QQ底部导航栏的“看点”?
怎么关闭手机QQ底部导航栏的"看点"? 手机QQ的"看点"导航栏很影响用户体验,有没有什么方法能将底部的导航栏关闭呢?跟着小编一起来看看吧. 方法如下: 一.在 ...
- 手机直播源码,底部导航栏样式
手机直播源码,底部导航栏样式 我们应该在项目的res文件夹下新建一个menu文件夹,用来装menu布局文件 <?xml version="1.0" encoding=&quo ...
最新文章
- wordpress php教程 pdf,wordpress二次开发全能教程.pdf
- IT人不要一辈子做技术
- xshell 6和xftp 6的下载和使用
- 【springmvc+mybatis项目实战】杰信商贸-6.重点知识回顾
- java jsoup解析html标签_Java中使用 jsoup 提取本地HTML页面的标签内容
- IT培训班到底有没有必要参加?
- 数据结构:顺序栈的基本操作及实现
- 德软件开发者否认蓄意植入“心血”安全漏洞
- 用CD怎么装linux系统,CDLinux怎么安装使用,CDLinux教程解析
- 传教士与野人问题深度优先搜索算法(DFS)-Python实现
- 浏览器下载集合(最新版本)
- Type mismatch: inferred type is T but ViewModel was expected
- 【Mysql】根据经纬度远近排序
- python求数组平均值numpy_计算numpy数组的平均值
- 获取MLX90614温度探头的通讯地址
- Android中 简洁优秀的AgentWeb框架基本使用
- 关于单片机代码的风格
- python计算题库_python练习题-
- python 批量中文数字文件名互转英文阿拉伯数字
- Java使用Openoffice将word、ppt转换为PDF
热门文章
- 密钥策略的属性基加密(KP-ABE)
- 等候·《致我们终将逝去的青春》
- Day431.本地事务分布式事务CAP理论 -谷粒商城
- 宁夏理工学院计算机是专科吗,宁夏理工学院是本科还是专科
- 年薪不到 25.2 万免费学,廖雪峰的大数据高级开发课程第5期开始招生
- java并发多数据库连接失败_MAC测试JAVA多线程并发连接数据库问题
- 加密流量分析-4.加密协议分析
- 滴滴java开发面试题_滴滴出行(小桔科技)亲身面试经验分享,java开发岗
- 网站长期被挂马 访问者屡遭木马侵害
- Linux中网络连接不上解决方案大全