div+css实现下拉翻转多级菜单导航条效果代码
代码语言:html
所属分类:菜单导航
代码描述:div+css实现下拉翻转多级菜单导航条效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { margin: 0; font-family: Helvetica; font-size: 11px; text-transform: uppercase; } ul { list-style-type: none; padding: 0; } a { text-decoration: none; color: inherit; } nav { margin-top: 20px; width: 100%; display: flex; justify-content: center; } nav ul.navigation-menu { display: flex; background-color: #264653; color: white; height: 50px; width: 700px; border-radius: 5px; box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.1); } nav ul.navigation-menu li { flex: 1; } nav ul.navigation-menu li a { cursor: pointer; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } nav ul.navigation-menu li ul { display: flex; flex-direction: column; width: auto; border-radius: 0px; background-color: transparent; flex-direction: column; perspective: 500px; box-shadow: none; } nav ul.navigation-menu li ul li { height: 50px; text-align: center; line-height: 50px; cursor: pointer; display: none; opacity: 0; } nav ul.navigation-menu li ul li ul { position: absolute; top: 0px; left: 100%; width: 200px; } nav ul.navigation-menu li ul li ul li { display: none; } nav ul.navigation-menu li ul li { background-color: #2a9d8f; } nav ul.navigation-menu li ul li ul li { background-color: #144d46; } nav ul.navigation-menu li { transition: all 0.3s ease-in-out; } nav ul.navigation-menu li:hover { background-color: #1e3742; } nav ul.navigation-menu li:hover ul li { display: block; transition: all 0.3s ease-in-out; } nav ul.navigation-menu li:hover ul li:hover { background-color: #1f756a; } nav ul.navigation-menu li:hover ul li ul li { display: none; } nav ul.navigation-menu li:hover ul li:hover ul li { display: block; } nav ul.navigation-menu li:hover ul li:nth-child(1) { animation-name: menu-1; animation-timing-function: ease-in-out; animation-duration: 300ms; animation-delay: 100ms; animation-fill-mode: forwards; } nav ul.navigation-menu li:hover ul li:nth-child(2) { animation-name: menu-1; animation-timing-function: ease-in-out; animation-duration: 300ms; animation-delay: 200ms; animation-fill-mode: forwards; } nav ul.navigation-menu li:hover ul li:nth-child(3) { animation-name: menu-1; animation-timing-function: ease-in-out; animation-duration: 300ms; animation-delay: 300ms; animation-fill-mode: forwards; } nav ul.navigation-menu li:hover ul li:nth-child(4) { animation-name: menu-1; animation-timing-function: ease-in-out; animation-duration: 300ms; animation-delay: 400ms; animation-fill-mode: forwards; } nav ul.navigation-menu li:hover ul li:nth-child(5) { animation-name: menu-1; animation-timing-function: ease-in-out; animation-duration: 300ms; animation-delay: 500ms; animation-fill-mode: forwards; } nav ul.navigation-menu li:hover ul li:nth-child(6) { animation-name: menu-1; animation-timing-function: ease-in-out; animation-duration: 300ms; animation-delay: 600ms; animation-fill-mode: forwards; } nav ul.navigation-menu li:hover ul li:nth-child(7) { animation-name: menu-1; animation-timing-function: ease-in-out; animation-duration: 300ms; animation-delay: 700ms; animation-fill-mode: forwards; } nav ul.navigation-menu li:hover ul li:nth-child(8) { animation-name: menu-1; animation-timing-function: ease-in-out; animation-duration: 300ms; animation-delay: 800ms; animation-fill-mode: forwards; } nav ul.navigation-menu li:hover ul li:nth-child(9) { animation-name: menu-1; animation-timing-function: ease-in-out; animation-duration: 300ms; animation-delay: 900ms; animation-fill-mode: forwards; } nav ul.navigation-menu li:hover ul li:nth-child(10) { ani.........完整代码请登录后点击上方下载按钮下载查看
网友评论0