Раскрывающееся меню - сделать подменю <ul>шириной 100% - PullRequest
Новая
       5

Раскрывающееся меню - сделать подменю <ul>шириной 100%

3 голосов
/ 16 июня 2011

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

По сути, я пытаюсь сделать выпадающее меню, в котором выпадающий список <ul> или: 

ul.menu li ul

окружен див.Вид: 

<ul class="menu">
   <li>
       <a href="#">Item</a>
       <div class="submenu">
           <ul>.....</ul>
       </div>
   </li>
</ul>

Я хочу, чтобы этот div имел ширину: 100% и занимал всю ширину страницы, но UL внутри был выровнен по соответствующему <li>.

.проблема в том, что <div class="submenu"> будет такой же ширины, как контейнер relative, будь то основной <ul class="menu"> или <div>, обертывающий <ul class="menu">.

Сам сайт имеет ширину 1000 пикселей и центрируетсяширина margin:0 auto;

Надеюсь, я все правильно объяснил: S Вот ссылка на макет, который я собрал: Раскрывающееся меню Макет

Любая помощьвысоко ценится.

Спасибо, Алекс

Ответы [ 2 ]

7 голосов
/ 24 декабря 2012

Старый вопрос, но, надеюсь, ответ поможет кому-то. Я должен был работать над чем-то похожим на это месяц или около того назад.

Вот небольшая часть того, что я в основном сделал (примечание: вам нужно проделать некоторую дополнительную работу, чтобы это работало в старых IE):

Я не использовал вложенный div и вместо этого придерживался вложенных списков. С базовой разметкой, подобной следующей: 

<div class="nav">
  <ul>

    <li>
      <a href="#">Products</a>
      <ul>
        <li><a href="#">Widget A</a></li>
        <li><a href="#">Widget B</a></li>
        <li><a href="#">Widget C</a></li>
      </ul>
    </li>

    <li>
      <a href="#">Locations</a>
      <ul>
        <li><a href="#">Location A</a></li>
        <li><a href="#">Location B</a></li>
        <li><a href="#">Location C</a></li>
      </ul>
    </li>

    <li>
      <a href="#">Staff</a>
      <ul>
        <li><a href="#">President</a></li>
        <li><a href="#">VP</a></li>
        <li><a href="#">Manager</a></li>
      </ul>
    </li>

  </ul>
</div>

Вы можете использовать следующие стили: 

/* GENERAL */

body { overflow-x: hidden; } /* trick from css-tricks comments */

/* FIRST LEVEL */

.nav > ul > li { 
  display: inline-block; 
  position: relative; 
  padding: 3px 10px 3px 0;
  z-index: 100;
}

/* SECOND LEVEL */

.nav > ul > li > ul {
  position: absolute;
  left: 0;
  top: 100%;
  padding: 0 1000em; /* trick from css-tricks comments */
  margin: 0 -1000em; /* trick from css-tricks comments */
  z-index: 101;
  visibility: hidden;
  opacity: 0;
  background: rgba(255, 240, 240, 0.8);
}

.nav > ul > li:hover > ul {
  visibility: visible;
  opacity: 1;
}

.nav > ul > li > ul > li {
  padding: 3px 0;
}

Если вы хотите поразить CSS, вы можете добавить это на второй уровень ul: 

.nav > ul > li > ul {
  ...
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

Если кто-то заинтересован в том, чтобы сделать эту работу аналогичным образом в старых IE, или хочет использовать более глубокие вложенные списки, сообщите мне.

Чтобы дать вам преимущество, вот несколько полезных ссылок, которые мне помогли:

Крис Койер действительно накрывает нас на работе.

1 голос
/ 16 июня 2011

Вы совершенно правы в том, что эта блочная модель не работает таким образом.

Есть одна вещь, о которой я могу подумать, - это установить ваши дивы на 

position:absolute

и используйте верхние, левые, правые атрибуты для их размещения.Но, как вы говорите, это не сработает, если у вас есть позиция: относительная по отношению к родительскому элементу.

Честно говоря, будет трудно добиться этого без ужасного беспорядка обходных путей, который, вероятно, сломаетмежду браузерами.Я видел, как коллеги и коллеги целую вечность пытались реализовать подобные вещи, создавая все больше и больше нестабильных «исправлений» кода, чтобы заставить его работать в кросс-браузерном режиме, получая жалобы от клиентов о том, что он не работает в IE6 и Firefox 1.5, толькополностью отказаться от этой «черты».

...