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: 1024px) {
	.mob-nav-toggler {
		display: none;
	}
}

.logo {
	font-weight: bold;
	font-size: 0.95rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-right: auto;
	display: block;
}
@media (min-width: 1024px) {
	.logo {
		margin-right: 0;
	}
}

.nav-menu {
	font-weight: 500;
}

:is(.nav-menu, .nav-submenu) a {
	padding: 0.6rem 1rem;
	display: block;
}
@media (min-width: 1024px) {
	:is(.nav-menu, .nav-submenu) a {
		padding: 0.5rem 1rem;
	}
}
.nav-submenu {
	background: white;
	color: black;
	border-radius: 0.3rem;
	font-weight: 400;
	font-size: calc(15 / 16 * 1rem);
}
.nav-submenu:not(.ui-shown) {
	display: none;
}
.nav ul > li > a:not(:only-child)::after {
	content: "";
	background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJMYXllcl8yIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMi44OCAyMi43NiI+PHBhdGggZD0ibTEuNSwyMi43NmMtLjM4LDAtLjc3LS4xNS0xLjA2LS40NC0.........完整代码请登录后点击上方下载按钮下载查看