div+css实现悬浮伸缩导航菜单栏效果代码
代码语言:html
所属分类:菜单导航
代码描述:div+css实现悬浮伸缩导航菜单栏效果代码,点击一下菜单栏就伸开了,再点击即可关闭。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet" /> <style> .NavBar { position: fixed; bottom: 0; left: 50%; transform: translatex(-50%); width: min(100vw, 400px); } .NavBar::before { content: ""; position: absolute; top: 50%; left: 50%; border: 2px solid #2efb55; width: 20%; height: 100%; transform: translate(-50%, -50%); border-radius: 50% 50% 0 0; transition: 0.5s; } .NavBar:focus-within:not(:has(.NavBar-close:focus))::before { width: 100%; background: #2efb55; border-radius: 0; } .NavBar:focus-within:not(:has(.NavBar-close:focus)) .NavBar-item { transform: translatey(0); } .NavBar-buttons { position: absolute; z-index: 10; top: 50%; left: 50%; background: rgba(0,0,0,0); width: 20%; aspect-ratio: 1/1; border: none; transform: translate(-50%, -50%); color: #2efb55; cursor: pointer; } .NavBar-buttons:hover { text-shadow: 0 0 5px #2efb55; } .NavBar-menu, .NavBar-close { position: absolute; top: 50%; left: 50%; background: rgba(0,0,0,0); border: none; color: #2efb55; cursor: pointer; transform: translate(-50%, -50%) scale(1); font-size: 2rem; transition: 0.5s; } .NavBar-buttons .NavBar-close { transform: translate(-50%, -50%) scale(0); } .NavBar-buttons:has(.NavBar-menu:focus) .NavBar-close { transform: translate(-50%, -50%) scale(1); color:.........完整代码请登录后点击上方下载按钮下载查看
网友评论0