html css javascript Навигационное меню nav menu code - bard project
Навигационное меню
*{
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
}
body
{
font-family: Arial, Helvetica, sans-serif;
background: linear-gradient(5deg,red,gold,pink) no-repeat center;
background-size: cover;
height: 100%;
}
nav{
width: 100%;
height: 50px;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
background: #5e4f03;
z-index: 5;}
nav .logo{
display: flex;
align-items: center;
justify-content: center;}
nav .logo strong {
width: 300px;
height: 100%;
margin-right: 10px;
display: flex;
align-items: center;}
nav .logo strong a{
width:100%;
height: 100%;
display: flex;
align-items: center;
color: white;}
nav .logo strong a img
{width: 50px;}
nav .logo span{
color: gold;
font-size: 18px;
font-weight: bold;}
nav .nav-list
{display: flex;}
nav .nav-list li{
margin: 0 15px;}
nav .nav-list li a {
color: wheat;
font-size: 18px;
padding: 5px 10px;
border-radius: 5px;}
nav .nav-list li a:hover {
background: #555;
color: white;}
nav .nav-list li a:active {
background: #a76161;
color: white;}
.menu-toggle{
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
cursor: pointer;
padding: 0 25px;}
.menu-toggle span{
width: 30px;
height: 4px;
border-radius: 2px;
background: red;
display: block;
margin-left: -45px;}
header{
width: 100%;
height: 100%;
padding: 50px 30px;
.list{
text-align: center;
padding: 10px;
font-size: 20px;
margin-top: 25px;
border-radius: 24.6px;
.list p {
font-size: 15px;
backdrop-filter: blur(50px);
margin: 5px;
background:rgb(128, 128, 128 , 0.5) ;
border-radius: 20px;
padding: 11px;}
#list1{background: sandybrown;}
#list2{background: greenyellow;}
#list3{background: slateblue;}
#list4{background: aqua;}
@media (max-width:768px){
nav .nav-list
{ width: 100%;
display: none;
position: absolute;
top: 50px;
left: 0;
background: #333;
text-align: center;
padding: 10px 0;}
nav .nav-list li
{width: 100%;
margin: 10px 0;
padding: 10px 0;
border-bottom: 2.5px solid red;}
nav .nav-list li a
{ font-size: 18px;
padding: 10px ;
width: 100%;}
.menu-toggle{display: flex;}
nav .nav-list.show
{display: block;}
nav .nav-list li a:hover {
background: #555;
color: white;
width: 100%;}
nav .nav-list li a:active {
background: #a76161;
color: white;
width: 100%;}
}
const menuToggle = document.getElementById('menu-toggle');
const navList = document.querySelector('.nav-list');
menuToggle.addEventListener('click', () fanction{
navList.classList.toggle('show');
});