Używam u siebie na stronie scroll - osobny do przewijania treści i osobny do menu żeby działało to niezależnie od siebie (wybieramy w menu pozycje i ładuje się po prawej i potem menu jest nieruchome a treści możemy dowolnie przewijać) korzystam z http://areaaperta.com/nicescroll/ i z efektu akordeonu w js problem pojawia się w momencie gdy rozwinę jeden z poziomów menu który jest dłuższy od strony- powinien się wtedy pojawić scroll ale się nie pojawia i ucina mi część menu... domyślam się że nicescroll oblicza sobie wysokość elementu przy ładowaniu strony i decyduje czy włączyć scrolla ale w momencie wejścia na stronę wszystkie pozycje menu są zwinięte więc kontener w którym znajduje się menu nie potrzebuje przewijania... gdy rozwinę menu (i mi ucina) oraz zmienię rozmiar przeglądarki wysokość kontenera jest przeliczana ponownie bo pasek się pojawia i wszystko jest ok
Czy da się zrobić tak aby przeliczanie wysokości następowało w momencie kliknięcia pozycji menu? W jaki sposób? z js nie jestem mistrzem ale prosiłbym o jakieś wskazówki - jakoś dojdę metodą prób i błędów mam nadzieję:)
dla accordion:
$(document).ready(function() {
var accordion_head = $('.accordion > li > a'),
accordion_body = $('.accordion li > .sub-menu');
accordion_head.on('click', function(event) {
event.preventDefault();
if ($(this).attr('class') != 'active'){
accordion_body.slideUp('normal');
$(this).next().stop(true,true).slideToggle('normal');
accordion_head.removeClass('active');
$(this).addClass('active');
}
});
});
dla nicescroll'a
$(document).ready(function() {
var nice = $("html").niceScroll(); // The document page (body)
$("#scrollBox").niceScroll({cursorborder:"1px solid #555",cursorborderradius:"2px", cursorcolor:"#222",cursoropacitymax:0.5,touchbehavior:true}); // First scrollable DIV
});
struktura menu:
<div id="scrollBox">
<ul class="accordion">
<li id="one" class="files">
<a href="#one">Pliki</a>
<ul class="sub-menu">
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link3</a></li>
</ul>
</li>
<li id="two" class="settings">
<a href="#two">Ustawienia</a>
<ul class="sub-menu">
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link3</a></li>
<li><a href="#">...</a></li>
<li><a href="#">link25</a></li>
<li><a href="#">link26</a></li>
</ul>
</li>
</ul>
</div>