jolty实现自适应多级下拉菜单效果代码-html代码-BFW代码库

jolty实现自适应多级下拉菜单效果代码

代码语言：html

代码描述：jolty实现自适应多级下拉菜单效果代码，菜单兼容手机端和pc端，自适应显示多级菜单。

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

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

<head>
  <meta charset="UTF-8">


  <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.css">
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");

[hidden] {
	display: none !important;
}
body {
	font-family: Inter, sans-serif;
}

a {
	text-decoration: none;
	color: inherit;
}

:where(dialog, [popover]) {
	margin: 0;
	padding: 0;
	position: fixed;
	inset: 0;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	background-color: transparent;
	color: inherit;
	overflow: unset;
	border-width: 0;
	&::-webkit-backdrop {
		opacity: 0;
	}
	&::backdrop {
		opacity: 0;
	}
}

.header {
	margin: 0 auto;
	padding: 0 1.5rem;
	background-color: rgb(35 39 50);
	color: white;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
@media (min-width: 1024px) {
	.header {
		padding: 1rem 2rem;
	}
}

.github {
	padding: 0.5rem;
	margin-right: -0.5rem;
}
.github svg {
	width: 2rem;
	fill: white;
}

.mob-nav-toggler {
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
	border: none;
	background: transparent;
	padding: 1rem;
	margin-right: -1rem;
	cursor: pointer;
}
.mob-nav-toggler svg {
	width: 1.25rem;
	fill: white;
	stroke: white;
}
@media (min-width: 1024.........完整代码请登录后点击上方下载按钮下载查看