一、简单的移动端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. 【leetcode】1073. Adding Two Negabinary Numbers

    题目如下: Given two numbers arr1 and arr2 in base -2, return the result of adding them together. Each nu ...

  2. 在Mac电脑上安装linux系统

    1.首页需要下载VMware  fusion (百度一下) 2.Ubuntu 镜像文件(.iso) 连接:http://www.jb51.net/LINUXjishu/239493.html 3.打开 ...

  3. [CF846B]Math Show题解

    暴力一下就好啦! 枚举一下一共做多少次任务,剩下的时间将子任务排序,从头开始能取多少取多少就行了. 贴个代码 #include <cstdio> #include <algorith ...

  4. springmvc上传文件异常

    症状: error:org.springframework.web.multipart.MultipartException: Current request is not a multipart r ...

  5. 杂项 List

    题目 1. 栈    #A 表达式的转换 (Unaccepted) 2. STL 模板库 #B 双栈排序(Unaccepted)    #C 垃圾陷阱(Accepted)    #D 合并果子(Acc ...

  6. php匿名函数和闭包的理解

    PHP匿名函数和闭包使用的句法与普通函数相同,但匿名函和闭包数其实是伪装成函数的对象. 匿名函数:就是没有名称的函数.匿名函数可以赋值给变量,对象传递.不过匿名函数仍是函数,因此可以调用,还可以传入参 ...

  7. win10半夜自动开机的问题分析

    win10半夜自动开机的系统日志: 解决方法一: 1.根据日志判断自动唤醒后,windows更新了时间和代理 服务管理器中,关闭windows update, 但是半夜还会自动开 再关闭服务管理器的w ...

  8. JAVA数组的toString()方法不能直接输出数组内容？

    问题描述:我定义了一个类,类名是Job,当我输出Job.toString()是可以按我重载的toString方法输出的,但是如果输出jobs[]这个数组时,只会输出[Lmodel.Job;@45e22 ...

  9. PHP获得计算机的唯一标识[cpu,网卡]

    以下是从网上转载来的源码,但是我测试均不能执行,不知道怎么回事,转过来大家可以交流一下 <?php//获取电脑的CPU信息 function OnlyU(){ $a = ''; $b = arr ...

  10. WEB服务端安全---认证会话与访问控制

    一.认证与会话管理 认证:简而言之就是通过一定的凭证认出用户是谁.认证过程中按凭证数量可简单分为 ‘单因素认证’.‘双因素认证’或多因素认证.一般来说,多因素认证强度更高,但是用户体验上会比单因素认证 ...