实现的效果:鼠标移入按钮时按钮中的内容就会出现,分别展示不同的出现效果。
效果难点:不使用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. D3.JS结合Canvas实现直方图,散点图,等高线图,密度图

    接触到D3.JS,感觉在图表方面实现的很好,于是深入了解了一下,想在项目中使用, 可是当看到DEMO时才发现,基本上所有的DEMO都是基于SVG,虽然D3.JS声称支持CANVAS,可并没有发现一例使 ...

  2. Java获取汉字的大小写拼音码(汉字的拼音首字母)

    import java.io.UnsupportedEncodingException; /** * 获取拼音码 * * @author xmj * */ public class GetPinyin ...

  3. 关于swiper插件在vue2的使用

    最近做项目用到了vue-awesome-swiper,总结一下使用方法 第一步:安装依赖 npm install swiper vue-awesome-swiper --save or npm ins ...

  4. RPA应用场景-账套建立

    所涉人工数量5操作频率 不定时 场景流程 1.客户按照项目开设专项财务管理,每个项目需要在初期建立自己的账套: 2.运营专员通过邮件发送账套建立申请: 3.根据申请进入金蝶运维后台,依据规则完成账套建 ...

  5. JQuery select与radio的取值与赋值

    radio 取:$("input[name='NAME']:checked").val(); 赋:$("input[name='NAME'][value='指定值']&q ...

  6. 【跟着大佬学JavaScript】之节流

    前言 js的典型的场景 监听页面的scroll事件 拖拽事件 监听鼠标的 mousemove 事件 ... 这些事件会频繁触发会影响性能,如果使用节流,降低频次,保留了用户体验,又提升了执行速度,节省 ...

  7. Calendar类介绍_获取对象的方式和Calendar类的常用成员方法

    java.util.Calendar类:日历类 Calendar类是一个抽象类,里边提供了很多操作日历字段的方法(YEAR.MONTH.DAY_OF_MONTH.HOUR ) Calendar类无法直 ...

  8. 使用 spring-security-oauth2 体验 OAuth 2.0 的四种授权模式

    目录 背景 相关代码 授权码模式 第一步 访问GET /oauth/authorize 第二步 访问POST /oauth/authorize 第三步 访问POST /oauth/token 简化模式 ...

  9. 今天介绍一下自己的开源项目,一款以spring cloud alibaba为核心的微服务架构项目,为给企业与个人提供一个零开发基础的微服务架构。

    LaoCat-Spring-Cloud-Scaffold 一款以spring cloud alibab 为核心的微服务框架,主要目标为了提升自己的相关技术,也为了给企业与个人提供一个零开发基础的微服务 ...

  10. WPF 实现用户头像选择器

    制作一个用户头像选择器仿 WeGame 制作一个用户头像选择Canvas为父控件所实现,展示图片使用Image,Path当作上方的蒙版; Canvas:主要用途方便移动Image,设置ClipToBo ...