一、简单的移动端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. 程序员要注意！现在是RSS复兴的时候了

    一般来说,现代网络不乏恐怖,从无所不在的网络黑客到所有信息平台,再到各大平台的评论系统.不幸的是,我们建立的这个互联网并没有什么灵丹妙药.但任何人都厌倦了黑箱算法,控制你在网上看到的东西,一直存在但始 ...

  2. Python---基础---爱因斯坦阶梯问题

    写一个程序,打印出0-100所有奇数 ls = range(0, 101)for i in ls: if i % 2 == 1: print(i)--------------------------- ...

  3. 学习日记4、datagrid多行删除

    1.前台展现单选框datagrid代码 $('#List').datagrid({ url: '@Url.Action("GetList")', width: $(window). ...

  4. map()函数用法

    需求:已知两个列表,现在要一个列表中的元素,分别全部插入另一个列表中,新列表是[[0, 9, 1], [0, 9, 2], [0, 9, 3], [0, 9, 4], [0, 9, 5], [0, 9 ...

  5. sql常用 语句总结

    一,插入一个新字段:ALTER TABLE +表名+ADD  COLUMN(字段名+ 类型) sql1 = 'ALTER TABLE klkl_4s_shop ADD COLUMN (name_rea ...

  6. Mac下用命令行压缩和解压rar文件的方法

    废话不多说,直接进入主题 第一步:下载RAR工具包,根据自己需要下载相对应的版本 第二步:解压对应的压在的压缩包rarosx-5.4.0.tar.gz(我下载的是5.4.0版本) 第三步:从终端进入到 ...

  7. Learn Python the hard way, ex40 字典，可爱的字典

    #!/usr/bin/python #coding:utf-8 cities ={'CA':'sf','MI':'dt','FL':'je'} #创建字典 cities['NY']='ny' #增加新 ...

  8. 排序算法一：插入排序(Insertion sort)

    最近从网易公开课在看麻省理工学院的公开课<算法导论>,感觉还不错,接下来几篇文章所示学习日记了,不准备对算法细节做过多描述,感兴趣的可以自己去看. 文章分几篇讲经典排序算法,直接上代码,根 ...

  9. phpstudy开启PHPSocket扩展（windows系统）

    PHP开启Socket扩展 一.windows系统(本地电脑) 1.打开phpstudy,设置——>配置文件——>打开php.ini(我安装的是PhpStudy v8.0,其他版本请自己找 ...

  10. 解决bug：sprongboot2整合shiro，swagger2页面样式加载不出来问题

    问题如题: 解决思路,把shiro拦截去掉之后发现swagger-ui.html页面接在的资源如下: 因此可以推断拦截器拦截了 "/swagger-resources" " ...