Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][JS]Nieskończone menu
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
Adi32
20.04.2012, 14:39:35
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 
  1. <div id="menu_gl" class="box menu">
  2.   <ul class="lvl1 dnone">
  3.     <li>
  4.     <a style="background:#65;" href="http://cms.freeline.pl/kategoria/1/">Sklep</a>
  5.     <ul class="lvl2 dnone">
  6.       <li>
  7.       <a style="background:#ca;" href="http://cms.freeline.pl/kategoria/1/">podSklep</a>
  8.       <ul class="lvl3 dnone">
  9.         <li>
  10.         <a style="background:#12f;" href="http://cms.freeline.pl/kategoria/1/">podSklep</a>
  11.         <ul class="lvl4 dnone">
  12.           <li>
  13.           <a style="background:#194;" href="http://cms.freeline.pl/kategoria/1/">podSklep</a>
  14.           <ul class="lvl5 dnone">
  15.             <li>
  16.             <a style="background:#1f9;" href="http://cms.freeline.pl/kategoria/1/">tytul menu</a>
  17.             </li>
  18.             <li>
  19.             <a style="background:#1f9;" href="http://cms.freeline.pl/kategoria/1/">tytul menu</a>
  20.             <ul class="lvl6 dnone">
  21.               <li>
  22.               <a style="background:#25e;" href="http://cms.freeline.pl/kategoria/1/">tytul menu</a>
  23.               </li>
  24.               <li>
  25.               <a style="background:#25e;" href="http://cms.freeline.pl/kategoria/1/">tytul menu</a>
  26.               </li>
  27.               <li>
  28.               <a style="background:#25e;" href="http://cms.freeline.pl/kategoria/1/">tytul menu</a>
  29.               <ul class="lvl7 dnone">
  30.                 <li>
  31.                 <a style="background:#2c3;" href="http://cms.freeline.pl/kategoria/1/">tytul menu</a>
  32.                 </li>
  33.                 <li>
  34.                 <a style="background:#2c3;" href="http://cms.freeline.pl/kategoria/1/">tytul menu</a>
  35.                 </li>
  36.                 <li>
  37.                 <a style="background:#2c3;" href="http://cms.freeline.pl/kategoria/1/">tytul menu</a>
  38.                 <ul class="lvl8 dnone">
  39.                   <li>
  40.                   <a style="background:#328;" href="http://cms.freeline.pl/kategoria/1/">tytul menu</a>
  41.                   </li>
  42.                   <li>
  43.                   <a style="background:#328;" href="http://cms.freeline.pl/kategoria/1/">tytul menu</a>
  44.                   </li>
  45.                   <li>
  46.                   <a style="background:#328;" href="http://cms.freeline.pl/kategoria/1/">tytul menu</a>
  47.                   <ul class="lvl9 dnone">
  48.                     <li>
  49.                     <a style="background:#38d;" href="http://cms.freeline.pl/kategoria/1/">tytul menu</a>
  50.                     </li>
  51.                     <li>
  52.                     <a style="background:#38d;" href="http://cms.freeline.pl/kategoria/1/">tytul menu</a>
  53.                     <ul class="lvl10 dnone">
  54.                       <li>
  55.                       <a style="background:#3f2;" href="http://cms.freeline.pl/kategoria/1/">tytul menu</a>
  56.                       </li>
  57.                       <li>
  58.                       <a style="background:#3f2;" href="http://cms.freeline.pl/kategoria/1/">tytul menu</a>
  59.                       <ul class="lvl11 dnone">
  60.                         <li>
  61.                         <a style="background:#457;" href="http://cms.freeline.pl/kategoria/1/">tytul menu</a>
  62.                         </li>
  63.                         <li>
  64.                         <a style="background:#457;" href="http://cms.freeline.pl/kategoria/1/">tytul menu</a>
  65.                         <ul class="lvl12 dnone">
  66.                           <li>
  67.                           <a style="background:#4bc;" href="http://cms.freeline.pl/kategoria/1/">tytul menu</a>
  68.                           </li>
  69.                           <li>
  70.                           <a style="background:#4bc;" href="http://cms.freeline.pl/kategoria/1/">tytul menu</a>
  71.                           </li>
  72.                           <li>
  73.                           <a style="background:#4bc;" href="http://cms.freeline.pl/kategoria/1/">tytul menu</a>
  74.                           </li>
  75.                         </ul>
  76.                         </li>
  77.                         <li>
  78.                         <a style="background:#457;" href="http://cms.freeline.pl/kategoria/1/">tytul menu</a>
  79.                         </li>
  80.                       </ul>
  81.                       </li>
  82.                       <li>
  83.                       <a style="background:#3f2;" href="http://cms.freeline.pl/kategoria/1/">tytul menu</a>
  84.                       </li>
  85.                     </ul>
  86.                     </li>
  87.                     <li>
  88.                     <a style="background:#38d;" href="http://cms.freeline.pl/kategoria/1/">tytul menu</a>
  89.                     </li>
  90.                   </ul>
  91.                   </li>
  92.                   <li>
  93.                   <a style="background:#328;" href="http://cms.freeline.pl/kategoria/1/">tytul menu</a>
  94.                   </li>
  95.                 </ul>
  96.                 </li>
  97.               </ul>
  98.               </li>
  99.               <li>
  100.               <a style="background:#25e;" href="http://cms.freeline.pl/kategoria/1/">tytul menu</a>
  101.               </li>
  102.             </ul>
  103.             </li>
  104.           </ul>
  105.           </li>
  106.         </ul>
  107.         </li>
  108.       </ul>
  109.       </li>
  110.     </ul>
  111.     </li>
  112.     <li>
  113.     <a style="background:#65;" href="http://cms.freeline.pl/kategoria/1/">Sklep</a>
  114.     <ul class="lvl2 dnone">
  115.       <li>
  116.       <a style="background:#ca;" href="http://cms.freeline.pl/kategoria/1/">Sklep</a>
  117.       <ul class="lvl3 dnone">
  118.         <li>
  119.         <a style="background:#12f;" href="http://cms.freeline.pl/kategoria/1/">tytul menu</a>
  120.         </li>
  121.         <li>
  122.         <a style="background:#12f;" href="http://cms.freeline.pl/kategoria/1/">tytul menu</a>
  123.         <ul class="lvl4 dnone">
  124.           <li>
  125.           <a style="background:#194;" href="http://cms.freeline.pl/kategoria/1/">tytul menu</a>
  126.           </li>
  127.           <li>
  128.           <a style="background:#194;" href="http://cms.freeline.pl/kategoria/1/">tytul menu</a>
  129.           </li>
  130.           <li>
  131.           <a style="background:#194;" href="http://cms.freeline.pl/kategoria/1/">tytul menu</a>
  132.           </li>
  133.           <li>
  134.           <a style="background:#194;" href="http://cms.freeline.pl/kategoria/1/">tytul menu</a>
  135.           <ul class="lvl5 dnone">
  136.             <li>
  137.             <a style="background:#1f9;" href="http://cms.freeline.pl/kategoria/1/">tytul menu</a>
  138.             </li>
  139.           </ul>
  140.           </li>
  141.           <li>
  142.           <a style="background:#194;" href="http://cms.freeline.pl/kategoria/1/">tytul menu</a>
  143.           </li>
  144.           <li>
  145.           <a style="background:#194;" href="http://cms.freeline.pl/kategoria/1/">tytul menu</a>
  146.           </li>
  147.         </ul>
  148.         </li>
  149.         <li>
  150.         <a style="background:#12f;" href="http://cms.freeline.pl/kategoria/1/">tytul menu</a>
  151.         </li>
  152.       </ul>
  153.       </li>
  154.     </ul>
  155.     </li>
  156.   </ul>
  157. </div>
