Необходимо реализовать появление кнопок пролистывания пунктов меню при открытии нескольких пунктов, если они занимают более одной строки. как на картинке:
Т.е.,
Кнопки пролистывания (стрелки) изначально — с классом hidden
Если элементы списка li занимают больше одной строки, то кнопки пролистывания (влево, вправо) появляются — добавляем класс show
При нажатии на стрелки (влево, вправо) элементы списка li пролистываются в рамках одной строки (т.е. они не переносятся на другую строку).
Элементы списка li скрываются слева или справа при нажатии на стрелки
Главный вопрос, как отследить что элементы списка заняли больше одной строки, чтобы появились кнопки влево/вправо?
уточняю вопрос: ширина элемента списка li всегда разная, элементы списка подгружаются динамически с ajax. т.е. надо как-то вычислять ширину элемента li. Вот такой код у меня
/*multiselection*/
(function() {
function Slideshow(element) {
this.el = document.querySelector(element);
this.init();
}
Slideshow.prototype = {
init: function() {
this.wrapper = this.el.querySelector(".slider-wrapper");
this.previous = this.el.querySelector(".slider-previous");
this.next = this.el.querySelector(".slider-next");
this.index = 0;
this.recalculate();
this.actions();
},
recalculate: function() {
this.slides = this.el.querySelectorAll('.slide');
this.total = this.slides.length;
},
_slideTo: function(slide) {
var currentSlide = this.slides[slide];
this.wrapper.style.left = "-" + currentSlide.offsetLeft + "px";
},
actions: function() {
var self = this;
self.next.addEventListener("click", function() {
self.index++;
self.previous.style.display = "block";
if (self.index == self.total - 1) {
self.index = self.total - 1;
self.next.style.display = "none";
}
self._slideTo(self.index);
}, false);
self.previous.addEventListener("click", function() {
self.index--;
self.next.style.display = "block";
if (self.index == 0) {
self.index = 0;
self.previous.style.display = "none";
}
self._slideTo(self.index);
}, false);
$(document).on('order:service:tabs:add', function() {
console.log('tab added');
});
$(document).on('request:service:tab:close', function() {
console.log('tab closed');
})
}
};
document.addEventListener("DOMContentLoaded", function() {
var slider = new Slideshow("#multiSelection");
});
})();
.slider {
width: 730px;
overflow: hidden;
}
.slider-wrapper {
width: 9999px;
height: auto;
position: relative;
transition: left 500ms linear;
}
.slide {
float: left;
position: relative;
width: auto;
height: auto;
}
.slider-nav {
width: 100%;
display: none;
}
jsfiddle
Ответ
Пример с использованием JQUERY
/*HTML*/
- menu1
- menu2
- menu3
- menu4
- menu5
- menu6
- menu7
/*CSS*/ div>ul>li { display:inline-block; margin-right:10px } div { width:300px; } div>ul{ position:absolute; }
/*JS*/ $(document).ready(function() { if ($('ul').width() > $('div').width()) alert('меню шире родительского блока'); });
Посмотреть здесь http://codepen.io/anon/pen/WrxwvB
Комментариев нет:
Отправить комментарий