[CSS][JS]Nieskończone menu, Problem z nakładaniem Opcje

[Adi32]

Witajcie.

Robię prostego frameworka i dodałem ostatnio możliwość robienia nieskończenie wielu poziomów menu.

Doszło do widoku we frontendzie i mam mały problem.

PHP generuje mi taką strukturę:

[HTML] pobierz, plaintext 
<div id="menu_gl" class="box menu">
  <ul class="lvl1 dnone">
    <li>
    <a style="background:#65;" href="http://cms.freeline.pl/kategoria/1/">Sklep</a>
    <ul class="lvl2 dnone">
      <li>
      <a style="background:#ca;" href="http://cms.freeline.pl/kategoria/1/">podSklep</a>
      <ul class="lvl3 dnone">
        <li>
        <a style="background:#12f;" href="http://cms.freeline.pl/kategoria/1/">podSklep</a>
        <ul class="lvl4 dnone">
          <li>
          <a style="background:#194;" href="http://cms.freeline.pl/kategoria/1/">podSklep</a>
          <ul class="lvl5 dnone">
            <li>
            <a style="background:#1f9;" href="http://cms.freeline.pl/kategoria/1/">tytul menu</a>
            </li>
            <li>
            <a style="background:#1f9;" href="http://cms.freeline.pl/kategoria/1/">tytul menu</a>
            <ul class="lvl6 dnone">
              <li>
              <a style="background:#25e;" href="http://cms.freeline.pl/kategoria/1/">tytul menu</a>
              </li>
              <li>
              <a style="background:#25e;" href="http://cms.freeline.pl/kategoria/1/">tytul menu</a>
              </li>
              <li>
              <a style="background:#25e;" href="http://cms.freeline.pl/kategoria/1/">tytul menu</a>
              <ul class="lvl7 dnone">
                <li>
                <a style="background:#2c3;" href="http://cms.freeline.pl/kategoria/1/">tytul menu</a>
                </li>
                <li>
                <a style="background:#2c3;" href="http://cms.freeline.pl/kategoria/1/">tytul menu</a>
                </li>
                <li>
                <a style="background:#2c3;" href="http://cms.freeline.pl/kategoria/1/">tytul menu</a>
                <ul class="lvl8 dnone">
                  <li>
                  <a style="background:#328;" href="http://cms.freeline.pl/kategoria/1/">tytul menu</a>
                  </li>
                  <li>
                  <a style="background:#328;" href="http://cms.freeline.pl/kategoria/1/">tytul menu</a>
                  </li>
                  <li>
                  <a style="background:#328;" href="http://cms.freeline.pl/kategoria/1/">tytul menu</a>
                  <ul class="lvl9 dnone">
                    <li>
                    <a style="background:#38d;" href="http://cms.freeline.pl/kategoria/1/">tytul menu</a>
                    </li>
                    <li>
                    <a style="background:#38d;" href="http://cms.freeline.pl/kategoria/1/">tytul menu</a>
                    <ul class="lvl10 dnone">
                      <li>
                      <a style="background:#3f2;" href="http://cms.freeline.pl/kategoria/1/">tytul menu</a>
                      </li>
                      <li>
                      <a style="background:#3f2;" href="http://cms.freeline.pl/kategoria/1/">tytul menu</a>
                      <ul class="lvl11 dnone">
                        <li>
                        <a style="background:#457;" href="http://cms.freeline.pl/kategoria/1/">tytul menu</a>
                        </li>
                        <li>
                        <a style="background:#457;" href="http://cms.freeline.pl/kategoria/1/">tytul menu</a>
                        <ul class="lvl12 dnone">
                          <li>
                          <a style="background:#4bc;" href="http://cms.freeline.pl/kategoria/1/">tytul menu</a>
                          </li>
                          <li>
                          <a style="background:#4bc;" href="http://cms.freeline.pl/kategoria/1/">tytul menu</a>
                          </li>
                          <li>
                          <a style="background:#4bc;" href="http://cms.freeline.pl/kategoria/1/">tytul menu</a>
                          </li>
                        </ul>
                        </li>
                        <li>
                        <a style="background:#457;" href="http://cms.freeline.pl/kategoria/1/">tytul menu</a>
                        </li>
                      </ul>
                      </li>
                      <li>
                      <a style="background:#3f2;" href="http://cms.freeline.pl/kategoria/1/">tytul menu</a>
                      </li>
                    </ul>
                    </li>
                    <li>
                    <a style="background:#38d;" href="http://cms.freeline.pl/kategoria/1/">tytul menu</a>
                    </li>
                  </ul>
                  </li>
                  <li>
                  <a style="background:#328;" href="http://cms.freeline.pl/kategoria/1/">tytul menu</a>
                  </li>
                </ul>
                </li>
              </ul>
              </li>
              <li>
              <a style="background:#25e;" href="http://cms.freeline.pl/kategoria/1/">tytul menu</a>
              </li>
            </ul>
            </li>
          </ul>
          </li>
        </ul>
        </li>
      </ul>
      </li>
    </ul>
    </li>
    <li>
    <a style="background:#65;" href="http://cms.freeline.pl/kategoria/1/">Sklep</a>
    <ul class="lvl2 dnone">
      <li>
      <a style="background:#ca;" href="http://cms.freeline.pl/kategoria/1/">Sklep</a>
      <ul class="lvl3 dnone">
        <li>
        <a style="background:#12f;" href="http://cms.freeline.pl/kategoria/1/">tytul menu</a>
        </li>
        <li>
        <a style="background:#12f;" href="http://cms.freeline.pl/kategoria/1/">tytul menu</a>
        <ul class="lvl4 dnone">
          <li>
          <a style="background:#194;" href="http://cms.freeline.pl/kategoria/1/">tytul menu</a>
          </li>
          <li>
          <a style="background:#194;" href="http://cms.freeline.pl/kategoria/1/">tytul menu</a>
          </li>
          <li>
          <a style="background:#194;" href="http://cms.freeline.pl/kategoria/1/">tytul menu</a>
          </li>
          <li>
          <a style="background:#194;" href="http://cms.freeline.pl/kategoria/1/">tytul menu</a>
          <ul class="lvl5 dnone">
            <li>
            <a style="background:#1f9;" href="http://cms.freeline.pl/kategoria/1/">tytul menu</a>
            </li>
          </ul>
          </li>
          <li>
          <a style="background:#194;" href="http://cms.freeline.pl/kategoria/1/">tytul menu</a>
          </li>
          <li>
          <a style="background:#194;" href="http://cms.freeline.pl/kategoria/1/">tytul menu</a>
          </li>
        </ul>
        </li>
        <li>
        <a style="background:#12f;" href="http://cms.freeline.pl/kategoria/1/">tytul menu</a>
        </li>
      </ul>
      </li>
    </ul>
    </li>
  </ul>
