一、简单的移动端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. python的list拷贝

    有三种情况 第一种:赋值(不是拷贝) a=[1,2,3] b=a 这种不是拷贝,a和b是一个变量,内存是一个 第二种:浅拷贝 a=[1,2,3,[4,5,6]] b=a b的第一层是独立的,第二层会更 ...

  2. java 小数精确计算

    小数精确计算 System.out.println(2.00 -1.10);//0.8999999999999999 上面的计算出的结果不是 0.9,而是一连串的小数.问题在于1.1这个数字不能被精确 ...

  3. HashMap测试程序1

    package com.iotek.map; import java.util.Collection;import java.util.HashMap;import java.util.Map;imp ...

  4. php strripos()函数 语法

    php strripos()函数 语法 作用:寻找某字符串中某字符最后出现的位置,不区分大小写.大理石平台 语法:strripos(string,find,start) 参数: 参数 描述 strin ...

  5. 笨办法学Python（learn python the hard way）--练习程序11-20

    #ex11.py1 print("How old are you?",end=''), age = input() print("How tall are you?&qu ...

  6. python中的变量的学习

    今年以来,时间都安排在学习python语言上了.(python3) 从最基础的变量开始学习.尽管以前学习过一段时间,但这次是系统性的学习,所以多花点时间,重新开始.学习完基础知识后,多练习几个项目. ...

  7. python+selenium 滑动滚动条的操作

    工作中碰到一种情况就是,要定位的元素需要滚动条滑到下方后才可以显示出来. 这种情况下,就要先滑动滚动条,再定位元素. 那么滑动滚动条我以前记录了appium中的操作,那么,selenium中该如何操作 ...

  8. TODO 思维模型 尺子 游标卡尺

    100个人 两个思维切入点 1>做对的题怎么分配 m(x)表示答对x道题的最多人数f(x)表示答对x道题的人数 m(0)=5m(1)=20=>f(0)=0m(2)=m(1)+1=21=&g ...

  9. Flask框架视图多层装饰器问题

    Flask中的app.route装饰器 我们知道,在flask框架中,我们的路由匹配就是通过有参装饰器来实现的,我们看一个简单的例子: from flask import Flask, render_ ...

  10. mysql_DML_select_子查询

    -------------------------------------------------------------------子查询---------------------   --1.子查 ...