Блог

Главная - Вопросы по программированию - Выпадающее навигационное меню отображается справа и располагается горизонтально

Выпадающее навигационное меню отображается справа и располагается горизонтально

#html #css #nav

#HTML #css #навигация

Вопрос:

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

Обновленный снимок экрана

 /* nav */

nav {
  display: flex;
  flex-wrap: wrap;
  padding: .25rem 0;
  color: #ffffff;
  font: 30px 'Roboto', sans-serif;
  margin: auto;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  overflow: hidden;
}

nav a {
  display: block;
  margin: 0 40px;
}


/* dropdown container */

.dropdown {
  float: none;
  position: relative;
  overflow: visibile;
}


/* dropdown button */

.dropdown .dropbtn {
  display: flex;
  font-size: 30px;
  border: none;
  outline: none;
  color: #ffffff;
  padding: inherit;
  background-color: inherit;
  font-family: inherit;
  margin: auto;
}


/* dropdown content (hidden by default */

.dropdown-content {
  display: none;
  position: absolute;
  margin-top: 10px;
  background-color: #ffffff;
  width: 250px;
  left: calc(50% - 125px);
}

.dropdown-content>a {
  color: black;
  text-align: left;
  border-bottom: 1px solid #009EDB;
}


/* show dropdown menu on hover */

.dropdown:hover .dropdown-content {
  display: block;
  float: left;
  margin: 0;
} 
 <nav class="justify-content-center">

  <a href="/Users/Samantha/Desktop/Website/about.html" alt="About">About</a>

  <section class="dropdown">
    <button class="dropbtn">
                        Work
                    </button>
    <section class="dropdown-content">
      <a href="/Users/Samantha/Desktop/Website/Articles/articles.html" alt="Articles" target="_blank">Articles and Presentations</a>
      <a href="/Users/Samantha/Desktop/Website/Articles/Series/New Case Flow/from-process-to-flow-series.html" alt="From Process to Flow Series" target="_blank">From Process to Flow Series</a>
    </section>
  </section>

  <a href="https://github.com/smlisk0630" alt="GitHub" target="_blank">Github</a>

  <a href="https://trailblazer.me/id/slisk" alt="Trailhead" target="_blank">Trailhead</a>


</nav>

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

1. Не могли бы вы также обновить фрагмент кода, который вы использовали для получения результата на скриншоте?

2. Извините @MerlinFejzuli, я только что это сделал. На самом деле я добился гораздо большего прогресса. Единственное, чего я не понял, так это почему выпадающий контейнер по-прежнему находится немного правее, а не прямо под элементом рабочей навигации.

3. Насколько я вижу на скриншоте, оно находится непосредственно под элементом Work nav. Якоря имеют только левое и правое поле. Вы хотите выровнять центр выпадающего содержимого с центром рабочих элементов навигации?

4. Если я переключусь .dropdown-content на position: relative; него, контейнер переместится в правильное положение, но затем элементы навигации по обе стороны от рабочего элемента перемещаются при наведении курсора на работу.

5. Да, это то, что я хочу сделать @MerlinFejzuli.

Ответ №1:

Ваш выпадающий список состоит из якорей (ссылок, <a> тегов), которые, естественно, являются встроенными элементами. Это означает, что, естественно, эти элементы расположены как часть потока страниц или строк. Чтобы они отображались вертикально, вам нужно изменить их на «блочные» элементы, которые вы используете, добавляя display: block к стилю выпадающих a элементов:

 nav a {
  margin: 0 40px;
  display: block;
}

‘Margin’ уже присутствовал в этом конкретном элементе.

Я также удалил все « !important » из вашего стиля, потому что это плохая практика и совсем не помогает. Поскольку вам не хватает фона, я изменил стиль элемента запуска, добавив в него красный текст, чтобы не было похоже, что выпадающий список вызывался случайным пробелом.

При этом я не вижу никакого поведения «в стиле крайнего правого» для выпадающего списка. Меню отображается непосредственно под элементом запуска (с отступом в 40 пикселей, что, если у вас действительно маленький экран, может показаться, что оно находится слишком далеко справа.)

 /* nav */
nav {
    display: flex;
    flex-wrap: wrap;
    padding: .25rem 0;
    color: #ffffff;
    font: 30px 'Roboto', sans-serif;
    margin: auto;
    justify-content: center;
    overflow: hidden;
}

nav a {
    margin: 0 40px;
    display: block;
}

/* dropdown container */
.dropdown {
    float: none;
    overflow: hidden;
}

/* dropdown button */
.dropdown .dropbtn {
    display: flex;
    font-size: 30px;
    border: none;
    outline: none;
    color: red;
    padding: inherit;
    background-color: inherit;
    font-family: inherit;
    margin: auto;
}

/* dropdown content (hidden by default */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: inherit;
    width: 100%;
}

/* show dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
} 
 <nav class="justify-content-center">

  <a href="/Users/Samantha/Desktop/Website/about.html" alt="About">About</a>

  <section class="dropdown">
    <button class="dropbtn">Work</button>
    <section class="dropdown-content">
      <a href="/Users/Samantha/Desktop/Website/Articles/articles.html" alt="Articles" target="_blank">Articles and Presentations</a>
      <a href="/Users/Samantha/Desktop/Website/Articles/Series/New Case Flow/from-process-to-flow-series.html" alt="From Process to Flow Series" target="_blank">From Process to Flow Series</a>
    </section>
  </section>

  <a href="https://github.com/smlisk0630" alt="GitHub" target="_blank">Github</a>

  <a href="https://trailblazer.me/id/slisk" alt="Trailhead" target="_blank">Trailhead</a>


</nav>

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

1. Спасибо за вашу помощь, @Roddy. Я смог сделать элементы стеком вертикально, добавив display: block , но они по-прежнему отображаются в правой части страницы. Я просматриваю в Google Chrome на MacBook Air. Я отредактировал свой пост, чтобы включить скриншот поведения, которое возникает при наведении курсора на рабочую привязку.

Ответ №2:

Проблема № 1 была решена с помощью ответа Rody of the Frozen Peas.

Для проблемы № 2: вы хотите выровнять центр выпадающего содержимого относительно его родительского. Для этого вы хотите сдвинуть выпадающее содержимое влево на половину его ширины, а затем немного сдвинуть его вправо на половину ширины выпадающего списка. Также элемент выпадающего списка должен быть относительно позиционирован, иначе выпадающее содержимое будет размещено в соответствии с документом. Чтобы сделать выпадающее содержимое видимым, вам нужно сделать выпадающие списки и панели навигации видимыми.

 nav {
    overflow: visible;
}

.dropdown {
    position: relative;
    overflow: visible;
}

.dropdown-content {
    position: absolute;
    width: 250px;
    left: calc(50% - 125px);
}

Причина, по которой это работает, заключается в том, что вы выравниваете центр выпадающего содержимого слева от выпадающего списка, указав left: -125px, сдвигая его влево на половину ширины выпадающего содержимого. Чтобы затем выровнять его по центру выпадающего списка, вам нужно добавить 50%, поскольку оно абсолютно позиционировано и поэтому будет использовать родительскую ширину в качестве ссылки, а 50% родительской ширины — родительский центр.

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

1. Я отредактировал свой пост с обновленным скриншотом и кодом. Выравнивание теперь правильное, но выпадающие элементы больше не видны.

2. Извините, я забыл, что панель навигации также скрывала переполнение. Я соответствующим образом обновил свой ответ. Также убедитесь, что в нем нет опечаток, поскольку для атрибута overflow выпадающего списка в вашем фрагменте кода установлено значение visibile вместо visible.

Метки: