vue加号悬浮点击左右弹出菜单效果代码
代码语言:html
所属分类:菜单导航
代码描述:vue加号悬浮点击左右弹出菜单效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" /> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/materialdesignicons.5.8.55.css"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1.js"></script> <style> @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&display=swap"); * { box-sizing: border-box; margin: 0; padding: 0; } body { background: #f2f2f2; width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; } .container { display: flex; justify-content: center; align-items: center; position: relative; width: 100%; } ul#menu { align-items: center; background: #fff; border-radius: 50px; box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1); display: flex; height: 60px; justify-content: center; list-style-type: none; position: relative; overflow: hidden; transition: width 150ms ease-in-out 0ms; width: 60px; } ul#menu li:nth-child(2) { margin-right: 30px; } ul#menu li:nth-child(3) { margin-left: 30px; } ul#menu li a { color: #059cfa; display: flex; align-items: center; height: 60px; justify-content: center; font-size: 28px; margin-top: -11px; opacity: 0; transition: margin 200ms ease 0ms, opacity 100ms ease 0ms; width: 60px; } ul#menu li a::after { background: #059cfa; bottom: -5px; content: ""; height: 5px; position: absolute; transition: width 200ms ease 0ms, bottom 200ms ease 0ms; width: 0; } ul#menu li a:hover::after { bottom: 0; width: 50px; } ul#menu li a.active { color: #fff; background: #059cfa; } ul#menu.active li a { opacity: 1; } ul#menu li a span.label { border-radius: 50px; color: #059cfa; content: ""; display: block; font-family: "Poppins", sans-serif; font-size: 14px; font-weight: 500; padding: 3px 10px; pointer-events: none; position: absolute; top: 31px; } ul#menu li a.left-menu-item { margin-right: -15px; } ul#menu.active li a.left-menu-item { margin-right: 0; } ul#menu li a.right-menu-item { margin-left: -15px; } ul#menu.active li a.right-menu-item { margin-left: 0; } ul#menu li a span { z-index: 1; } ul#menu.active { width: 348px; } #menu-icon { align-items: center; background: #fff; border: none; border-radius: 50%; box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1); cursor: pointer; color: rgba(255, 255, 255, 1); display: flex; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0