Блог

Главная - Вопросы по программированию - Как мне сделать так, чтобы элементы на моей панели навигации накладывались друг на друга, когда экран становится меньше?

Как мне сделать так, чтобы элементы на моей панели навигации накладывались друг на друга, когда экран становится меньше?

#html #css

#HTML #css

Вопрос:

Как мне сделать так, чтобы элементы в моем стеке навигационной панели накладывались друг на друга, когда, скажем, кто-то использует телефон или изменяет размер экрана? Для меня это уже немного работает, в том смысле, что только последний элемент в моей панели навигации опускается ниже остальных, когда он становится меньше, но он единственный, который опускается, остальные элементы просто остаются на месте по какой-то причине. Вот мой код:

 body {

        margin: 0;
        padding: 0;

    }

    nav {

        width: 100%;
        height: auto;
        position: relative;
        margin: .4em auto;
        background-color: white;
        overflow: hidden;

    }

    nav ul {

        padding: 0%;
        position: relative;
        margin: .5em auto;
        list-style: none;


    }

    nav ul li {

        width: 15%;
        margin: 0 .5%;
        margin-left: 3%;
        display: inline;
        float: left;
        text-align: center;

    }

    .logo img {

        position: relative;
        float: left;
    }


    nav a {

        width: 100%;
        text-decoration: none;
        color: black;
        text-align: center;
        padding: 5%;
        font-size: 3em;

    }

    #navbar ul li a:hover {

    margin-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    background-color: rgb(173, 12, 7);
    color: white;


} 
 <nav>

<div class="logo"><a href="#"><img src="CSS/logo.jpg" id="logo" width="250" height="150"></a></div>

<div style="width: 1100px; margin: 0 auto;">

<div id="navbar">

    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
    <li><a href="#">Store</a></li>
    <li><a href="faq.html">FAQ</a></li>
    </ul>

</div>

</div>

</nav>

Комментарии:

1. Вы используете bootstrap или что-нибудь еще? Или вы пишете свой собственный css? Это будет полезно знать, чтобы точно ответить на ваш вопрос.

2. @MichaelBuchok Глядя на CSS, я считаю, что OP пишет свой собственный CSS и не использует какие-либо фреймворки CSS

3. Вы пробовали использовать свойство css flex-wrap: wrap или альтернативно wrap-reverse ? Из того, что вы написали, это может помочь. По крайней мере, я использую его для складывания элементов при уменьшении размера экрана

4. может быть, вы хотите: <div style="width: 1100px; margin: 0 auto;"> быть <div style="max-width: 1100px; margin: 0 auto;"> и nav ul li {width: 15%;} быть nav ul li {min-width: 15%;} ?

5. @PrathameshKoshti Спасибо гению, просто убедился.

Ответ №1:

Прочитав ваш вопрос, я сделал вывод, что вы хотите, чтобы элементы панели навигации складывались один за другим при уменьшении ширины экрана, если это так, вы можете это сделать, но это не так, как работает панель навигации. Я бы порекомендовал вам второй способ (прокрутите этот фрагмент)

В обоих решениях используются свойства css flexbox, такие как display: flex , flex-wrap: wrap а во втором решении используется свойство flex-direction: column

Первое решение:

 body {
  margin: 0;
  padding: 0;
}

#navbar {
  display: flex;
  flex-wrap: wrap;
    width: 100vw;
}

#navbar > ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  align-items: center;
  flex: 1 1;
  padding: 0 0.5rem;

}

a {
  color: black;
  padding: 0.5rem;
}

#navbar > ul > li:hover > a{
  background: black;
  color: white;
} 
 <nav>
  <div style="width: 1100px; margin: 0 auto;">
  <div id="navbar">
    <div class="logo">
      <a href="#">
        <img src="/logo.jpg" id="logo" width="70" height="70">
      </a>
    </div>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="contact.html">Contact</a></li>
      <li><a href="#">Store</a></li>
      <li><a href="faq.html">FAQ</a></li>
    </ul>
</div>

</div>

</nav>

Но я бы порекомендовал вам этот способ, который использует медиа-запрос для правильной иллюстрации панели навигации при достижении точки останова, здесь размер шрифта сохраняется 1em, а точка останова мультимедиа добавляется как 400 пикселей для мобильных экранов

 body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

#navbar {
  display: flex;
  flex-wrap: wrap;
    width: 100vw;
}

#navbar > ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  align-items: center;
  flex: 1 1;
  padding: 0 0.5rem;

}

a {
  color: black;
  padding: 0.5rem;
}

#navbar > ul > li:hover > a{
  background: black;
  color: white;
}

@media only screen and (max-width: 400px) {
  #navbar {
    align-items: center;
  }
  .logo {
    text-align: center;
  }
  #navbar, #navbar > ul {
    flex-direction: column;
    min-height: 200px;
    justify-content: space-around;
  }
} 
 <nav>
  <div style="width: 1100px; margin: 0 auto;">
  <div id="navbar">
    <div class="logo">
      <a href="#">
        <img src="/logo.jpg" id="logo" width="70" height="70">
      </a>
    </div>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="contact.html">Contact</a></li>
      <li><a href="#">Store</a></li>
      <li><a href="faq.html">FAQ</a></li>
    </ul>
</div>

</div>

</nav>

Комментарии:

1. Хорошо, один из комментариев вверху решил мою проблему, но я думаю, что это может быть лучше использовать, так что спасибо.

2. Однако один вопрос: что делает #nabar > ul?

3. Это означает, что он применит стиль к непосредственному дочернему ul элементу элемента, имеющего идентификатор в качестве панели навигации. Взгляните на эту официальную документацию по селекторам: developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

Метки: , ,