Horizontale Navigation für 2.Ebene/Unterkategorieren

logon281 · February 7, 2010, 7:26pm

Hallo,

die Unterkategorien bei der horizontalen Hauptnavigation öffnen sich ja vertikal untereinander. Ich möchte, dass sich das Untermenue aber horizontal öffnet. Über css mit der float:left Eigenschaft hats nicht gefunzt. Das liegt wahrscheinlich daran, dass das dropdown über javascript gesteuert wird ? Habe schon die oxid.js durchsucht finde aber nirgends die Möglichkeit auf das Menü einzuwirken. Hat jemand Erfahrung wie ich das lösen könnte ?

logon281 · February 9, 2010, 5:22pm

habs jetzt selber gelöst, für alle die auch gerne in der zweiten Menüebene eine horizontale Nav wollen:

ich habe im header.tpl folgende Änderungen vorgenommen:

Original:

[{if $oView->showTopCatNavigation()}]
<div class=“bar categories”>
<a id=“test_HeaderHome” href="[{ oxgetseourl ident=$oViewConf->getHomeLink() }]" class=“fixed”>[{ oxmultilang ident=“INC_HEADER_HOME” }]</a>
<ul class=“menue horizontal” id=“mn.categories” >

geändert:

<div class=“bar categories”>
<a id=“test_HeaderHome” href="[{ oxgetseourl ident=$oViewConf->getHomeLink() }]" class=“fixed”>[{ oxmultilang ident=“INC_HEADER_HOME” }]</a>
<ul id=“navigation” >

und auch die zweite ul geändert von / in:

Damit schaltet man die javascript-Funktion des Dropdown-Menüs aus. Dann mit CSS das Layout anpassen:

z.B.

ul#navigation { float:left; list-style:none; padding:0; margin:0; margin-top:5px; background:transparent; }
#navigation li { float:left; }
#navigation a { color:#333; text-decoration:none; display:block; padding:0px 5px; border-left:1px dotted #990000; }
#navigation a:hover { color:#990000; }
#navigation li li { float:left; }
#navigation li li a { border:none; }
#navigation li li a:hover { color:#990000; }
#navigation ul { list-style:none; position: absolute; left: -9999px;}
#navigation li:hover ul { left: auto; padding-top:5px; margin-left:-20px; }

In das CSS-Style für den IE7:

#navigation a { min-height: 0; }

html #navigation a { height:1px; }
#navigation li:hover { text-indent:0; }
#navigation li:hover ul { left: auto; padding-top:5px; margin-left:-15px; }

Funktioniert im IE6 natürlich nicht, aber da kann man ja auch immer noch die Hauptmenüpunkte anklicken um an die Untermenüs zu kommen bzw. über Javascript lösen.

shopler · April 19, 2010, 9:31pm

Das hat soweit schon mal super funktioniert.
Ich habe jetzt nur das Problem, dass ich die Unternavigation in einer zweiten Zeile platzieren möchten.
Geht das? Ich füge mal besser ein Bild an, dass erklärt es besser.

Bei mir sollte die obere Navigation mal so aussehen:

vielen Dank für euer Hilfe

claro · April 22, 2013, 4:17pm

Hallo zusammen
ich wollte die 1. Unterkategorieebene auch in einer 2. Zeile im Header anzeigen lassen.

In OXID PE 4.7.4 hab ich das mit folgenden Änderungen hinbekommen:

hier http://users.tpg.com.au/j_birch/plugins/superfish/#download die superfish-navbar.css herunterladen und unter “[I]shopverzeichnis[/I]\out[I]custom[/I]\src\css\libs” abspeichern.

In der categorylist.tpl (tpl/widget/header) folgendes ändern/hinzufügen:

Ab Zeile 1 :


[{oxscript include="js/widgets/oxtopmenu.js" priority=10 }]
[{oxscript add="$('#navigation').oxTopMenu();"}]
[{oxstyle include="css/libs/superfish.css"}]
[{oxstyle include="css/libs/superfish-navbar.css"}]<!-- css für 2. horizontale Navigationsebene -->
[{assign var="homeSelected" value="false"}]
[{if $oViewConf->getTopActionClassName() == 'start'}]
    [{assign var="homeSelected" value="true"}]
[{/if}]
[{assign var="oxcmp_categories" value=$oxcmp_categories }]
<ul id="navigation-meine" class="sf-menu sf-navbar" > <!-- Start Navigationsmenü horizontal -->

Ab ca. Zeile 50:


        [{if $iCatCnt <= $oView->getTopNavigationCatCnt()}]
            <li [{if $homeSelected == 'false' && $ocat->expanded}]class="current"[{/if}]>
<!-- root Kategorien--> <a  [{if $homeSelected == 'false' && $ocat->expanded}]class="current"[{/if}] href="[{$ocat->getLink()}]">[{$ocat->oxcategories__oxtitle->value}][{ if $oView->showCategoryArticlesCount() && ($ocat->getNrOfArticles() > 0) }] ([{$ocat->getNrOfArticles()}])[{/if}]</a>
 <!-- UnterKategorien1-->  [{if $ocat->getSubCats()}]
                    <ul>
                    [{foreach from=$ocat->getSubCats() item=osubcat1 key=subcatkey1 name=SubCat1}]
                        [{if $osubcat1->getIsVisible() }]
                            [{foreach from=$osubcat1->getContentCats() item=ocont name=MoreCms}]
                                <li><a href="[{$ocont->getLink()}]">[{$ocont->oxcontents__oxtitle->value}]</a></li>
                            [{/foreach}]
                            [{if $osubcat1->getIsVisible() }]
                                <li [{if $homeSelected == 'false' && $osubcat1->expanded}]class="current"[{/if}] ><a [{if $homeSelected == 'false' && $osubcat1->expanded}]class="current"[{/if}] href="[{$osubcat1->getLink()}]">[{$osubcat1->oxcategories__oxtitle->value}] [{ if $oView->showCategoryArticlesCount() && ($osubcat1->getNrOfArticles() > 0)}] ([{$osubcat1->getNrOfArticles()}])[{/if}]</a>
