Seitbar Navigation mit Mousehover

Deutsches Forum
1

Hallo Community,

ich brauche dringend Hilfe bei der Mouseover Funktion für die Sidebarnavigation. Ich habe dafür den Code der categoriestree.tpl genommen und mit onmouseover und onmouseout die anzuzeigenden Unterkategorien in ein div gepackt.

Das Problem ist, dass in dem div nicht die Unterkategorien der Kategorie erscheinen, sondern die der aktiv geöffneten Kategorie. Folglich erscheint nichts wenn man auf der Startseite ist.

Jmd. einen Tip wie ich das hinbekomme?


<li class="[{if !$oContentCat && $act && $act->getId()==$_cat->getId() }]active[{elseif $_cat->expanded}]exp[{/if}][{if !$_cat->hasVisibleSubCats}] end[{/if}]">
                
<a href="[{$_cat->getLink()}]" onmouseover="document.getElementById('subcatZ').style.display = 'block';" onmouseout="document.getElementById('subcatZ').style.display = 'none';"><i></i>[{$_cat->oxcategories__oxtitle->value}] [{ if $oView->showCategoryArticlesCount() && ($_cat->getNrOfArticles() > 0) }] ([{$_cat->getNrOfArticles()}])[{/if}]</a>
                    
[{if $_cat->getSubCats() && $_cat->expanded}]
<ul>[{fun name="tree" categories=$_cat->getSubCats() }]</ul>
                        
<div id="subcatZ" style="display: none; position: absolute; left: 100px; z-index: 9999;">
<ul>[{fun name="tree" categories=$_cat->getSubCats() }]</ul>
</div>
[{/if}]
                
</li>

MfG
Marvin

EDIT:
Ich meinte natürlich Sidebar :smiley:

2

Wirklich keine eine Idee?

3

Eine Element ID muss einmalig vergeben sein, sprich es dürfen keine 10 div Container mit der ID “subcatZ” sein.
http://www.html-seminar.de/class_und_id.htm

Wenn JavaScript irgendwelche Elemente im Quelltext sucht, sucht es von oben nach unten. Und wenn es ein Element mit der ID “subcatZ” sucht, sind natürlich die Unterkategorien der 1. Kategorie als erstes im Weg, daher wird auch immer der erste Kasten eingeblendet.

bei solchen Fällen nehme ich immer die oxId mit in die ID auf.

4

Und wieder mal ist es einfacher als man es sich vorstellt.
Wenn ich subcatZ durch [{$_cat->oxcategories__oxtitle->value}] ersetze funktioniert es.

Vielen vielen dank, wie gesagt: Du fällst echt positiv auf :wink:

5

Eine weitere Frage:

Ist es nicht möglich, dass das neue Div beim Mouseover geöffnet bleibt?

6

möglich ist alles, aber erläutere mal etwas näher woher die neue Div kommt und was drin steht

7

Habs mal in JSFiddle geschoben, um Platz zu sparen.

Also normalerweise mach ich das mit Div’s so:
http://jsfiddle.net/EfEB9/

Das Ende des Div’s mit der Mouseover-Funktion einfach nach dem Inhalt setzen. So kann ich mit der Maus auch auf auf das “Rote” und es bleibt geöffnet.

In der neuen Div steht nur


<ul>[{fun name="tree" categories=$_cat->getSubCats() }]</ul>

So ist der gesamte Code:
http://jsfiddle.net/Ug43y/

Folglich sollte man das “</a>” hinter den Inhalt stellen, da die Mouseover Funktion darin liegt.
Logischerweise geht das nicht, da sonst alles als “Anker” aufgeführt führt.

8

du kannst die js events in <li> packen und die div mit den Unterkategorien auch noch mit in <li> reinpacken

9

blöde Frage, warum machst du das nicht mit reinem css? Ich finde die superfish-lösung im azure-template schon nicht besonders gelungen und umständlich und css ist im handling einfacher.

10

Ich wollte es mit möglichst wenigen Veränderungen umsetzen. Hat nun auch alles geklappt und durch ein paar CSS Anpassungen, sieht es nun wirklich ansprechend aus.