0

При нажатии на navbar, меню оказывается на заднем плане. Как сделать input на заднем плане?

nav {
  background-color: #fff;
  height: 80px;
}

nav .bar {
  font-size: 30px;
  color: var(--gol);
  float: left;
  padding: 25px 0 0 60px;
  transition: 600ms;
}

.bar:hover {
  color: rgba(232, 241, 252);
}

nav ul {
  position: absolute;
  display: block;
  top: 0;
  left: -60%;
  width: 40%;
  height: 15px;
  padding: 25px 0 0 80px;
  transition: left 3s;
}

nav:hover ul {
  left: 0;
}

nav ul li {
  display: inline-block;
  padding: 0 15px;
}

nav li a {
  font: 20px 'Palette Mosaic';
  color: var(--gol);
}

nav li a:hover {
  transition: 1s linear;
  color: var(--roz);
}

#text {
  display: flex;
  justify-content: center;
}

#text input {
  position: absolute;
  top: 20px;
  border-radius: 20px;
  outline: none;
  width: 400px;
  text-align: right;
  border: 2px outset var(--gol);
  padding: 5px 20px;
  margin: 5px 0 0 85px;
  font: 15px 'Playfair Display';
  color: var(--gol);
  letter-spacing: 2px;
}

#text ::placeholder {
  color: var(--gol);
}

@media only screen and (max-width: 600px) {
  nav .bar {
    float: top;
    padding-left: 40px;
  }
  nav ul {
    position: absolute;
    top: -50%;
    left: 0;
    width: 100%;
    padding-left: 60px;
    transition: top 2s;
  }
  nav:hover ul {
    top: 0;
  }
  nav li a {
    font-size: 17px;
  }
  #text input {
    width: 250px;
  }
}
<nav>
  <a class="bar"><i class="fas fa-ellipsis-v"></i></a>
  <ul>
    <li><a href="">Home</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Event</a></li>
    <li><a href="">Gallery</a></li>
  </ul>
</nav>
<label id="text">
            <input type="text" placeholder="Search" />  
        </label>

1 ответ 1

1

Вам нужно добавить событие javascript на скрытие элемента.

document.getElementById('nav').addEventListener('click', function (e) {
  e.preventDefault(); // если не нужно блокировать переход по ссылки, то удалить данную строчку
  document.getElementById('text').style.display = 'none';
});
 nav {
    background-color: #fff;
    height: 80px;
}
nav .bar {
    font-size: 30px;
    color: var(--gol);
    float: left;
    padding: 25px 0 0 60px;
    transition: 600ms;
}
.bar:hover {
    color: rgba(232, 241, 252);
}
nav ul {
    position: absolute;
    display: block;
    top: 0;
    left: -60%;
    width: 40%;
    height: 15px;
    padding: 25px 0 0 80px;
    transition: left 3s;
}
nav:hover ul {
    left: 0;
}
nav ul li {
    display: inline-block;
    padding: 0 15px;
}
nav li a {
    font: 20px 'Palette Mosaic';
    color: var(--gol);
}
nav li a:hover {
    transition: 1s linear;
    color: var(--roz);
}
#text {
    display: flex;
    justify-content: center;
}
#text input {
    position: absolute;
    top: 20px;
    border-radius: 20px;
    outline: none;
    width: 400px;
    text-align: right;
    border: 2px outset var(--gol);
    padding: 5px 20px;
    margin: 5px 0 0 85px;
    font: 15px 'Playfair Display';
    color: var(--gol);
    letter-spacing: 2px;
}
#text ::placeholder {
    color: var(--gol);
}


@media only screen and (max-width: 600px) {
nav .bar {
        float: top;
        
<nav id="nav">
            <a class="bar"><i class="fas fa-ellipsis-v"></i></a>
            <ul>
                <li><a href="">Home</a></li>
                <li><a href="">About</a></li>
                <li><a href="">Event</a></li>
                <li><a href="">Gallery</a></li> 
            </ul>   
</nav>
        <label id="text">
            <input type="text" placeholder="Search" />  
        </label>  

1
  • выдает ошибку в JS
    – Aysun M
    12 окт 2021 в 21:47

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.