js+css布局实现右侧抽屉式弹出文字菜单层效果代码-html代码-BFW代码库

js+css布局实现右侧抽屉式弹出文字菜单层效果代码

代码语言：html

代码描述：js+css布局实现右侧抽屉式弹出文字菜单层效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  
  
  
  
<style>
@import url(https://fonts.bunny.net/css?family=jura:300,500) layer(demo);

@layer base, demo;
@layer demo {
	:root {
		--_nav-f-family: "Jura", sans-serif;
		--_nav-btn-transition-duration: 150ms;
		--_nav-btn-clr: light-dark(#222, white);
		--_nav-btn-clr-hover: rgb(254, 154, 0);
		--_nav-btn-clr-expanded: light-dark(var(--txt-light), var(--txt-dark));

		--_nav-bg-open: rgb(137, 75, 0);
		--_nav-bg-open_half: rgb(254, 154, 0);

		--_nav-panel-border-radius: 30px;
		--_nav-panel-transition-duration: 1000ms;
		--_nav-panel-transition-timing-function: cubic-bezier(0.86, 0, 0.672, 1.003);

		--_nav-link-clr: light-dark(var(--txt-light), var(--txt-dark));
		--_nav-link-clr-hover: rgb(254, 154, 0);
		--_nav-link-bg-clr-hover: rgb(137, 75, 0);
	}

	body {
		& > *,
		&::after {
			transition: filter var(--_nav-panel-transition-duration) ease-in-out;
		}
	}
	body:has(nav > ul[aria-hidden="false"]) > *:not(nav),
	body:has(nav > ul[aria-hidden="false"])::after {
		filter: blur(2px) grayscale(1) opacity(0.5);
		z-index: -1;
	}

	nav {
		container: nav inline-size;
		position: absolute;
		top: 0;
		right: 0;
		padding: 1rem;
		&::before,
		&::after {
			content: "";
			position: absolute;
			top: 0;
			right: 0;
			transition: width 600ms var(--_nav-panel-transition-timing-function);
			border-radius: var(--_nav-panel-border-radius) 0 0
				var(--_nav-panel-border-radius);
			height: 100vh;
			z-index: -1;.........完整代码请登录后点击上方下载按钮下载查看