一、简单的移动端tab头部二级下拉导航栏,向下弹出,向上隐藏
一、简单的移动端tab头部二级下拉导航栏,向下弹出,向上隐藏
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name='viewport' content='width=device-width,minimum-scale=1.0 maximum-scale=1.0 user-scalable=no' />
<title>YanGo</title>
<script type="text/javascript" src="http://www.xxiaoyuan.top/jquery-1.9.1.js"></script>
<style>
*{
padding: 0;
margin: 0 auto;
}
li{
list-style-type: none;
}
.box{
margin: auto;
}
.bar{
position: relative;
float: left;
width: 33.33%;
text-align: center;
}
.bar p{
background-color: #08c;
color: #fff;
height: 40px;
line-height: 40px;
}
.bar ul{
display: none;
margin-top: 10px;
position: relative;
top: 0;
background: #29a7e6;
color: #fff;
width: 80%;
position: relative;
border-radius: 10px;
}
.bar ul:before{
position: absolute;
content: "";
top: -8px;
background: #29a7e6;
width: 15px;
height: 15px;
left: 46%;
transform:rotate(45deg);
z-index: -1;
}
.bar ul li{
height: 35px;
line-height: 35px;
}
.box li:active{
background: rgba(255,255,255,.3);
}
</style>
</head>
<body>
<div class="box">
<ul class="ul1">
<li class="bar">
<p>早餐</p>
<ul>
<li>糕点</li>
<li>稀粥</li>
<li>营养</li>
</ul>
</li>
<li class="bar">
<p>午餐</p>
<ul>
<li>小炒</li>
<li>凉拌</li>
<li>甜点</li>
</ul>
</li>
<li class="bar">
<p>晚餐</p>
<ul>
<li>汤类</li>
<li>肉类</li>
<li>清淡</li>
</ul>
</li>
<div style="clear: both;"></div>
</ul>
</div>
</body>
<script>
$(".bar").click(function(){
if($(this).children("ul").css("display") == "block"){
$(this).children("ul").slideUp(300);
}
else{
$(this).children("ul").slideDown(300);
}
});
</script>
</html>
一、简单的移动端tab头部二级下拉导航栏,向下弹出,向上隐藏的更多相关文章
- CSS制作一个简单网页的下拉导航栏
网页下拉导航栏的制作 网页下拉导航栏的制作很简单,只需要运用好CSS中伪选择器. 首先说明几个简单的伪选择器(比较常用的): link:连接平常的状态 visited:连接被访问过之后 hover:鼠 ...
- 移动端tab滑动和上下拉刷新加载
移动端tab滑动和上下拉刷新加载 查看demo(请在移动端模式下查看) 查看代码 开发该插件的初衷是,在做一个项目时发现现在实现移动端tab滑动的插件大多基于swiper,swiper的功能太强大而我 ...
- (https专业版)2018年1月5日高仿互站仿友价T5虚拟交易+实物交易商城-站长交易源码送手机版程序10套模版+首页微信登陆+头部下拉导航
(https专业版)2018年1月5日高仿互站仿友价T5虚拟交易+实物交易商城-站长交易源码送手机版程序10套模版+首页微信登陆+头部下拉导航 首页支持微信登陆,只有第8套模板支持(endv模板),后 ...
- 纯CSS实现二级下拉导航菜单
这是一款纯CSS菜单,二级下拉导航效果,是最简洁的CSS导航菜单,兼容性也很棒,IE7/8.火狐等都支持,而且它还是学习CSS菜单编写的典型教程,让你学会很多CSS技巧. 运行效果截图如下: < ...
- 基于jQuery动画二级下拉导航菜单
春节回来给大家分享一款基于jQuery动画二级下拉导航菜单.鼠标经过的时候以动画的形式出现二级导航.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id=" ...
- jQuery实现淡入淡出二级下拉导航菜单的方法
本文实例讲述了jQuery实现淡入淡出二级下拉导航菜单的方法.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的导航菜单,淡入淡出二级的菜单导航,很经常见到的效果,这里使用的是jquer ...
- Android 判断软键盘弹出并隐藏的简单完美解决方案
最近项目中有一个编辑框,下面是个ListView.在触发编辑框弹出软键盘后,ListView还能滑动,并且ListView的item还能响应单击.这样的体验效果很不好.于是便想在滑动或单击item时判 ...
- lightinthebox头部分类菜单下拉导航,使鼠标移到See All Categories就显示下拉菜单
lightinthebox头部分类菜单下拉导航,使鼠标移到See All Categories就显示下拉菜单 打开includes\templates\lightinthebox\common\tpl ...
- 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果
查看本章节 查看作业目录 需求说明: 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果 用户将光标移动到"最新动态页"或"帮助查询" ...
随机推荐
- 1.Linux安装redis
Linux安装redis 操作系统是Centos7 1.下载压缩包 2.解压 3.编译 4.启动redis 5.设置redis.conf和防火墙端口开放,外网可以访问 1.下载压缩包 下载地址:htt ...
- man LVCREATE
LVCREATE(8) LVCREATE(8) NAME/名称 lvcreat ...
- centos启动提示unexpected inconsistency RUN fsck MANUALLY
今天一台虚拟机背后的物理机故障了,主机迁移后变成了 read only filesystem.上面部署了很多长连接服务,没有关掉就直接reboot,报错: unexpected inconsisten ...
- Intellij IDEA中如何给main方法赋args
Intellij IDEA中如何给main方法赋args 程序: package com.otherExample; /** * Created by 谭雪娇 on 2017/3/29. */publ ...
- 30个有关Python的小技巧,给程序员的 30 个基本 Python 贴士与技巧
30个有关Python的小技巧 2013/07/04 · Python, 开发 · 4 评论 · Python 分享到: 66 本文由 伯乐在线 - Kevin Sun 翻译.未经许可,禁止转载!英文 ...
- 生产环境下,oracle不同用户间的数据迁移。第三部分
任务名称:生产环境下schema ELON数据迁移至schema TIAN########################################前期准备:1:确认ELON用户下的对象状态se ...
- 将百分制转换为5分制的算法 Binary Search Tree ordered binary tree sorted binary tree Huffman Tree
1.二叉搜索树:去一个陌生的城市问路到目的地: for each node, all elements in its left subtree are less-or-equal to the nod ...
- linux sed如何锁定某一行数据进行替换
- 涛涛的小马甲 Android之Handler机制
首先需要了解一个基本的概念ANR:Application not response 即应用程序无响应,也就是俗话说的死机. 出现Anr的原因是: 主线程需要做很多重要的事情,响应点击事件,更新UI如果 ...
- Vagrant 手册之 Provisioning - Shell 配置程序
原文地址 Provisioner 命令:"shell" 示例: node.vm.provision "shell" do |s| s.inline = < ...