<!-- UnterKategorien2-->  [{if $osubcat1->getSubCats()}]
                    <ul>
                    [{foreach from=$osubcat1->getSubCats() item=osubcat2 key=subcatkey2 name=SubCat2}]
                        [{if $osubcat2->getIsVisible() }]
                            [{foreach from=$osubcat2->getContentCats() item=ocont name=MoreCms}]
                                <li><a href="[{$ocont->getLink()}]">[{$ocont->oxcontents__oxtitle->value}]</a></li>
                            [{/foreach}]
                            [{if $osubcat2->getIsVisible() }]
                                <li [{if $homeSelected == 'false' && $osubcat2->expanded}]class="current"[{/if}] ><a [{if $homeSelected == 'false' && $osubcat2->expanded}]class="current"[{/if}] href="[{$osubcat2->getLink()}]">[{$osubcat2->oxcategories__oxtitle->value}] [{ if $oView->showCategoryArticlesCount() && ($osubcat2->getNrOfArticles() > 0)}] ([{$osubcat2->getNrOfArticles()}])[{/if}]</a>
  <!-- UnterKategorie3-->  [{if $osubcat2->getSubCats()}]
                    <ul>
                    [{foreach from=$osubcat2->getSubCats() item=osubcat3 key=subcatkey3 name=SubCat3}]
                        [{if $osubcat3->getIsVisible() }]
                            [{foreach from=$osubcat3->getContentCats() item=ocont name=MoreCms}]
                                <li><a href="[{$ocont->getLink()}]">[{$ocont->oxcontents__oxtitle->value}]</a></li>
                            [{/foreach}]
                            [{if $osubcat3->getIsVisible() }]
                                <li [{if $homeSelected == 'false' && $osubcat3->expanded}]class="current"[{/if}] ><a [{if $homeSelected == 'false' && $osubcat3->expanded}]class="current"[{/if}] href="[{$osubcat3->getLink()}]">[{$osubcat3->oxcategories__oxtitle->value}] [{ if $oView->showCategoryArticlesCount() && ($osubcat3->getNrOfArticles() > 0)}] ([{$osubcat3->getNrOfArticles()}])[{/if}]</a></li>
                            [{/if}]
                        [{/if}]
                    [{/foreach}]
                   </ul>
                [{/if}]  <!-- ENDE UnterKategorie3-->
                                </li>
                            [{/if}]
                        [{/if}]
                    [{/foreach}]
                   </ul>
                [{/if}] <!-- ENDE UnterKategorie2-->                                
                                </li>
                            [{/if}]
                        [{/if}]
                    [{/foreach}]
                   </ul>
                [{/if}] <!-- ENDE UnterKategorie1-->
            </li>
        [{else}]

nun noch in der oxid.css, superfish.css und superfish-navbar.css das Styling wie gewünscht anpassen…

Gruss
claudia

Marcello_Martin · November 8, 2014, 4:28pm

[QUOTE=logon281;24443]habs jetzt selber gelöst, für alle die auch gerne in der zweiten Menüebene eine horizontale Nav wollen:

ich habe im header.tpl folgende Änderungen vorgenommen:

Original:

[{if $oView->showTopCatNavigation()}]
<div class=“bar categories”>
<a id=“test_HeaderHome” href="[{ oxgetseourl ident=$oViewConf->getHomeLink() }]" class=“fixed”>[{ oxmultilang ident=“INC_HEADER_HOME” }]</a>
<ul class=“menue horizontal” id=“mn.categories” >

geändert:

<div class=“bar categories”>
<a id=“test_HeaderHome” href="[{ oxgetseourl ident=$oViewConf->getHomeLink() }]" class=“fixed”>[{ oxmultilang ident=“INC_HEADER_HOME” }]</a>
<ul id=“navigation” >

und auch die zweite ul geändert von / in:

Damit schaltet man die javascript-Funktion des Dropdown-Menüs aus. Dann mit CSS das Layout anpassen:

z.B.

ul#navigation { float:left; list-style:none; padding:0; margin:0; margin-top:5px; background:transparent; }
#navigation li { float:left; }
#navigation a { color:#333; text-decoration:none; display:block; padding:0px 5px; border-left:1px dotted #990000; }
#navigation a:hover { color:#990000; }
#navigation li li { float:left; }
#navigation li li a { border:none; }
#navigation li li a:hover { color:#990000; }
#navigation ul { list-style:none; position: absolute; left: -9999px;}
#navigation li:hover ul { left: auto; padding-top:5px; margin-left:-20px; }

In das CSS-Style für den IE7:

#navigation a { min-height: 0; }

html #navigation a { height:1px; }
#navigation li:hover { text-indent:0; }
#navigation li:hover ul { left: auto; padding-top:5px; margin-left:-15px; }

Funktioniert im IE6 natürlich nicht, aber da kann man ja auch immer noch die Hauptmenüpunkte anklicken um an die Untermenüs zu kommen bzw. über Javascript lösen.[/QUOTE]

Hab Community Edition 4.9.0 .

Was muss man dort ändern?