一、简单的移动端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. <sql></sql>标签是干嘛的

    <sql id="Base_Column_List"> id, emp_id, emp_name, org_id, org_name, corporate_name, ...

  2. 【转】Django-template模板语言

    Django-template模板语言 转自:https://www.cnblogs.com/zzy-9318/p/8672945.html 一.常用语法 只需要记两种特殊符号: {{  }}和 {% ...

  3. springboot2.0 Mybatis 整合

    原文:https://blog.csdn.net/Winter_chen001/article/details/80010967 环境/版本一览: 开发工具:Intellij IDEA 2017.1. ...

  4. 【转】excel音标乱码

    源地址:https://zhidao.baidu.com/question/204553900.html 百度一个音标字体文件,下载后再拷贝到C:\WINDOWS\FONTS目录下面就可以了 下载地址 ...

  5. Python分布式爬虫打造搜索引擎完整版-基于Scrapy、Redis、elasticsearch和django打造一个完整的搜索引擎网站

    Python分布式爬虫打造搜索引擎 基于Scrapy.Redis.elasticsearch和django打造一个完整的搜索引擎网站 https://github.com/mtianyan/Artic ...

  6. Step2 - How to: Implement a Windows Communication Foundation Service Contract

    This is the second of six tasks required to create a basic Windows Communication Foundation (WCF) se ...

  7. Mybatis入门（附源码压缩包下载）

    首先,来个项目全景预览,文章尾部附上Demo下载链接 [1]pom.xml配置(加入jar包) <project xmlns="http://maven.apache.org/POM/ ...

  8. RESTful再理解

    目录 目录 前言 RESTful的目的 REST的含义 表现层 状态转化 无状态协议HTTP 最后 前言 这是在经过一段时间的积累后,对RESTFul框架的再一次更深入的理解.希望能够将零散的知识点连 ...

  9. TCP概述

    1. TCP提供的服务 我们知道TCP是一个面向连接.提供可靠数据数据传输服务的传输层协议.面向连接意味着发送端和接收端在交换数据前需要建立一个连接,和我们平常打电话一样,在通话前,需要拨号建立连接. ...

  10. cron 定时任两种配置方式

    第一种:xml文件方式 <bean id="commonTimer" class="com.course.wx.timer.CommonTimer"> ...