<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>99-翻转菜单-综合练习</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        .nav{

            width: 400px;

            height: 40px;

            margin: 0 auto;

            margin-top: 100px;

            background-color: black;

        }

        .nav>li{

            list-style: none;

            float: left;

            width: 120px;

            height: 40px;

            background-color: green;

            margin-left: 10px;

            text-align: center;

            line-height: 40px;

            /*

             li 设置为relative，.sub设置为absolute，表示定位流，这样菜单不会被div覆盖

            */

            position: relative;

        }

        .sub{

            /*不显示元素*/

            /*display: none;*/

            width: 120px;

            position: absolute;

            /*

            定位流一般要加left等

            */

            left: 0;

            top: 40px;

        }

        .sub li{

            list-style: none;

            background-color: deeppink;

            /*开始的时候文字翻转180*/

            transform: rotateY(180deg);

            transition: all 1s;

            opacity: 0;

        }

        /*

        .nav>li:hover .sub{

            display: block;

        }

        */

        .nav>li:hover .sub li{

            /*鼠标悬浮的时候，恢复默认状态，达到翻转的效果*/

            transform: none;

            opacity: 1;

        }

        /*下面对li做一个动画延迟，模拟按顺序执行动画*/

        .nav>li:hover .sub li:nth-child(1){

            transition-delay: 0ms;

        }

        .nav>li:hover .sub li:nth-child(2){

            transition-delay: 200ms;

        }

        .nav>li:hover .sub li:nth-child(3){

            transition-delay: 400ms;

        }

        .nav>li:hover .sub li:nth-child(4){

            transition-delay: 600ms;

        }

        .nav>li:hover .sub li:nth-child(5){

            transition-delay: 800ms;

        }

        .nav>li .sub li:nth-child(5){

            transition-delay: 0ms;

        }

        .nav>li .sub li:nth-child(4){

            transition-delay: 200ms;

        }

        .nav>li .sub li:nth-child(3){

            transition-delay: 400ms;

        }

        .nav>li .sub li:nth-child(2){

            transition-delay: 600ms;

        }

        .nav>li .sub li:nth-child(1){

            transition-delay: 800ms;

        }

        div{

            width: 400px;

            height: 300px;

            background-color: red;

            margin: 0 auto;

        }

    </style>

</head>

<body>

<ul class="nav">

    <li>一级菜单

        <ul class="sub">

            <li>二级菜单</li>

            <li>二级菜单</li>

            <li>二级菜单</li>

            <li>二级菜单</li>

            <li>二级菜单</li>

        </ul>

    </li>

    <li>一级菜单

        <ul class="sub">

            <li>二级菜单</li>

            <li>二级菜单</li>

            <li>二级菜单</li>

            <li>二级菜单</li>

            <li>二级菜单</li>

        </ul>

    </li>

    <li>一级菜单

        <ul class="sub">

            <li>二级菜单</li>

            <li>二级菜单</li>

            <li>二级菜单</li>

            <li>二级菜单</li>

            <li>二级菜单</li>

        </ul>

    </li>

</ul>

<div>我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字</div>

</body>

</html>

效果如下：

