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

Question

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

0

Я пытаюсь создать простой Drop Down box, как в Twitter:

https://about.twitter.com/products (Нажмите на элемент языка).

Для этого я использую следующий HTML:

<a href="#language">English</a>
<div class="popup" id="language">
  <ul>
    <li>Portuguese</li>
    <li>English</li>
    <li>French</li>
  </ul>
</div>

ПРИМЕР: http://codepen.io/mdmoura/pen/upIjv.

Я хотел бы:

1 - выпадающие выходы для выравнивания их триггеров ссылок;

2 - Возможность выравнивания по левому краю или правого выравнивания выпадающих списков до их триггеров.

Как я могу это сделать?

Благодарю вас, Мигель

Miguel Moura 04 окт. 2013, в 14:35

Источник

0

Вам, вероятно, придется реструктурировать HTML ... вы довольны этим?
Paulie_D 04 окт. 2013, в 12:05
0

@Paulie_D, не задавай свой вопрос здесь. Я что-то пропустил? счастливый?
Sergio 14 окт. 2013, в 17:56
0

Добавлен новый ответ: jsfiddle.net/vwkRN/1
Sergio 15 окт. 2013, в 18:43

Показать ещё 1 комментарий

Теги:

jquery

css

3 ответа

Ещё вопросы

Вам, вероятно, придется реструктурировать HTML ... вы довольны этим?
@Paulie_D, не задавай свой вопрос здесь. Я что-то пропустил? счастливый?
Добавлен новый ответ: jsfiddle.net/vwkRN/1

Sergio · Answer 1 · 2013-10-14T17-01-00.000Z

Попробуй это:

$('a').click(function (event) {
    $('.popup').hide();
    var div = $($(this).attr('href'));
    var position = $(this).position();

    $(div).toggle();
    $(div).css({
        'left': position.left,
        'top': position.top + 20
    })
    return false;
});

Демо здесь

Paulie_D · Answer 2 · 2013-10-04T10-59-00.000Z

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

  <a href="#language">English
  <div class="popup" id="language">
    <ul>
      <li>Portuguese</li>
      <li>English</li>
      <li>French</li>
    </ul>
  </div>
  </a>

затем расположите метки a

.wrap a {
  position:relative;
}

Затем поместите всплывающие окна divs

.popup {  
  border: 1px solid red;
  display: inline;
  display: none;
  background-color: #D0D0D0;
  color: #404040;
  position: absolute;
  padding: 0; 
  margin: 0;
  top :100%;
}

Пример Codepen

Поли, это не сработало. Нажмите на учетную запись. Раскрывающийся список не отображается под ним ... Я что-то упустил?
Это работает в Chrome для меня в Codepen. Вы реорганизовали свой HTML и обновили CSS, как я указал?

Pat Dobson · Answer 3 · 2013-10-04T09-36-00.000Z

Примените класс 'relative' к вашим триггерам (.popup {position: relative;};) и примените класс абсолютных к выпадающим спискам (.popup ul {position: absolute;}). Затем вы можете перемещать выпадающие списки в пределах триггеров, используя left :, right ;, и т.д.

Не могли бы вы привести пример? Я попробовал что-то похожее на это и не смог заставить его работать. Благодарю вас.
Paulie_D любезно предоставил пример. Конечно, я могу написать для вас код, вам может не понравиться мой почасовой тариф;)