[jQuery] Autoukrywanie pozycji zbyt długiego menu strony Opcje

[mokry]

Hej,

Problem:
Mam na stronie menu, które wyświetlane jest w pozycji horyzontalnej (pozycja obok pozycji).
Ilość pozycji i obszar jaki zajmują jest większy niż szerokość div'a.
Menu wyświetlane jest za pomocą list ul>li.

Próbuję znaleźć, ale beskutecznie rozwązania, które automatycznie ukryłoby pozycje wychodzące poza obszar diva. Następnie pod koniec tegoż diva wyświetlałaby się jakaś ikonka w stylu ">>", po której, po najechaniu wyświetliłyby się pozostałe pozycje.

[vonski]

Rozumiem że div trzymający menu będzie miał z góry ustaloną szerokość, natomiast ul będzie miała szerokość zależną od liczby pozycji. Ja bym to zrobił tak, że temu divowi który trzyma menu ustawiam overflow:hidden, natomiast do <ul> przypisuję jakąś bardzo dużą szerokość początkową, załóżmy 5000px. W ten sposób wszystko mi się ułoży w jednej linii ale nie będzie tego widać dzięki overflow:hidden. Pozostaje kwestia najbardziej skrajnego elementu <li> - tego najbardziej od prawej. Żeby nie było tak, że np. pół tego elementu będzie widoczne, a drugie pół wychodzące poza obszar diva będzie schowane, to za pomocą jQuery (np. za pomocą .each() ) sprawdzam sobie, które elementy w całości mieszczą się w obszarze diva, a resztę po prostu chowam. Wystarczy stworzyć sobie jakąś zmienną, np. total_width i w każdej iteracji .each() zwiększać ją o szerokość aktualnego elementu (do tego dodać ewentualne marginy i paddingi o ile takie są ustawione dla elementów listy). Coś w tym stylu:

[HTML] pobierz, plaintext 
   $('#myUl li').each(function() {
       total_width += $(this).width() + 10;
 
       if(total_width > 500) {
           $(this).css('display', 'none');
           is_hidden = true;
       }
   });
[HTML] pobierz, plaintext 

W powyższym założyłem, że <div> trzymający menu ma 500px, do tego każdy <li> ma margin-right:10px;

Później appendujesz sobie jeszcze dwa elementy <li> - jeden będzie pokazywał resztę menu po najechaniu drugi będzie chował po najechaniu, czyli dajesz im klasy np. showMore i hideMore no i odpowiednio obsługujesz zdarzenia najechania myszką, czyli:
- jak chcesz pokazać resztę, to znowu .each() i pokazujesz wszystkie elementy; do tego overflow:visible dla <diva> no i nadajesz <ul> odpowiednią szerokość, żeby skasować to bazowe 5000px
- jak chcesz schować to odwrotnie

Tak bym chyba do tego podszedł, powinno zadziałać, chyba że nie o to chodziło

Pozdrawiam