实现的效果：鼠标移入按钮时按钮中的内容就会出现，分别展示不同的出现效果。
效果难点：不使用JavaScript，那这个效果的难点就是在于:hover伪类的掌控，以及考验对html的结构掌握。

1、 html布局
在你想要的位置制作出5个导航栏按钮，或者更多。

这就是html结构中的样子，下面来分析这种结构的意义；
·整个导航栏就是一个菜单，表面上的就是一级菜单。
·一级菜单里的内容就是二级菜单；

·一级菜单复制了多个之后就是导航栏，内容标签看需求，多数情况都是a标签。
·一级菜单中，必须有一个代表着当前菜单的标签可以是文本也可以是a标签。
·如果一级菜单中有了二级菜单，那么二级菜单的ul列表必须放在一级菜单里。

2、 css样式
先将整个导航栏装饰一下，不然达不到效果。
我们这里的样式需要单独创建出一个样式文件。

这是初始的效果。字母大写的部分就是一级菜单；一级菜单中又有二级菜单，想要多少菜单在上一级菜单中添加列表就好；
这里将代表二级菜单的ul标签隐藏。
如何隐藏，也就代表了显示的方式；这里我把常用的都写上，篇幅就有点长了。
注：隐藏列表请使用visibility: hidden进行隐藏。

第一种：移入一级菜单中二级菜单下拉。

这种效果，我们需要将二级菜单ul的高度设置为0，并将overflow加上hidden（溢出边界外不显示）。
这种效果的重点，是二级菜单的定位，属性一定是top才能是下拉的效果；如果是bottom那么就是上拉。
效果：移入一级菜单，其内容中的二级菜单高度设置回来就有了；

第二种：移入一级菜单中二级菜单上移。
这种应该算是最常见的一种效果。

这种效果我们需要将一级菜单的top位移值改大一点，让菜单里顶部更远点然后透明看不见。
鼠标移入一级菜单中，二级菜单里的top改回来，透明值也调1这样就完成了上移的效果。

 

 第三种：移入一级菜单中二级菜单淡出。

这种效果是效果中最简单的，更改二级列表的透明度就好了。
原本状态下，二级菜单隐藏。
鼠标移入一级菜单，二级菜单通过透明度和visibility值的更改完成效果。

第四种：移入一级菜单中二级菜单左移。
这种跟第二种上移的方式是是一样的，只不过是把top值换成了left值而已。

实际上移动都是移动列表位置而已，差别不大，也不难实现，寻常的页面都是这样做出来的。

第五种：翻转
这种就涉及到了css3的知识点，需要你在脑海中构想出一个三维空间，稍微难那么一点点！

在鼠标还没移入一级菜单时，使用效果的二级菜单中必备的两个属性：transform-origin和transform；
第一关键点：perspective()属性在rotaeX()属性中处于哪个位置，
·在rotaeX()属性的最前面，那么perspective()会将里面的值根据屏幕“前”的位置做判断
·在rotaeX()属性第一个属性之后那么perspective()会将里面的值根据屏幕“后”的位置做判断

第二关键点：transform-origin属性在这只是告诉transform要做效果，是根据top顶点来做效果。

技术点总结：
导航栏其实不难，用上js后甚至可以说简单。抛开js，纯html、css来做也不难，多数效果还是够用的！
html部分更多的是结构上的问题，鼠标移入的时候一定是二级菜单的父元素！
如果鼠标移入的是兄弟元素，那么鼠标移入进了二级菜单，就会造成鼠标移入二级菜单，二级菜单的消失这么一个效果。翻转效果可以取源代码自己研究研究，看懂更好。

源码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>导航栏实现</title>

</head>

<!-- 页面渲染内容 -->

