Я уже писал такой вопрос.
Изначально все выглядит так.
- Категории находятся слева.
- Использую bootstrap для блюд и вообще на сайте.
Можете подсказать как сделать так? При открытии категории, нужно смещать блюда на col-md-offset-3
.
Например, так. Если категорий/подкатегорий будет больше, то нужно делать offset дальше для блюд которые находятся слева. Вообще не знаю, как это сделать. Делать вместо меня не нужно, хотя бы подсказать.
И вот у меня появились его наработки.
var blockRect = document.querySelector('.block').getBoundingClientRect();
var foods = document.querySelectorAll('.food');
function toggleSubCategories(_category, init) {
if (!init) {
document.querySelectorAll('.subcategory').forEach(function(category) {
if (category !== _category) {
category.classList.remove('show');
}
});
_category.classList.toggle('show');
}
}
function isOpenListStructure() {
return document.querySelectorAll('.subcategory.show').length === 0 ? false : true;
}
function foodOffset(category, init) {
var subcategories = document.querySelector('.list-structure > ul');
var offsetListToFood = subcategories.offsetHeight - blockRect.height;
toggleSubCategories(category.children[1], init);
var isOpen = isOpenListStructure();
if (subcategories.offsetHeight >= blockRect.height) {
foods.forEach(function(food, index) {
var nextFoodIndex = index;
var foodRectData = food.getBoundingClientRect();
// detect left foods
if (foodRectData.left <= blockRect.left) {
var absoluteFoodHeight = foodRectData.height + foodRectData.top;
var absoluteListHeight = subcategories.offsetHeight + Math.abs(subcategories.getBoundingClientRect().top);
console.log(food, 'subcategories.offsetHeight ', subcategories.offsetHeight, ' > ', foodRectData.top, ' && ', subcategories.offsetHeight, ' < ', absoluteFoodHeight);
if ( absoluteListHeight >= foodRectData.top && absoluteListHeight <= absoluteFoodHeight ) {
food.classList.add('col-md-offset-4');
} else {
food.classList.remove('col-md-offset-4');
}
}
});
} else {
document.querySelectorAll('.food').forEach(function (food) {
if (food.classList.contains('col-md-offset-4')) {
food.classList.remove('col-md-offset-4');
}
});
}
}
document.querySelectorAll('.category').forEach(function(category) {
foodOffset(category, true);
category.addEventListener('click', function(e) {
e.preventDefault();
foodOffset(this, false);
});
});
.list-structure {
position: relative;
}
.list-structure li {
margin-bottom: 4px;
}
.list-structure li a {
color: #fff;
font-size: 12px;
padding: 11px 10px 7px 31px;
display: block;
}
.list-structure li {
display: block;
background: #546a88;
margin-bottom: 2px;
text-transform: uppercase;
}
.list-structure > ul {
position: absolute;
width: 100% height: 100%;
}
.categories {
padding: 10px;
}
.subcategory {
display: none;
}
.block {
border: 1px solid blue;
padding: 10px;
height: 200px;
}
.food {
padding: 10px;
}
.show {
display: block;
}
.hide {
display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-3 categories">
<div class="list-structure">
<ul>
<li class="category">
<a href="#">Маки/Суши</a>
<ul class=" subcategory">
<li><a href="#">Подкатегория 1</a></li>
<li><a href="#">Подкатегория 1</a></li>
<li><a href="#">Подкатегория 1</a></li>
<li><a href="#">Подкатегория 1</a></li>
<li><a href="#">Подкатегория 1</a></li>
</ul>
</li>
<li class="category">
<a href="#">Салаты/Супы</a>
<ul class=" subcategory">
<li><a href="#">Подкатегория 1</a></li>
<li><a href="#">Подкатегория 1</a></li>
<li><a href="#">Подкатегория 1</a></li>
<li><a href="#">Подкатегория 1</a></li>
<li><a href="#">Подкатегория 1</a></li>
</ul>
</li>
<li class="category">
<a href="#">Салаты/Супы</a>
<ul class=" subcategory">
<li><a href="#">Подкатегория 1</a></li>
<li><a href="#">Подкатегория 1</a></li>
<li><a href="#">Подкатегория 1</a></li>
<li><a href="#">Подкатегория 1</a></li>
<li><a href="#">Подкатегория 1</a></li>
</ul>
</li>
<li class="category">
<a href="#">Салаты/Супы</a>
<ul class=" subcategory">
<li><a href="#">Подкатегория 1</a></li>
<li><a href="#">Подкатегория 1</a></li>
<li><a href="#">Подкатегория 1</a></li>
<li><a href="#">Подкатегория 1</a></li>
<li><a href="#">Подкатегория 1</a></li>
</ul>
</li>
<li class="category">
<a href="#">Горячие блюда</a>
<ul class=" subcategory">
<li><a href="#">Подкатегория 1</a></li>
<li><a href="#">Подкатегория 1</a></li>
<li><a href="#">Подкатегория 1</a></li>
</ul>
</li>
<li class="category">
<a href="#">Десерты</a>
<ul class=" subcategory">
<li><a href="#">Подкатегория 1</a></li>
<li><a href="#">Подкатегория 1</a></li>
<li><a href="#">Подкатегория 1</a></li>
</ul>
</li>
<li class="category">
<a href="#">Напитки</a>
<ul class=" subcategory">
<li><a href="#">Подкатегория 1</a></li>
<li><a href="#">Подкатегория 1</a></li>
<li><a href="#">Подкатегория 1</a></li>
<li><a href="#">Подкатегория 1</a></li>
<li><a href="#">Подкатегория 1</a></li>
<li><a href="#">Подкатегория 1</a></li>
<li><a href="#">Подкатегория 1</a></li>
<li><a href="#">Подкатегория 1</a></li>
<li><a href="#">Подкатегория 1</a></li>
<li><a href="#">Подкатегория 1</a></li>
<li><a href="#">Подкатегория 1</a></li>
<li><a href="#">Подкатегория 1</a></li>
<li><a href="#">Подкатегория 1</a></li>
<li><a href="#">Подкатегория 1</a></li>
<li><a href="#">Подкатегория 1</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="col-md-9 block">
asdsakjdslkajdklsad
</div>
</div>
<div class="row">
<div class="col-md-4 food"><img src="https://static-cdn.jtvnw.net/jtv_user_pictures/food-profile_image-0a2c3ed2f8d119ea-300x300.png" alt=""></div>
<div class="col-md-4 food"><img src="https://static-cdn.jtvnw.net/jtv_user_pictures/food-profile_image-0a2c3ed2f8d119ea-300x300.png" alt=""></div>
<div class="col-md-4 food"><img src="https://static-cdn.jtvnw.net/jtv_user_pictures/food-profile_image-0a2c3ed2f8d119ea-300x300.png" alt=""></div>
<div class="col-md-4 food"><img src="https://static-cdn.jtvnw.net/jtv_user_pictures/food-profile_image-0a2c3ed2f8d119ea-300x300.png" alt=""></div>
<div class="col-md-4 food"><img src="https://static-cdn.jtvnw.net/jtv_user_pictures/food-profile_image-0a2c3ed2f8d119ea-300x300.png" alt=""></div>
<div class="col-md-4 food"><img src="https://static-cdn.jtvnw.net/jtv_user_pictures/food-profile_image-0a2c3ed2f8d119ea-300x300.png" alt=""></div>
<div class="col-md-4 food"><img src="https://static-cdn.jtvnw.net/jtv_user_pictures/food-profile_image-0a2c3ed2f8d119ea-300x300.png" alt=""></div>
<div class="col-md-4 food"><img src="https://static-cdn.jtvnw.net/jtv_user_pictures/food-profile_image-0a2c3ed2f8d119ea-300x300.png" alt=""></div>
<div class="col-md-4 food"><img src="https://static-cdn.jtvnw.net/jtv_user_pictures/food-profile_image-0a2c3ed2f8d119ea-300x300.png" alt=""></div>
</div>
Код лучше смотреть если развернуть result
на весь экран. Прикрепляю ссылку на codepen.
Проблема заключается в том, что при раскрытии категории "Напитки", первый блок сдвигается, это правильно, но следующий слева остается на месте, и 3 сдвигается.
Я знаю что это происходит из-за сдвига, но я не знаю как это исправить.
body
, например. И по этому классу - просто менял стили. Т.е. js'а тут будет вообще децл.css
будет проблема т.к. верстальщик сделал список с категориямиabsolute
absolute
?body
поможетpadding-left
, равный ширине навигации. Таким образом - плитка с товарами сдвинется вправо.