Перейдите на страницу http://store.apple.com/us/buy-mac/mac-pro?product=MD878LL/A&step=config, загрузите кучу элементов и посмотрите расширенный список аддонов на боковой панели. Этот список является неупорядоченным списком с набором элементов li. Чтобы создать второй столбец надстроек, они заставляют их иметь крайний левый достаточно большой, чтобы переместить их, а затем назначить верхний край: -170 в первом элементе строки, чтобы заставить его перейти в начало. Происходят две разные вещи, которые я не могу воспроизвести.
Как я могу это сделать? Я просмотрел их CSS и не могу понять его. Если я пишу подобный код, который я могу получить это далеко, но когда я пытаюсь вытащить его, похоже, это
Мой HTML генерируется в шаблоне, а затем модифицируется javascript, поэтому вот что выглядит на первом снимке, когда все сказано и сделано, и это CSS
.optli{
width:300px;
position:relative;
}
.optli li{
line-height:20px;
min-height:20px;
}
.optli_right{
margin-left:320px;
}
.optli_left{
}
.optli_container{
width:640px;
height:auto;
}
.optli_container_hidden{
overflow:hidden;
background-color:transparent;
}
.optli_container_open{
overflow:visible;
background-color:#AAAAAA;
}
Проблема заключалась в том, что OP размещал содержимое внутри каждого li
и не очищал их. Применяя overflow: hidden
для каждого li
проблема была решена.
Поскольку вы не опубликовали функциональный пример своей реализации (с JavaScript), я не могу сказать вам, почему ваша реализация не работает, однако, вероятно, это связано с спецификой CSS и переписанием полей.
HTML и CSS на самом деле довольно просты, вы должны реализовать его так:
Рабочий пример (http://jsfiddle.net/georeith/7kDyQ/5/)
HTML:
<ul id="products">
<li>product 1</li>
<li>product 2</li>
<li>product 3</li>
<li class="column-2 up">product 4</li>
<li class="column-2">product 5</li>
<li class="column-2">product 6</li>
<a href="#" id="show-more">Show more »</a>
</ul>
CSS:
#products {
width: 100px; /* Width of one column */
border: 1px solid;
list-style-type: none;
margin: 0;
padding: 5px;
overflow: hidden; /* Hide offset list items */
float: right;
}
#products.open {
width: 200px; /* Width of however many columns you need to show */
}
#products li {
width: 100px; /* Here you specify the width of a column */
margin: 0;
padding: 0 5px;
height: 20px; /* We use equal height here, you will want to change this and calculate the height of each column with JavaScript */
}
#products li.column-2.up {
margin-top: -60px; /* You should do this with JavaScript in production as you can't guarantee the height depending on your content length */
}
#products li.column-2 {
margin-left: 100px; /* (Column width X (Column number - 1)); */
}
#show-more {
display: block;
padding: 5px;
text-align: right;
}
JS (с использованием jQuery):
var $products = $("#products");
var open = $products.hasClass("open");
$("#show-more").on("click", function(e) {
e.preventDefault();
e.stopPropagation();
if (open) {
$products.removeClass("open");
this.innerHTML = "Show more »"
} else {
$products.addClass("open");
this.innerHTML = "Close ⊗";
}
open = !open;
});
Модифицируйте, чтобы удовлетворить ваши потребности.
overflow: hidden
на каждом li
?
это только первый <li>
второго столбца с отрицательным краем:
вот моя работа DEMO