<body>

    <!-- 导航栏 -->

    <div class="nav">

        <!-- 列表 -->

        <ul>

            <!-- 一级菜单 -->

            <li class="nav-litem">

                <a href="javascript:;">home</a>

                <ul>

                    <!-- 二级菜单 -->

                    <li><a href="javascript:;">这是二级菜单</a></li>

                    <li><a href="#">home-menu</a></li>

                </ul>

            </li>

            <li class="nav-litem">

                <a href="javascript:;">list</a>

                <!-- 二级菜单 -->

                <ul>

                    <li><a href="javascript:;">这是二级菜单</a></li>

                    <li><a href="#">list-menu</a></li>

                </ul>

            </li>

            <li class="nav-litem">

                <a href="javascript:;">group</a>

                <!-- 二级菜单 -->

                <ul>

                    <li><a href="javascript:;">这是二级菜单</a></li>

                    <li><a href="#">group-menu</a></li>

                </ul>

            </li>

            <li class="nav-litem">

                <a href="javascript:;">Pages</a>

                <!-- 二级菜单 -->

                <ul>

                    <li><a href="javascript:;">这是二级菜单</a></li>

                    <li><a href="#">Pages-menu</a></li>

                </ul>

            </li>

            <li class="nav-litem">

                <a href="javascript:;">Contact</a>

                <!-- 二级菜单 -->

                <ul>

                    <li><a href="javascript:;">这是二级菜单</a></li>

                    <li><a href="#">Contact-menu</a></li>

                </ul>

            </li>

        </ul>

    </div>

    <!-- 导航栏 -->

</body>

<!-- 页面css样式 -->

<style>

    /* 这里是导航栏的css样式表 */

    body {

        margin: 0;

        padding: 0;

    }

    li {

        list-style: none;

    }

    a {

        text-decoration: none;

    }

    /* 一级 */

    .nav>ul {

        margin: 0;

        padding: 0;

        display: flex;

    }

    .nav .nav-litem {

        position: relative;

        flex: 0 0 20%;

    }

    .nav .nav-litem>a {

        text-transform: uppercase;

        font-size: 1.2rem;

        color: white;

        text-align: center;

        background-color: orange;

        display: block;

        line-height: 50px;

        transition: .3s;

    }

    .nav .nav-litem>a:hover {

        background-color: rgb(218, 141, 0);

    }

    /* 二级菜单 */

    .nav .nav-litem>ul {

        visibility: hidden;

        position: absolute;

        top: 100%;

        transition: all .3s;

        width: 100%;

        padding: 8px 0;

        text-align: center;

        background-color: white;

        box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);

    }

    .nav .nav-litem>ul>li:hover {

        background-color: rgb(248, 248, 248);

    }

    .nav .nav-litem>ul>li>a {

        line-height: 40px;

        display: block;

        color: rgb(100, 100, 100);

    }

    /* 第一种：下拉 */

    .nav .nav-litem:nth-child(1)>ul {

        padding: 0;

        overflow: hidden;

        height: 0px;

        visibility: visible;

    }

    .nav .nav-litem:nth-child(1):hover>ul {

        height: 78px;

        padding: 8px 0;

    }

    /* 第二种：上移 */

    .nav .nav-litem:nth-child(2)>ul {

        top: 150%;

        opacity: 0;

        visibility: hidden;

    }

    .nav .nav-litem:nth-child(2):hover>ul {

        top: 100%;

        visibility: visible;

        opacity: 1;

    }

    /* 第三种：淡出 */

    .nav .nav-litem:nth-child(3)>ul {

        transition: .5s;

        opacity: 0;

        visibility: hidden;

    }

    .nav .nav-litem:nth-child(3):hover>ul {

        visibility: visible;

        opacity: 1;

    }

    /* 第四种：左移 */

    .nav .nav-litem:nth-child(4)>ul {

        left: -20%;

        opacity: 0;

        visibility: hidden;

    }

    .nav .nav-litem:nth-child(4):hover>ul {

        left: 0%;

        visibility: visible;

        opacity: 1;

    }

    /* 第五种：翻转 */

    .nav .nav-litem:nth-child(5)>ul {

        opacity: 0;

        visibility: hidden;

        transform-origin: top;

        transform: perspective(600px) rotateX(-90deg);

    }

    .nav .nav-litem:nth-child(5):hover>ul {

        visibility: visible;

        opacity: 1;

        transform: perspective(600px) rotateX(0deg);

    }

</style>

</html>

