Ul/li menü gond
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: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
■ 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:
<html>
<head>
<style>
body {
background-color: grey;
}
#pillmenu {
margin: 0 auto;
color: white;
position:relative;
top:-5px;
left:79px;
z-index:100;
margin:0;
padding:0;
}
#pillmenu ul {
margin: 0;
padding: 0 0 0 14px;
list-style: none;
}
#pillmenu li {
float: left;
margin: 0;
padding: 0;
height: 30px;
}
/* MENÜ ELEJE*/
#mainlevelmainnav,#mainlevelmainnav ul{
float:left;
list-style:none;
line-height:1em;
background:transparent;
font-weight: bold;
margin:0;
padding:0;
}
#mainlevelmainnav a{
display:block;
color:#fff;
text-decoration:none;
margin-right:15px;
padding:0.3em;
}
#mainlevelmainnav li{
float:left;
padding:0;
}
#mainlevelmainnav li ul{
position:absolute;
left:-999em;
height:auto;
width:15em;
font-weight:bold;
background:#B93D3D url('../images/felso_menu.jpg') 100% 100% no-repeat;
margin:0;
}
#mainlevelmainnav li li{
width:15em;
background:#B93D3D url('../images/felso_menu.jpg') 100% 100% no-repeat;
}
#mainlevelmainnav li li a:hover{
color: #fff;
}
#mainlevelmainnav li ul a{
width:15em;
color:#fff;
padding-top: 9px;
/*font-size:0.9em;*/
line-height:1em;
font-weight: bold;
clear: both;
}
#mainlevelmainnav li:hover ul ul,#mainlevelmainnav li:hover ul ul ul,#mainlevelmainnav li.sfhover ul ul,#mainlevelmainnav li.sfhover ul ul ul{
color: #fff;
left:-999em;
top: 0px;
clear: both;
}
#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{
z-index:6000;
position: relative;
left:0px;
top: 0px;
color: #FFFFFF;
clear: both;
}
#mainlevelmainnav li li:hover,#mainlevelmainnav li li.sfhover{
color: #FFFFFF;
background:#B93D3D url('../images/felso_menu.jpg') 100% 100% no-repeat;
}
</style>
</head>
<body>
<div id="pillmenu">
<ul id="mainlevelmainnav">
<li><a href="#" class="mainlevelmainnav" id="active_menumainnav">Menü1</a></li>
<li><a href="#" class="mainlevelmainnav">Menü2</a>
<ul>
<li><a href="#">Menü2 almenü</a></li>
<li><a href="#">Menü2 hosszú almenü</a></li>
</ul>
</li>
<li><a href="#" class="mainlevelmainnav">Menü3</a>
<ul>
<li><a href="#">Menü3 hosszú almenüje....</a></li>
<li><a href="#">Menü4 itt is eltolódik...</a></li>
</ul>
</li>
<li><a href="#" class="mainlevelmainnav">Menü4</a></li>
<li><a href="#" class="mainlevelmainnav">Menü5</a></li>
<li><a href="#" class="mainlevelmainnav">Menü6</a></li>
<li><a href="#" class="mainlevelmainnav">Menü7</a>
<ul>
<li><a href="#">itt nincs eltolás</a></li>
<li><a href="#">mert nincs mit eltolni :)</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
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
Most hirtelen nem tudom a pontos választ, de
Re: Superfish
Köszi a Superfisht, ezzel megkerültem a problémát :)
Üdv,
Ákos