scss 导航菜单悬停效果

Posted 2021-05-17

.main-navigation {
	clear: both;
	display: block;
	float: left;
	width: calc(100% - 260px);

	#primary-menu {
		height: 75px;
		line-height: 75px;
		// display: flex;
		margin: 0;
		padding: 0;
		// align-items: stretch;
		// justify-content: space-between;

		li {
			display: inline-block;
			// flex: 0 1 auto;
			// -webkit-flex: 0 1 auto;
			list-style: none;
			margin-right: 30px;

			a {
				color: $color_black;
				font-size: 16px;
				font-weight: 700;
				position: relative;
				text-decoration: none;

				&:before {
					content: '';
					position: absolute;
					left: 0;
					display: inline-block;
					height: 1em;
					width: 100%;
					border-bottom: 3px solid transparent;
					bottom: -3px;
					visibility: hidden;
					-webkit-transform: scaleX(0);
					transform: scaleX(0);
					-webkit-transition: all 0.3s ease-in-out 0s;
					transition: all 0.3s ease-in-out 0s; 
				}
				&:first-child a {
					border-left: 1px solid transparent; 
				}

				&:last-child a {
					border-right: 1px solid transparent; 

				}
			}
			&.current_page_item > a,
			&.current-menu-item > a,
			&.current_page_ancestor > a {
				color: $color_grey;
			}

			&:last-child {
				margin: 0;
			}

			&.homepagelink {
				display: none;
			}

			&:hover, 
			&:focus {
				a {
					color: $color_green;
					&:before {
						border-bottom: 3px solid $color_green;
						visibility: visible;
						-webkit-transform: scaleX(1);
						transform: scaleX(1);
					}
				}
			}
		}
	}
}