[HTML] pobierz, plaintext


Napisałem do tego CSS:

[HTML] pobierz, plaintext 
  1. #menu_gl {
  2.     float: left;
  3. }
  4.  
  5. #menu_gl>ul ul {
  6.     left: 0;
  7.     position: absolute;
  8.     top: 44px;
  9.     width: 200px;
  10. }
  11.  
  12. #menu_gl>ul ul ul {
  13.     left: 180px;
  14.     position: absolute;
  15.     top: 0px;
  16.     width: 200px;
  17. }
  18.  
  19. #menu_gl>ul li {
  20.     width: 180px;
  21.     margin: 0 auto;
  22. }
  23.  
  24. #menu_gl>ul {
  25.     display: block;
  26. }
  27.  
  28. #menu_gl ul li {
  29.     float: left;
  30.     position: relative;
  31. }
  32.  
  33. #menu_gl ul li a {
  34.     display: block;
  35.     padding: 10px;
  36.     background: #ffbcda;
  37.     margin: 2px;
  38.     text-decoration: none;
  39. }
  40.  
  41. #menu_gl ul li a:hover {
  42.     background: #dfedcb;
  43. }
  44.  
  45.  
  46.     li:hover>ul {
  47.         display: block;
  48.     }
[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 
  1. $(function(){
  2.  
  3.     $('ul li ul').mouseenter(function(){
  4.  
  5.         var elementWidth = $(this).width();
  6.         var elementHeight = $(this).height();
  7.  
  8.         var pageWidth = window.innerWidth;
  9.         var pageHeight = window.innerHeight;
  10.         var left = $(this).offset();
  11.  
  12.  
  13.         if (left.left + (elementWidth * 2) > pageWidth) {
  14.             $(this).find('ul').each(function(){
  15.                 $(this).css('left','-'+(elementWidth-20)+'px');
  16.             })
  17.         }
  18.  
  19.         if (left.left - elementWidth < 0) {
  20.             $(this).find('ul').each(function(){
  21.                 $(this).css('left',(elementWidth-20)+'px').css('top','0px');
  22.             })
  23.         }
  24.  
  25.         if (left.top + (elementHeight * 2) > pageHeight) {
  26.             $(this).find('ul').each(function(){
  27.                 var h = $(this).height();
  28.                 $(this).css('top','-'+(h-43)+'px');
  29.             })
  30.         }
  31.  
  32.     }); 
  33.  
  34. });
[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.
prowseed
20.04.2012, 23:15:37
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
21.04.2012, 06:24:31
Cytat(prowseed @ 21.04.2012, 00:15:37 ) *
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
21.04.2012, 09:38:00
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
23.04.2012, 08:21:19
Dzięki prowseed.

.css('z-index',lvl)

załatwiło sprawę.

Cytat
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
23.04.2012, 09:45:53
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
23.04.2012, 12:54:19
Cytat(prowseed @ 23.04.2012, 10:45:53 ) *
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
23.04.2012, 13:37:51
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 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
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.