hexo-theme-async/source/css/_components/menu.less

🎈 A simple, lightweight Hexo theme

.trm-menu {
	margin-right: 10px;

	nav {
		ul {
			display: flex;
			margin: 0;
			padding: 0;

			li {
				height: 80px;
				position: relative;
				list-style-type: none;
				display: flex;
				justify-content: center;
				align-items: center;

				&:after {
					content: "";
					position: absolute;
					bottom: 0;
					border-radius: 10px;
					height: 4px;
					width: 0;
					background-color: var(--primary, #afb42b);
					.transition-mixin();
				}

				a {
					white-space: nowrap;
					height: 100%;
					width: 100%;
					padding: 0 20px;
					line-height: 80px;
					color: var(--theme-color, #00283a);
					text-transform: uppercase;
					font-size: 12px;
					letter-spacing: 2px;
					font-weight: 700;
					.transition-mixin();

					&:hover {
						color: var(--primary, #afb42b);
					}
				}

				ul {
					padding: 10px;
					pointer-events: none;
					background-color: var(--theme-bg-color, #fcfcfe);
					opacity: 0;
					transform: translateY(20px) translateX(-50%);
					height: auto;
					top: 80px;
					left: 50%;
					border-radius: 0 0 10px 10px;
					box-shadow: var(--box-shadow);
					position: absolute;
					z-index: 9;
					display: flex;
					flex-direction: column;
					.transition-mixin();

					li {
						height: 50px;
						margin: 0;
						justify-content: flex-start;

						a {
							line-height: 50px;
						}

						&:after,
						&:before {
							display: none;
						}
					}
				}

				&:hover {
					ul {
						pointer-events: all;
						opacity: 1;
						transform: translateY(0) translateX(-50%);
					}
				}

				&.current-item:after,
				&.current-menu-item:after {
					width: 100%;
				}
			}
		}
	}
}

.trm-menu-btn {
	transform: scale(1.3);
	margin-top: 2px;
	padding: 8px 7px;
	width: 30px;
	height: 30px;
	cursor: pointer;
	display: none;
	justify-content: center;
	text-align: center;

	span {
		position: relative;
		margin: 5px 0 0;

		&:before {
			position: absolute;
			top: -5px;
		}

		&:after {
			position: absolute;
			top: 5px;
		}
	}

	&.trm-active {
		span {
			transform: rotate(45deg);

			&:before {
				transform: translate(0px, 5px) rotate(-90deg);
			}

			&:after {
				transform: translate(0px, -5px) rotate(-90deg);
			}
		}
	}

	span,
	span:after,
	span:before {
		content: "";
		display: block;
		width: 15px;
		height: 0.15em;
		border-radius: 1px;
		background: var(--theme-color, #00283a);
		backface-visibility: hidden;
		.transition-mixin();
	}
}

@media (max-width: 1200px) {
	.trm-menu {
		text-align: center;
		margin: 0;
		width: 100%;
	}

	.trm-menu nav {
		width: 100%;
	}

	.trm-menu nav ul {
		margin: 20px 0;
		flex-direction: column;
	}

	.trm-menu nav ul li {
		width: 100%;
		height: auto;
		display: block;
	}

	.trm-menu nav ul li:after {
		display: none;
	}

	.trm-menu nav ul li a {
		height: 50px;
		line-height: 50px;
	}

	/* .trm-menu nav ul li.menu-item-has-children a {
        pointer-events: none
    }

    .trm-menu nav ul li.menu-item-has-children ul li a {
        pointer-events: all
    } */

	.trm-menu nav ul li.current-menu-item a {
		color: var(--primary, #afb42b);
	}

	.trm-menu nav ul li.current-menu-item ul li a {
		color: var(--theme-color, #00283a);
	}

	.trm-menu nav ul li ul {
		border-radius: 0;
		margin: 0;
		background-color: var(--theme-bg2-color, #f4f5f7);
		top: 0;
		left: 0;
		width: 100%;
		padding: 0;
		position: relative;
		overflow: hidden;
		opacity: 1;
		transform: none;
		margin: 0;
		pointer-events: all;
		max-height: 0;
		box-shadow: var(--box-shadow);
		transform: translateY(20px);
	}

	.trm-menu nav ul li:hover ul {
		max-height: 300px;
		transform: translateY(0);
	}

	.trm-menu-btn {
		display: flex;
	}
}