Как сделать простую и адаптивную панель навигации (меню для сайта) | How To Make A Responsive Navbar Using HTML CSS And JavaScript

Всем Привет! Сегодня Вы узнаете, как создать простую и  адаптивную панель навигации (меню для сайта) используя HTML, CSS и JavaScript. Надеюсь, это видео будет для вас полезным. Если у вас возникнут какие-либо трудности при создании этого кода, вы можете скопировать код ниже или скачать готовый файл, нажав кнопку «СКАЧАТЬ».

Также если это видео оказалось для вас полезным, оставьте комментарий со своими мыслями или вопросами. Ваши отзывы помогают нам создавать более ценный контент. 

СКАЧАТЬ

ДЕМО

Как сделать простую и адаптивную панель навигации (меню для сайта)

HTML КОД:

	<nav class="navbar">
		<div class="logo">
			<a href="#">Логотип</a>
		</div>
		<ul class="nav-links">
			<li><a href="#" class="active">Главная</a></li>
			<li><a href="#">Меню</a></li>
			<li><a href="#">О Нас</a></li>
			<li><a href="#">Контакты</a></li>
		</ul>
		<a href="#" class="order-button">Заказать</a>
		<div class="mobile-menu">
			<span></span>
			<span></span>
			<span></span>
		</div>
	</nav>

CSS КОД:

.navbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #333;
	padding: 15px 50px;
}
.logo a {
	text-decoration: none;
	font-size: 30px;
	font-weight: bold;
	color: #fff;
}
.nav-links {
	display: flex;
	list-style: none;
}
.nav-links li {
	margin-right: 15px;
}
.nav-links li:last-child {
	margin-right: 0px;
}
.nav-links li a {
	color: #fff;
	font-size: 19px;
	text-decoration: none;
	font-weight: bold;
	padding: 0px 5px;
	transition: .3s ease;
}
.nav-links li a:hover {
	color: #ffc107;
}
.nav-links li .active {
	color: #ffc107;
}
.order-button {
	padding: 10px 20px;
	background-color: #ffc107;
	color: #333;
	text-decoration: none;
	border-radius: 5px;
	font-weight: bold;
	transition: .3s ease;
}
.order-button:hover {
	background-color: #ff8c00;
	color: #333;
}
.mobile-menu {
	display: none;
	cursor: pointer;
}
.mobile-menu span {
	display: flex;
	width: 25px;
	height: 3px;
	background-color: #fff;
	margin-bottom: 5px;
}

/* @ MEDIA */

@media screen and (max-width:768px) {
	.navbar {
		padding: 15px 30px;
	}
	.nav-links {
		display: none;
		flex-direction: column;
		position: absolute;
		top: 60px;
		left: 0;
		width: 100%;
		background-color: #444;
		padding: 20px 25px;
		margin-top: 8px;
	}
	.nav-links li {
		padding: 15px 0px;
	}
	.mobile-menu {
		display: block;
	}
	.nav-active {
		display: block;
	}
}

JAVASCRIPT КОД:

const mobileMenu = document.querySelector('.mobile-menu');
const navLinks = document.querySelector('.nav-links');

mobileMenu.addEventListener('click', () => {
    navLinks.classList.toggle('nav-active');
});