</div>
[HTML] pobierz, plaintext 

Napisałem do tego CSS:

[HTML] pobierz, plaintext 
#menu_gl {
    float: left;
}
 
#menu_gl>ul ul {
    left: 0;
    position: absolute;
    top: 44px;
    width: 200px;
}
 
#menu_gl>ul ul ul {
    left: 180px;
    position: absolute;
    top: 0px;
    width: 200px;
}
 
#menu_gl>ul li {
    width: 180px;
    margin: 0 auto;
}
 
#menu_gl>ul {
    display: block;
}
 
#menu_gl ul li {
    float: left;
    position: relative;
}
 
#menu_gl ul li a {
    display: block;
    padding: 10px;
    background: #ffbcda;
    margin: 2px;
    text-decoration: none;
}
 
#menu_gl ul li a:hover {
    background: #dfedcb;
}
 
 
    li:hover>ul {
        display: block;
    }
[HTML] pobierz, plaintext 

I wszystko działa świetnie. CSSy są napisane dziwne po to aby pierwsze pod menu wyświetlało się pod spodem a kolejne na prawo od rodzica.

Dodałem do tego skrypt JS który sprawia, że jeśli nie ma miejsca z prawej strony to elementy rozjeżdżają się w lewo, i na odwrót, ponadto jeżeli nie ma miejsca na dole to elementy wyjeżdżają do góry (jak w interfejsie systemowym):

[HTML] pobierz, plaintext 
$(function(){
 
    $('ul li ul').mouseenter(function(){
 
        var elementWidth = $(this).width();
        var elementHeight = $(this).height();
 
        var pageWidth = window.innerWidth;
        var pageHeight = window.innerHeight;
        var left = $(this).offset();
 
 
        if (left.left + (elementWidth * 2) > pageWidth) {
            $(this).find('ul').each(function(){
                $(this).css('left','-'+(elementWidth-20)+'px');
            })
        }
 
        if (left.left - elementWidth < 0) {
            $(this).find('ul').each(function(){
                $(this).css('left',(elementWidth-20)+'px').css('top','0px');
            })
        }
 
        if (left.top + (elementHeight * 2) > pageHeight) {
            $(this).find('ul').each(function(){
                var h = $(this).height();
                $(this).css('top','-'+(h-43)+'px');
            })
        }
 
    }); 
 
});
[HTML] pobierz, plaintext 

I tu pojawił się taki problem, kiedy rozwijam kilkunasty poziom zagłębienia naturalne jest, że niektóre elementy będą nachodzić na poprzednie (jakichś przodków) bo miejsca na ekranie nie jest nieskończoność i tu pojawia się problem: czasami przodek jest nad elementem ostatnio rozwiniętym... Logicznie nie powinno się tak dziać, walczę z tym 2 godziny i nic nie wymyśliłem.