HTML翻转菜单练习的更多相关文章

  1. 纯css3响应式3d翻转菜单

    前端开发whqet,csdn,王海庆,whqet,前端开发专家 周末快乐哈,今天来看一个纯CSS3实现的3d翻转菜单.3d响应式菜单,希望对大家有所帮助. 在线赞赏效果.在线编辑代码,或者下载收藏. ...

  2. 【译】仿Taasky的3D翻转菜单动画实现

    最终效果 最终效果 开始 首先下载并打开一个事先搭好架子的Demo,然后来分析一下.这个Demo包含一个主页和详情页,其中MenuViewController继承自UITableViewControl ...

  3. CSS3实现翻转菜单效果

    演示地址 点击打开链接 注意:菜单翻转效果在搜狗浏览器上看不出来.推荐用FireFox <!DOCTYPE   html   PUBLIC   "-//W3C//DTD XHTML 1 ...

  4. CSS3 3D立方体翻转菜单实现教程

    今天我们来看一个非常有创意的CSS3 3D菜单,这个菜单的菜单项是可以旋转的长方体,鼠标滑过是长方体即可旋转,看看下面的效果图,是不是感觉非常酷,我觉得这个菜单很适合用在咱们开发人员的个人网站上. 当 ...

  5. HTML连载71-翻转菜单练习

    一.翻转菜单练习​ <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  6. Extjs 知识体系1-dom操作

    操作dom 主要是Ext.element,主要是简单的操作 Ext.dom.CompositeElement // 操作dom集合 ps:Extjs 使用字面量{} 形式,不支持链式操作 一.获取元素 ...

  7. Ext-js使用指南（总结）

    一.获取元素(Getting Elements) 1.Ext.get var el = Ext.get('myElementId');//获取元素,等同于document.getElementById ...

  8. CSS3实现3d菜单翻转

    transform-style:flat | preserve-3d: 3d透视属性.针对子元素如何在3d空间相对其父元素渲染,这个属性声明在父元素上,并且他的子元素使用了transform才会有效. ...

  9. 纯CSS 3D翻转一个面（翻转导航菜单 立方体）

    在做练习的时候学到css的翻转导航菜单,原代码有点让人头疼,通过对其css的参数一点点研究了其实现过程. 这里推荐大家研究这个3D翻转动画的代码. 我的github:swarz,欢迎给老弟我++星星 ...

随机推荐

  1. ES5和ES6那些你必须知道的事儿(二)

    ES5和ES6那些你必须知道的事儿 ES5新增的东西 二.对象方法 1.Object.getPrototypeOf(object) 返回对象的原型 function Pasta(grain, widt ...

  2. Windows IIS服务挂载NAS共享文件存储

    本文介绍如何结合阿里云NAS的SMB协议支持和ECS Windows虚拟机,使用Windows内置的互联网信息服务(IIS)来提供Web和FTP服务. 阿里云文件存储服务NAS主要面向阿里云ECS 实 ...

  3. [Leetcode 105]*前序后序遍历形成树

    public TreeNode find(int[] preorder, int[] inorder,int j, int start, int end) { if (j > preorder. ...

  4. SpringCloud系列------Eureka-Server

    一.概述: Spring Cloud针对服务注册与发现,进行了一层抽象,并提供了三种实现:Eureka , Consul , Zookeeper 本篇文章只对Eureka 进行介绍: (部分内容引用  ...

  5. python第三方库函数安装

    以安装pillow库为例 第一.在cmd环境中安装. 第二.输入pip -h(注意之间有个空格),会出现下图界面. 第三.输入pip install pillow,就会自动安装第三方库. 注意:这里面 ...

  6. C#获取文件目录

    Form1.cs using System;using System.Collections.Generic;using System.ComponentModel;using System.Data ...

  7. .NET并行计算和并发5：多线程编程一般指导性原则

    使用多线程时要考虑以下准则: 不要使用 Thread.Abort 终止其他线程. 对另一个线程调用 Abort 无异于引发该线程的异常,也不知道该线程已处理到哪个位置. 不要使用 Thread.Sus ...

  8. 关于vuex和Promise reject 或.catch 的报错处理。

    在我们开发过程中,经常会使用vuex来管理接口请求和返回数据. 在vue组件页面使用computed来读取vuex中state的数据. getTaskList({ commit }, payload) ...

  9. 自动化测试-12.selenium的弹出框处理

    前言 不是所有的弹出框都叫alert,在使用alert方法前,先要识别出到底是不是alert.先认清楚alert长什么样子,下次碰到了,就可以用对应方法解决. alert\confirm\prompt ...

  10. 利用教育邮箱注册JetBrains产品(pycharm、idea等)的方法

    转载:http://www.cnblogs.com/wang-meng/p/8887436.html 1,申请邮箱   地址为:http://mdu.edu.rs/  邮箱的前缀可以改成自己喜欢的字符 ...