Как иметь плавающее меню в середине экрана

Question

Как иметь плавающее меню в середине экрана

0

Возможно ли это без помощи javascript?

Обычно у нас есть панели меню в верхней части страницы - мы помещаем их как ребенок body а затем абсолютно позиционируем их, например, top: 10px; right: 10px; top: 10px; right: 10px; ,

Что делать, если мы хотим достичь той же цели, но как контекстное меню дальше по странице?

Я начал скрипку, чтобы дать представление - здесь нет позиционирования, мы просто имеем по умолчанию overflow: visible.

Я не могу полностью позиционировать его, потому что я не знаю x, y из-за динамического характера предшествующего ему контента.

Единственный способ, о котором я могу думать, - пойти по традиционному маршруту верхней навигационной панели, а с помощью javascript найти контейнер x, y этого контейнера и разместить его там. Однако мне нужно будет управлять этим, если содержимое, которое предшествует ему, изменится, тогда его положение также должно измениться.

Кто-нибудь знает о методе jQuery для "stick-to". Или даже лучше добиться этого с помощью чистого css?

благодаря

здесь моя грубая скрипка - нажмите "один" http://jsfiddle.net/hHR23/1/

jenson-button-event 16 янв. 2014, в 18:39

Источник

Теги:

javascript

jquery

html

css

css-position

2 ответа

0

Другой подход - скрипка.

HTML

<div class='header'>Header</div>
<div class='floatingmenu'>
  <ul class="menu">
    <li>One
      <ul class="sub-menu">
                <li>one a</li>
                <li>one b</li>
                <li>one c</li>
                <li>one d</li>
                <li>one e</li>
                <li>one f</li>
                <li>one g</li>
      </ul>
   </li>
   <li>Two</li>
   <li>Three</li>
   </ul>
</div>

CSS

 .header {
    height: 40px;
    background-color: blue;
}
.floatingmenu {
    width: 30%;
    height: 30%;
    background-color: green;
    color: white;
    border: 10px solid white;
    border-radius: 10px;
    margin: 20px auto;
}
.footer  {
    height: 200px;
    background-color: yellow;
}

TimSPQR 16 янв. 2014, в 16:29

0

Предположим, что он плавает над содержимым ниже, а не опускает его вниз ...
jenson-button-event 16 янв. 2014, в 17:37
0

Вы имеете в виду «прикрыть» контент или сделать так, чтобы контент обернулся вокруг него?
TimSPQR 16 янв. 2014, в 17:42
0

как у @Samih
jenson-button-event 16 янв. 2014, в 18:05

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

Ещё вопросы

Предположим, что он плавает над содержимым ниже, а не опускает его вниз ...
Вы имеете в виду «прикрыть» контент или сделать так, чтобы контент обернулся вокруг него?

Samih · Accepted Answer · 2014-01-16T14-30-00.000Z

Я думаю, вы этого хотите, но я не уверен в вашем описании:

http://jsfiddle.net/samih/hHR23/2/

Обратите внимание:

.section {
    height: 58px;
    background-color: yellow;
    position: relative;
}

И это:

.menu {
    position: absolute;

}

Теперь ваше меню будет следовать с "динамической" страницей, потому что абсолютное положение относится к контейнеру "позиция: относительный".

так просто, как, что? - Я предположил, что это не будет расти вне контейнера