Proszę o pomoc i pozdrawiam.

Ten post edytował Adi32 20.04.2012, 14:41:32

[prowseed]

skoro i tak generujesz menu z atrybutem style, to nadawaj im z-index od razu (najlepiej calym listom ul), im bardziej zaglebione menu, tym z-index wyzszy.

[Adi32]

skoro i tak generujesz menu z atrybutem style, to nadawaj im z-index od razu (najlepiej calym listom ul), im bardziej zaglebione menu, tym z-index wyzszy.

Próbowałem... Nic to nie zmienia.

[prowseed]

To może spróbuj to samo dopisać do js. Sprawdz tez jak sie zachowuje z z-index:9999 !important;
Pomijam juz fakt, ze tak ogromne nested menu jest troche niewygodne i duze nawigacje rozwiazuje sie w nieco inny sposob.

[Adi32]

Dzięki prowseed.

.css('z-index',lvl)

załatwiło sprawę.

Pomijam juz fakt, ze tak ogromne nested menu jest troche niewygodne i duze nawigacje rozwiazuje sie w nieco inny sposob.

Można jakieś przykłady? Chcę aby użytkownik miał możliwość robienia tyle podkategorii ile zechce zarówno kategorii artykułów itp. jak i kategorii produktów w sklepie i szukam ciekawych i wydajnych rozwiązań widoku frontendu.

[prowseed]

Hmm, no to tak:
onet.pl - jednopoziomowe zagłębienie, wchodzisz dalej, widzisz więcej (global/local nav)
deviantart.com - mam na mysli stare menu, jesli nigdy nie byles, to Ci nie opisze ; ) to obecne jest wg mnie niewygodne
ibm.com - pierwszy poziom zagłębienia podzielony na kategorie
prototype.php.net - to samo rozwiazanie, co wyzej, dobrze sie to sprawuje przy trzecim zaglebieniu ale pozniej wciecie mozne juz byc tylko problemem jesli zle to zaprojektujesz
photoshoptutorials.ws - poziomy sub-level, wg mnie wygodniejsze rozwiazanie [multi-level horizontal menu] od pionowego sub-menu
ikea.com/pl/pl/catalog/allproducts/ - zobacz tu, masz pierwszy poziom zagłębienia i jest to swietny przyklad global navigation, a wchodzac w, na przyklad, biurka ( http://www.ikea.com/pl/pl/catalog/categori...rkspaces/20649/ ) masz local navigation nad produktami, gdzie mozesz wybrac rodzaj biurka czy kolor.
Mialbym jeszcze kilka przykladow nieco innych, ale sobie nie moge przypomniec gdzie to widzialem : >

wiesz, nie powinienes dawac klientowi zbyt duzo swobody, bedzie mial monitor 24 cale i wymysli sobie 10 poziomow menu, bo u niego sie miesci, a Ty bedziesz musial latac od lewej do prawej omamiony natlokiem liter i "arrrr, tylko nie to, znow mi myszka spadla"!!

[Adi32]

wiesz, nie powinienes dawac klientowi zbyt duzo swobody, bedzie mial monitor 24 cale i wymysli sobie 10 poziomow menu, bo u niego sie miesci, a Ty bedziesz musial latac od lewej do prawej omamiony natlokiem liter i "arrrr, tylko nie to, znow mi myszka spadla"!!

Myślałem o tym i masz rację.

Najpewniej zrobię blokadę do 5 poziomów i tyle.
A nieskończone menu zrobiłem głównie w celach edukacyjnych.

Wyświetlanie tego menu w PA zrobiłem na interfejsie jak w systemie, np wyświetlanie katalogów i plików w Eclipse albo NetBeans'ie - wydaje mi się fajnym bajerem jak na WWW jednak siedziałem nad tym 2 godziny i zastanawiam się, czy jest jakaś klasa do tego?

[prowseed]

To znaczy nie zrozum mnie źle, nieskończone menu- spoko, ale nie w takiej formie jak u Ciebie : )
Deviantart ma bardzo dużo zagłębień, zobacz jak tam to teraz wygląda- nie ma problemu z nawigacją (chociaż i tak kiedyś było lepiej wg mnie (IMG:style_emoticons/default/wink.gif) ).
Rozważ też opcję tzw. 'big menu' czyli po kliknięciu w kategorię od razu są rozwijane wszystkie jego dzieci. Mimo to duże nawigacje powinno się dostosowywać i tak pod indywidualne zapotrzebowania i przyszłe plany klienta.

Co do wyswietlania z PA masz na mysli tree view? Jest sporo : ) Np: http://mbraak.github.com/jqTree/ - calkiem fajne

Ten post edytował prowseed 23.04.2012, 13:39:25