html、css实现导航栏5种常用下拉效果的更多相关文章

  1. bootstrap 导航栏鼠标悬停显示下拉菜单

    在jsp中加入一下代码: .navbar .nav > li:hover .dropdown-menu { display: block;} 全部代码如下所示: <%@ page lang ...

  2. 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  3. iOS 滑动隐藏导航栏-三种方式

    /** 1隐藏导航栏-简单- */    self.navigationController.hidesBarsOnSwipe = YES; /** 2隐藏导航栏-不随tableView滑动消失效果 ...

  4. CSS 笔记——导航栏、下拉菜单、提示工具

    8. 导航栏.下拉菜单.提示工具 (1)导航栏 垂直导航栏 <!DOCTYPE html> <html lang="en"> <head> &l ...

  5. HTML/CSS：导航栏水平和垂直

    1.垂直导航栏 导航栏 = 链接列表导航栏基本上是一个链接列表,因此使用 <ul> 和 <li> 元素是非常合适的.如需构建垂直导航栏,我们只需要定义 <a> 元素 ...

  6. 巧妙使用checkbox制作纯css动态导航栏

    前提:很多时候.我们的网页都需要一个垂直的导航栏.可以分类.有分类.自然就有展开.关闭的功能.你还在使用jquery操作dom来制作吗?那你就out了! 方案:使用checkbox 的 checked ...

  7. 第8天：CSS制作导航栏

    今天主要学习了网页导航栏的制作.注意:引入外部CSS样式时,如果使用background:url(../images/1.png),一定记得用..跳出当前文件夹,回到上级目录. 一.导航栏实现步骤: ...

  8. Css之导航栏学习

    Css: ul { list-style-type:none; margin:; padding:; overflow:hidden; background-color:blue; /*固定在顶部*/ ...

  9. 前端css小米导航栏设置及盒子定位居中问题

    1.小米最上部导航栏设置 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

随机推荐

  1. Kafka 的稳定性

    一.事务 1. 事务简介 1.1 事务场景 producer发的多条消息组成⼀个事务这些消息需要对consumer同时可⻅或者同时不可⻅ producer可能会给多个topic,多个partition ...

  2. [自制操作系统] 第02回 初识MBR

    目录 一.前景回顾 二.写一个粗略的MBR 三.运行测试 一.前景回顾 上回说到,开机的启动过程就是当时Intel和BIOS等硬件厂商所制定的规则,现在我们来回顾一下有如下三点: 1.按下开机键后,C ...

  3. 粗谈对ajax的理解

    ajax:Asynchronous JavaScript and XML异步JavaScript和XML技术Asynchronous:JavaScript:XMLHttpRequestXML:实现数据 ...

  4. SAP BOM 笔记（本文仅作笔记使用，非原创）

    SAP各种BOM汇总--含义解释(简洁易懂)-转载(原文连接:http://blog.sina.com.cn/s/blog_b9137f430102xpam.html)感谢作者分享     订单BOM ...

  5. Vue动态组件的实践与原理探究

    我司有一个工作台搭建产品,允许通过拖拽小部件的方式来搭建一个工作台页面,平台内置了一些常用小部件,另外也允许自行开发小部件上传使用,本文会从实践的角度来介绍其实现原理. ps.本文项目使用Vue CL ...

  6. 利用kubernetes资源锁完成自己的HA应用

    Backgroud 前一章中,对kubernetes的选举原理进行了深度剖析,下面就通过一个example来实现一个,利用kubernetes提供的选举机制完成的高可用应用. 对于此章需要提前对一些概 ...

  7. python做小游戏——做个马里奥分分钟解决

    一.前言 嗨喽,大家好呀!这里是小熊猫 在你的童年记忆里,是否有一个蹦跳.顶蘑菇的小人已经被遗忘? 马里奥是靠吃蘑菇成长,闻名世界的超级巨星.特征是大鼻子.头戴帽子.身穿背带工作服.还留着胡子.帽子加 ...

  8. pytest多进程/多线程执行测试用例

    前言: 实际项目中的用例数量会非常多,几百上千:如果采用单进程串行执行的话会非常耗费时间.假设每条用例耗时2s,1000条就需要2000s $\approx$ 33min:还要加上用例加载.测试前/后 ...

  9. C语言中限定符的作用

    C语言中常用的一般包括const.static.extern.register和volatile这几个.这些是C语言标准中规定的关键词,所有的编译器都必须支持这些关键词,它们的作用如下: 1.cons ...

  10. 【RocketMQ】消息的拉取

    RocketMQ消息的消费以组为单位,有两种消费模式: 广播模式:同一个消息队列可以分配给组内的每个消费者,每条消息可以被组内的消费者进行消费. 集群模式:同一个消费组下,一个消息队列同一时间只能分配 ...