jquery实现点击下滑动导航按钮效果代码
代码语言:html
所属分类:菜单导航
代码描述:jquery实现点击下滑动导航按钮效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html> <head> <style> @import url("https://fonts.googleapis.com/css?family=DM+Sans:500,700&display=swap"); * { box-sizing: border-box; } body { text-align: center; display: flex; height: 100vh; width: 100%; justify-content: center; align-items: center; padding: 0 20px; background-color: #1e1f26; overflow: hidden } .nav { display: inline-flex; position: relative; overflow: hidden; max-width: 100%; background-color: #fff; padding: 0 20px; border-radius: 40px; box-shadow: 0 10px 40px rgb(12 12 12 / 80%); } .nav-item { color: #83818c; padding: 20px; text-decoration: none; transition: 0.3s; margin: 0 6px; z-index: 1; font-family: "DM Sans", sans-serif; font-weight: 500; position: relative; } .nav-item:before { content: ""; position: absolute; bottom: -6px; left: 0; width: 100%; height: 5px; background-color: #dfe2ea; border-radius: 8px 8px 0 0; opacity: 0; transition: 0.3s; } .nav-item:not(.is-active):hover:before { opacity: 1; bottom: 0; } .nav-item:not(.is-active):hover { color: #333; } .nav-indicator { position: absolute; left: 0; bottom: 0; height: 4px; transition: 0.4s; height: 5px; z-index: 1; border-radius: 8px 8px 0 0; } @media (max-width: 580px) { .nav { overflow: auto; } } .........完整代码请登录后点击上方下载按钮下载查看
网友评论0