bei gefühlten 50grad kommt man manchmal an den punkt, wo man einfach nimmer weiterkommt und die lösung liegt wahrscheinlich sehr sehr nahe...aber man findet sie einfach nicht.
habe mich durch X beiträge geschlagen um folgendes zu erreichen:
horinzontale navigation mit bildern und hover / mouseover effect, bei dessen überfahren sich nach unten noch ein CSS menü öffnet.
habe die site schonmal statisch gebaut damit man sie sich anschauen kann:
http://contenido.down-n-out.de/static/u ... /index.htm
genau diese navigation.
Contenido: 4.6.8
Modul: standart Hauptnavigationsmodul
das standartnavimodul wurde aber leicht geändert, (leider der link gerade nicht greifbar, hatte das hier im forum gefunden), das standartmodul wurde um die HOVER möglichkeit erweitert (standart dreamweaver skript, wer kennt es nicht), was ins template gehauen wurde und die bilder werden entsprechend ihrer benamung der kategorie aufgerufen mit
Code: Alles auswählen
"image src="/images/navigation_{NAME}_on.gif" ..... etchttp://contenido.down-n-out.de/static/dropdown.js
und im quelltext sieht man die aufrufe.
der haken bei der geschichte:
jedem "vater" (das bild) wurde eine ID vergeben per css, auf die das JS zugreift.
genauso wurde jedem "kind" (unterpunkte) eine ID vergeben.
ändert sich die anzahl der Punkte, werden es mehr ID's - und dummerweise müsste ich für jedes neue pärrchen eine neue funktion anlegen, was ja jetzt nicht unbedingt so toll ist.
Das riesenproblem das eine ID auch nu EINMAL vergeben werden darf
eine möglichkeit ala "getElementsByClass()" gibt es ja leider nicht in JS, was schonmal helfen würde...
(also ich finde momentan keine gute lösung, wie ich es hinbekomme, das er die JS aufrufe richtig zusammenstrickt, da ja auch die funktion erneut aufgerufen werden muss (siehe HTML)
jetzt ist die frage, kennt jm eine gute lösung (oder lösungsansatz) hierfür?
das tolle ist, die navi ist dem kunden halt schon so verkauft worden und bei der anfrage "upgrade mit einem cms?" hab ich mir das net ganz so frikelig vorgestellt.
würde es hier sinn machen, sozusagen jedem hauptnavipunkt ein eigenes modul zu geben? ich meine dann wäre die einbindung ansich nicht das problem, oder!? (ich hoffe ihr versteht was ich meine !?) - nur wäre das auch bisschen von hinten selbst ins knie geschossen.
hier nochmals die "wichtigsten" stellen im code:
HTML: "parent" - das Hover bild
Code: Alles auswählen
<div id="menu_parent" style="width: 48px; border: 0px; margin-left: 0px; margin-top:0px;"><a href="#" target="_self" onMouseover="bild_einblenden('bild0'); return true" onMouseout="bild_ausblenden('bild0'); return true"><img src="../_gfx/nav_01_news_off.gif" width="48" height="29" border="0" name="bild0"></a></div>Code: Alles auswählen
<div id="menu_child" style="position: absolute; visibility: hidden; background: #FFFFEE; margin-left: 0px; margin-top: -3px;">
<a onMouseover="bild_einblenden('bild0'); return true" onMouseout="bild_ausblenden('bild0'); return true" class="navigation" href="#">Aktuelle News</a>
<a onMouseover="bild_einblenden('bild0'); return true" onMouseout="bild_ausblenden('bild0'); return true" class="navigation" href="#">Newsarchiv</a>
</div>Code: Alles auswählen
<script type="text/javascript">
at_attach("menu_parent", "menu_child", "hover", "y", "pointer");
at_attach02("menu_parent02", "menu_child02", "hover", "y", "pointer");
at_attach03("menu_parent03", "menu_child03", "hover", "y", "pointer");
at_attach04("menu_parent04", "menu_child04", "hover", "y", "pointer");
at_attach05("menu_parent05", "menu_child05", "hover", "y", "pointer");
at_attach06("menu_parent06", "menu_child06", "hover", "y", "pointer");
</script>last but not least, das JS file:
Code: Alles auswählen
// <script>
// Copyright (C) 2005 Ilya S. Lyubinskiy. All rights reserved.
// Technical support: http://www.php-development.ru/
//
// changes by Daniel Schlitt, Mediastinum - 07/17/2006
// ----- Popup Control ---------------------------------------------------------
function at_display(x)
{
win = window.open();
for (var i in x) win.document.write(i+' = '+x[i]+'<br>');
}
// ----- Show Aux -----
function at_show_aux(parent, child)
{
var p = document.getElementById(parent);
var c = document.getElementById(child);
var top = (c["at_position"] == "y") ? p.offsetHeight+2 : 0;
var left = (c["at_position"] == "x") ? p.offsetWidth +2 : 0;
for (; p; p = p.offsetParent)
{
top += p.offsetTop;
left += p.offsetLeft;
}
c.style.position = "absolute";
c.style.top = top +'px';
c.style.left = left+'px';
c.style.visibility = "visible";
}
// ----- Show -----
function at_show()
{
p = document.getElementById(this["at_parent"]);
c = document.getElementById(this["at_child" ]);
at_show_aux(p.id, c.id);
clearTimeout(c["at_timeout"]);
}
// ----- Hide -----
function at_hide()
{
c = document.getElementById(this["at_child"]);
c["at_timeout"] = setTimeout("document.getElementById('"+c.id+"').style.visibility = 'hidden'", 50);
}
// ----- Click -----
function at_click()
{
p = document.getElementById(this["at_parent"]);
c = document.getElementById(this["at_child" ]);
if (c.style.visibility != "visible") at_show_aux(p.id, c.id);
else c.style.visibility = "hidden";
return false;
}
// ----- Attach -----
// PARAMETERS:
// parent - id of visible html element
// child - id of invisible html element that will be dropdowned
// showtype - "click" = you should click the parent to show/hide the child
// "hover" = you should place the mouse over the parent to show
// the child
// position - "x" = the child is displayed to the right of the parent
// "y" = the child is displayed below the parent
// cursor - Omit to use default cursor or check any CSS manual for possible
// values of this field
function at_attach(parent, child, showtype, position, cursor)
{
p = document.getElementById(parent);
c = document.getElementById(child);
p["at_parent"] = p.id;
c["at_parent"] = p.id;
p["at_child"] = c.id;
c["at_child"] = c.id;
p["at_position"] = position;
c["at_position"] = position;
c.style.position = "absolute";
c.style.visibility = "hidden";
if (cursor != undefined) p.style.cursor = cursor;
switch (showtype)
{
case "click":
p.onclick = at_click;
p.onmouseout = at_hide;
c.onmouseover = at_show;
c.onmouseout = at_hide;
break;
case "hover":
p.onmouseover = at_show;
p.onmouseout = at_hide;
c.onmouseover = at_show;
c.onmouseout = at_hide;
break;
}
}Danke, lg kahuna