主页 / 问题 / 1115915
Accepted
Ram Ce
Asked:2020-04-26 16:01:03 +0800 CST2020-04-26 16:01:03 +0800 CST

添加填充和背景

  • 772

var nav = $('.header__nav-link');
var toggler = $('.header__nav-toggle');

toggler.on('click', function() {
	nav.toggleClass('active');
})
header {
	width: 100%;
	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.600) 0%, rgba(0, 0, 0, 0.600) 50%, rgba(0, 0, 0, 0.600) 100%), url(../img/background.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	min-height: 100vh;
	padding: 15px;
	box-sizing: border-box;
}

.header__top {
	display: flex;
	justify-content: space-between;
}

.header__logo {
	color: var(--main);
	font-family: 'Comic Neue', sans-serif;
	font-weight: 700;
	font-size: 45px;
}
nav {
	margin-top: 17px;
}

nav a {
	font-size: 19px;
}

nav a:not(:first-child) {
	margin-left: 4px;
}

.header__nav-toggle {
	display: none;
	font-size: 22px;
}

@media screen and (max-width: 600px) {

	.header__nav-link {
		display: none;
	}

	.header__nav-toggle {
		display: block;
		float: right;
	}

	.header__nav-link.active {
		display: block;
		margin-top: 13px;
	}
}
	<header>
		<div class="header__top">
		<span class="header__logo">Tesmi</span>
		<nav class="header__nav">
			<a href="#" class="header__nav-toggle">&#9776;</a>
			<a href="#" class="header__nav-link">Главная</a>
			<a href="#" class="header__nav-link">Услуги</a>
			<a href="#" class="header__nav-link">Навыки</a>
			<a href="#" class="header__nav-link">Команда</a>
			<a href="#" class="header__nav-link">Контакты</a>
		</nav>
	</div>
	</header>

我需要在移动版的菜单项之间在顶部和底部做一些边距，但是我做不到，我想在移动菜单项展开时设置一个半透明的背景。请帮我实现这一点

javascript

1 个回答

  1. Best Answer

    不完全清楚需要为哪个元素创建背景，我为整个菜单做了。

    var nav = jQuery('.header__nav-link');
var toggler = jQuery('.header__nav-toggle');

toggler.on('click', function() {
	nav.toggleClass('active');
})
    header {
	width: 100%;
	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.600) 0%, rgba(0, 0, 0, 0.600) 50%, rgba(0, 0, 0, 0.600) 100%), url(../img/background.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	min-height: 100vh;
	padding: 15px;
	box-sizing: border-box;
}

.header__top {
	display: flex;
	justify-content: space-between;
}

.header__logo {
	color: var(--main);
	font-family: 'Comic Neue', sans-serif;
	font-weight: 700;
	font-size: 45px;
}
nav {
	margin-top: 17px;
}

nav a {
	font-size: 19px;
}

nav a:not(:first-child) {
	margin-left: 4px;
}

.header__nav-toggle {
	display: none;
	font-size: 22px;
}

@media screen and (max-width: 600px) {

	.header__nav-link {
		display: none;
	}

	.header__nav-toggle {
		display: block;
		float: right;
    padding: 0 5px;
	}

	.header__nav-link.active {
		display: block;
		margin-top: 0;
    padding: 20px 10px 10px 10px;
	}
  .header__nav-link.active{
    background: #00000030;
  }
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
		<div class="header__top">
		<span class="header__logo">Tesmi</span>
		<nav class="header__nav">
			<a href="#" class="header__nav-toggle">&#9776;</a>
			<a href="#" class="header__nav-link">Главная</a>
			<a href="#" class="header__nav-link">Услуги</a>
			<a href="#" class="header__nav-link">Навыки</a>
			<a href="#" class="header__nav-link">Команда</a>
			<a href="#" class="header__nav-link">Контакты</a>
		</nav>
	</div>
	</header>

    • 2

相关问题