ugrás a tartalomhoz

Ul/li menü gond

Bitman · 2008. Aug. 31. (V), 14.04
Sziasztok!

Egy konkurens oldalon pár napja már feldobtam a témát, de még sajnos nem kaptam rá választ, gondoltam megpróbálom itt is, ha nem gond..

Szóval ismét szeretném a segítségeteket kérni egy valószínűleg triviális problémában.. De nem jövök rá, hogy hogy lehetne megoldani, nyílván a pozicionálásokat kéne variálni, vagy esetleg z-index vagy overflow paraméterrel trükközni, de nem jött össze.

Szóval: Joomlába kéne bevarázsolnom egy egy vízszintes menüsort ul/li listával megoldva, melynek egyes menüpontjain belül vannak almenük is, amik lefele nyílnak ki, dropdown menü szerűen.

A gond csupán annyi, hogy a szülő menüpontok (szélességileg) viszonylag kicsik, és az alá lenyíló (ul -> li -> ul) lista szélesebb nála, és lenyíláskor a szülő menüpont következő elemét eltolja jobbra, a lenyílt almenü jobb szélénél kezdődik. Ezzel az egész menüsor elcsúszik.

Arra kellene tehát megoldás, hogy ez az eltolás megszűnjön, azaz valahogy el kéne érni, hogy a szülő menüsor elemeinek fix pozíciója legyen.

Az elcsúszás a Menü3 és 4 menüpontoknál figyelhető meg.
A CSS tudom hogy nem hibátlan, vannak benne az öröklődések miatt felesleges deklarálások, stb, de majd kisakkozom őket, de most egyenlőre a célnak megteszi.

A lecsupaszított példakód, htmlbe includolt stíluslappal:
  1. <html>  
  2. <head>  
  3.     <style>  
  4. body {  
  5.     background-color: grey;  
  6. }  
  7. #pillmenu {  
  8.     margin: 0 auto;  
  9.     color: white;  
  10.     position:relative;  
  11.     top:-5px;  
  12.     left:79px;  
  13.     z-index:100;  
  14.     margin:0;  
  15.     padding:0;  
  16. }  
  17. #pillmenu ul {  
  18.     margin: 0;  
  19.     padding: 0 0 0 14px;  
  20.     list-style: none;  
  21. }  
  22.   
  23. #pillmenu li {  
  24.     float: left;  
  25.     margin: 0;  
  26.     padding: 0;  
  27.     height: 30px;  
  28. }  
  29.   
  30. /* MENÜ ELEJE*/  
  31.   
  32. #mainlevelmainnav,#mainlevelmainnav ul{  
  33.     float:left;  
  34.     list-style:none;  
  35.     line-height:1em;  
  36.     background:transparent;  
  37.     font-weight: bold;  
  38.     margin:0;  
  39.     padding:0;  
  40. }  
  41. #mainlevelmainnav a{  
  42.     display:block;  
  43.     color:#fff;  
  44.     text-decoration:none;  
  45.     margin-right:15px;  
  46.     padding:0.3em;  
  47. }  
  48. #mainlevelmainnav li{  
  49.     float:left;  
  50.     padding:0;  
  51. }  
  52. #mainlevelmainnav li ul{  
  53.     position:absolute;  
  54.     left:-999em;  
  55.     height:auto;  
  56.     width:15em;  
  57.     font-weight:bold;  
  58.     background:#B93D3D url('../images/felso_menu.jpg') 100% 100% no-repeat;  
  59.     margin:0;  
  60. }  
  61. #mainlevelmainnav li li{  
  62.     width:15em;  
  63.     background:#B93D3D url('../images/felso_menu.jpg') 100% 100% no-repeat;  
  64. }  
  65. #mainlevelmainnav li li a:hover{  
  66.         color: #fff;  
  67. }  
  68. #mainlevelmainnav li ul a{  
  69.     width:15em;  
  70.     color:#fff;  
  71.     padding-top: 9px;  
  72.     /*font-size:0.9em;*/  
  73.     line-height:1em;  
  74.     font-weight: bold;  
  75.     clear: both;  
  76. }  
  77. #mainlevelmainnav li:hover ul ul,#mainlevelmainnav li:hover ul ul ul,#mainlevelmainnav li.sfhover ul ul,#mainlevelmainnav li.sfhover ul ul ul{  
  78.     color: #fff;  
  79.     left:-999em;  
  80.     top: 0px;  
  81.     clear: both;  
  82. }  
  83. #mainlevelmainnav li:hover ul,#mainlevelmainnav li li:hover ul,#mainlevelmainnav li li li:hover ul,#mainlevelmainnav li.sfhover ul,#mainlevelmainnav li li.sfhover ul,#mainlevelmainnav li li li.sfhover ul{  
  84.     z-index:6000;  
  85.     position: relative;  
  86.     left:0px;  
  87.     top: 0px;  
  88.     color: #FFFFFF;  
  89.     clear: both;  
  90. }  
  91. #mainlevelmainnav li li:hover,#mainlevelmainnav li li.sfhover{  
  92.     color: #FFFFFF;  
  93.     background:#B93D3D url('../images/felso_menu.jpg') 100% 100% no-repeat;  
  94. }  
  95.     </style>  
  96. </head>  
  97. <body>  
  98. <div id="pillmenu">  
  99.     <ul  id="mainlevelmainnav">  
  100.         <li><a href="#" class="mainlevelmainnav" id="active_menumainnav">Menü1</a></li>  
  101.         <li><a href="#" class="mainlevelmainnav">Menü2</a>  
  102.             <ul>  
  103.                 <li><a href="#">Menü2 almenü</a></li>  
  104.                 <li><a href="#">Menü2 hosszú almenü</a></li>  
  105.             </ul>  
  106.         </li>  
  107.         <li><a href="#" class="mainlevelmainnav">Menü3</a>  
  108.             <ul>  
  109.                 <li><a href="#">Menü3 hosszú almenüje....</a></li>  
  110.                 <li><a href="#">Menü4 itt is eltolódik...</a></li>  
  111.             </ul>  
  112.         </li>  
  113.         <li><a href="#" class="mainlevelmainnav">Menü4</a></li>  
  114.         <li><a href="#" class="mainlevelmainnav">Menü5</a></li>  
  115.         <li><a href="#" class="mainlevelmainnav">Menü6</a></li>  
  116.         <li><a href="#" class="mainlevelmainnav">Menü7</a>  
  117.             <ul>  
  118.                 <li><a href="#">itt nincs eltolás</a></li>  
  119.                 <li><a href="#">mert nincs mit eltolni :)</a></li>  
  120.             </ul>  
  121.         </li>  
  122.     </ul>  
  123. </div>  
  124.   
  125. </body>  
  126. </html>  
Biztos van valami egyszerű megoldás, de nem jövök rá.
A #pillmenu relatív pozícióját nem kéne zargatni, az így pont jó helyen jelenik meg. :)

Előre is köszönök mindenféle segítséget!

Üdv,
Ákos
‹ JavaScript keretrendszerek összehasonlítása HTML+CSS+JS editor nagy projekthez ›
 ■
1

Most hirtelen nem tudom a pontos választ, de

Ustak · 2008. Aug. 31. (V), 15.04
a jquery szuperhal (->examples->with supersubs fül) menüje tud ilyet, hátha segít!
2

Re: Superfish

Bitman · 2008. Aug. 31. (V), 17.28
Helló!

Köszi a Superfisht, ezzel megkerültem a problémát :)

Üdv,
Ákos