一、简单的移动端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. [CH5E02] A Little Shop of Flowers

    问题描述 You want to arrange the window of your flower shop in a most pleasant way. You have F bunches o ...

  2. SPOJ QTREE - Query on a tree 【树链剖分模板】

    题目链接 引用到的大佬博客 代码来自:http://blog.csdn.net/jinglinxiao/article/details/72940746 具体算法讲解来自:http://blog.si ...

  3. python绘制图的度分布柱状图, draw graph degree histogram with Python

    图的度数分布 import collections import matplotlib.pyplot as plt import networkx as nx G = nx.gnp_random_gr ...

  4. python内建模块——collections模块

    在内置数据类型(dict.list.set.tuple)的基础上,collections模块还提供了几个额外的数据类型:Counter.deque.defaultdict.namedtuple和Ord ...

  5. linux文件软链接操作

    cd /etc/alternatives ll php* lrwxrwxrwx 1 root root 15 Oct 23 15:24 php -> /usr/bin/php7.3* lrwxr ...

  6. 2019 上海网络赛 F Rhyme scheme (字典树DP)

    题目:https://nanti.jisuanke.com/t/41414 题意:求长度为n的第k个bell number  ,  就是第i位的选取范围在 1-(i-1)位的最大值 +1,第一位固定为 ...

  7. vue组件传值之父传子

    1.父组件给子组件传值  home父组件  header子组件  关键字props home代码 <template> <div> <v-header :title=&q ...

  8. 后端技术杂谈10：Docker 核心技术与实现原理

    本系列文章将整理到我在GitHub上的<Java面试指南>仓库,更多精彩内容请到我的仓库里查看 https://github.com/h2pl/Java-Tutorial 喜欢的话麻烦点下 ...

  9. Hadoop ”No room for reduce task“问题处理

    早上发现一个任务有20个reduce,但是只有四个正常完成,剩余16个等待了8个小时才分配执行(集群槽位资源充足) 解决方法:查看了集群的log,发现有这种warn: -- ::, WARN org. ...

  10. （转）用Flink取代Spark Streaming！知乎实时数仓架构演进

    转:https://mp.weixin.qq.com/s/e8lsGyl8oVtfg6HhXyIe4A AI 前线导读:“数据智能” (Data Intelligence) 有一个必须且基础的环节,就 ...