html点击呼出式菜单设计,利用transform实现一个纯CSS弹出菜单

前言

在制作顶部菜单的时候，都会要求制作弹出的二级菜单，早先的做法是用jQuery的来控制二级菜单的显示和过渡动画，但利用CSS3中的transform属性后，这一切都变得异常简单

先上效果

制作方法

核心就是利用了transform的区域位移方法，在配合上li标签的hover伪类和动画延时，从而简单实现了子菜单的显示

• home

  cms

  crm

• live

  java

  php

• pictrue

  mm

  dd

*{

padding: 0;

margin: 0;

box-sizing: border-box;

}

body{

width: 100vw;

height: 100vh;

display: flex;

flex-direction: column;

justify-content: flex-start;

align-items: center;

}

nav{

margin: 10px;

}

nav ul {

list-style-type: none;

height: 32px;

display: flex;

}

nav ul li{

margin-right: 10px;

}

nav ul li strong{

text-transform: uppercase;

background-color: #9b59b6;

color: white;

padding: 5px 30px;

line-height: 30px;

cursor: pointer;

}

nav ul li strong+div{

display: flex;

flex-direction: column;

background-color: #3498db;

padding: 10px;

transform: translateY(-110%);

opacity: 0;

transition: .3s;

transform-origin: top;

}

nav ul li:hover div{

transform: translateY(0);

opacity: 1;

}

nav ul li strong+div a{

color: white;

text-decoration: none;

text-transform: uppercase;

padding: 5px 0;

}