一、简单的移动端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头部二级下拉导航栏,向下弹出,向上隐藏的更多相关文章

  1. CSS制作一个简单网页的下拉导航栏

    网页下拉导航栏的制作 网页下拉导航栏的制作很简单,只需要运用好CSS中伪选择器. 首先说明几个简单的伪选择器(比较常用的): link:连接平常的状态 visited:连接被访问过之后 hover:鼠 ...

  2. 移动端tab滑动和上下拉刷新加载

    移动端tab滑动和上下拉刷新加载 查看demo(请在移动端模式下查看) 查看代码 开发该插件的初衷是,在做一个项目时发现现在实现移动端tab滑动的插件大多基于swiper,swiper的功能太强大而我 ...

  3. (https专业版)2018年1月5日高仿互站仿友价T5虚拟交易+实物交易商城-站长交易源码送手机版程序10套模版+首页微信登陆+头部下拉导航

    (https专业版)2018年1月5日高仿互站仿友价T5虚拟交易+实物交易商城-站长交易源码送手机版程序10套模版+首页微信登陆+头部下拉导航 首页支持微信登陆,只有第8套模板支持(endv模板),后 ...

  4. 纯CSS实现二级下拉导航菜单

    这是一款纯CSS菜单,二级下拉导航效果,是最简洁的CSS导航菜单,兼容性也很棒,IE7/8.火狐等都支持,而且它还是学习CSS菜单编写的典型教程,让你学会很多CSS技巧. 运行效果截图如下: < ...

  5. 基于jQuery动画二级下拉导航菜单

    春节回来给大家分享一款基于jQuery动画二级下拉导航菜单.鼠标经过的时候以动画的形式出现二级导航.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id=" ...

  6. jQuery实现淡入淡出二级下拉导航菜单的方法

    本文实例讲述了jQuery实现淡入淡出二级下拉导航菜单的方法.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的导航菜单,淡入淡出二级的菜单导航,很经常见到的效果,这里使用的是jquer ...

  7. Android 判断软键盘弹出并隐藏的简单完美解决方案

    最近项目中有一个编辑框,下面是个ListView.在触发编辑框弹出软键盘后,ListView还能滑动,并且ListView的item还能响应单击.这样的体验效果很不好.于是便想在滑动或单击item时判 ...

  8. lightinthebox头部分类菜单下拉导航,使鼠标移到See All Categories就显示下拉菜单

    lightinthebox头部分类菜单下拉导航,使鼠标移到See All Categories就显示下拉菜单 打开includes\templates\lightinthebox\common\tpl ...

  9. 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果

    查看本章节 查看作业目录 需求说明: 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果 用户将光标移动到"最新动态页"或"帮助查询" ...

随机推荐

  1. 1.Linux安装redis

    Linux安装redis 操作系统是Centos7 1.下载压缩包 2.解压 3.编译 4.启动redis 5.设置redis.conf和防火墙端口开放,外网可以访问 1.下载压缩包 下载地址:htt ...

  2. man LVCREATE

    LVCREATE(8)                                                        LVCREATE(8) NAME/名称       lvcreat ...

  3. centos启动提示unexpected inconsistency RUN fsck MANUALLY

    今天一台虚拟机背后的物理机故障了,主机迁移后变成了 read only filesystem.上面部署了很多长连接服务,没有关掉就直接reboot,报错: unexpected inconsisten ...

  4. Intellij IDEA中如何给main方法赋args

    Intellij IDEA中如何给main方法赋args 程序: package com.otherExample; /** * Created by 谭雪娇 on 2017/3/29. */publ ...

  5. 30个有关Python的小技巧,给程序员的 30 个基本 Python 贴士与技巧

    30个有关Python的小技巧 2013/07/04 · Python, 开发 · 4 评论 · Python 分享到: 66 本文由 伯乐在线 - Kevin Sun 翻译.未经许可,禁止转载!英文 ...

  6. 生产环境下,oracle不同用户间的数据迁移。第三部分

    任务名称:生产环境下schema ELON数据迁移至schema TIAN########################################前期准备:1:确认ELON用户下的对象状态se ...

  7. 将百分制转换为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 ...

  8. linux sed如何锁定某一行数据进行替换

  9. 涛涛的小马甲 Android之Handler机制

    首先需要了解一个基本的概念ANR:Application not response 即应用程序无响应,也就是俗话说的死机. 出现Anr的原因是: 主线程需要做很多重要的事情,响应点击事件,更新UI如果 ...

  10. Vagrant 手册之 Provisioning - Shell 配置程序

    原文地址 Provisioner 命令:"shell" 示例: node.vm.provision "shell" do |s| s.inline = < ...