Hallo,
heute möchte ich das [B][U]zweiter OXCss3Menu [/U][/B] (das erste CSS3Menu ist hier in Seite 3 zu finden) aus dem Hause [B][U]OXID-Design[/U][/B] für die Community zu verfügung stellen.
Das zweiter OXCss3Menu ist exakt das gleicher Menu was auch Oxid mit Azure liefert allerdings funktioniert unsere Menu ohne javascript, ist viel schneller und leichter zu Modifizieren. Folgender funktionen:
[B]
1.) Anzahl der Kategorien, die oben angezeigt werden (weitere Kategorien werden unter “mehr” aufgelistet)
2.) Aktive Kategorie beim Start (Diese Kategorie wird in der Kategorien-Navigation “ausgeklappt” angezeigt)
[/B]
werden voll unterstützt. Ich habe leider keinen DEMO Link aber Menu wurde von uns getestet und funktioniert einwandfrei.
Erstelle [B]in out/azure/tpl/widget/header/OXCss3Menu.tpl[/B] Datei mit dieser Inhalt:
[{assign var="homeSelected" value="false"}]
[{if $oView->getClassName() == 'start'}]
[{assign var="homeSelected" value="true"}]
[{/if}]
<ul id="OXCss3Menu">
<li [{if $homeSelected == 'true' }]class="current"[{/if}]><a [{if $homeSelected == 'true'}]class="current"[{/if}] href="[{$oViewConf->getHomeLink()}]">[{oxmultilang ident="TOP_CATEGORIES_HOME"}]</a></li>
[{assign var="iAllCatCount" value=$oxcmp_categories|count }]
[{if $iAllCatCount > $oView->getTopNavigationCatCnt() }]
[{assign var="bHasMore" value="true"}]
[{assign var="iCatCnt" value="1"}]
[{else}]
[{assign var="bHasMore" value="false"}]
[{assign var="iCatCnt" value="0"}]
[{/if}]
[{foreach from=$oxcmp_categories item=ocat key=catkey name=root}]
[{if $ocat->getIsVisible() }]
[{foreach from=$ocat->getContentCats() item=oTopCont name=MoreTopCms}]
[{assign var="iCatCnt" value=$iCatCnt+1 }]
[{assign var="iAllCatCount" value=$iAllCatCount+1 }]
[{if !$bHasMore && ($iCatCnt >= $oView->getTopNavigationCatCnt()) }]
[{assign var="bHasMore" value="true"}]
[{assign var="iCatCnt" value=$iCatCnt+1}]
[{/if}]
[{if $iCatCnt <= $oView->getTopNavigationCatCnt()}]
<li><a href="[{$oTopCont->getLink()}]">[{$oTopCont->oxcontents__oxtitle->value}]</a></li>
[{else}]
[{capture append="moreLinks"}]
<li><a href="[{$oTopCont->getLink()}]">[{$oTopCont->oxcontents__oxtitle->value}]</a></li>
[{/capture}]
[{/if}]
[{/foreach}]
[{assign var="iCatCnt" value=$iCatCnt+1 }]
[{if !$bHasMore && ($iCatCnt >= $oView->getTopNavigationCatCnt()) }]
[{assign var="bHasMore" value="true"}]
[{assign var="iCatCnt" value=$iCatCnt+1}]
[{/if}]
[{if $iCatCnt <= $oView->getTopNavigationCatCnt()}]
<li [{if $homeSelected == 'false' && $ocat->expanded}]class="current"[{/if}]>
<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>
[{if $ocat->getSubCats()}]
<div class="dropdown_columns">
<ul>
[{foreach from=$ocat->getSubCats() item=osubcat key=subcatkey name=SubCat}]
[{if $osubcat->getIsVisible() }]
[{foreach from=$osubcat->getContentCats() item=ocont name=MoreCms}]
<li><a href="[{$ocont->getLink()}]">[{$ocont->oxcontents__oxtitle->value}]</a></li>
[{/foreach}]
[{if $osubcat->getIsVisible() }]
<li [{if $homeSelected == 'false' && $osubcat->expanded}]class="current"[{/if}] ><a [{if $homeSelected == 'false' && $osubcat->expanded}]class="current"[{/if}] href="[{$osubcat->getLink()}]">[{$osubcat->oxcategories__oxtitle->value}] [{ if $oView->showCategoryArticlesCount() && ($osubcat->getNrOfArticles() > 0)}] ([{$osubcat->getNrOfArticles()}])[{/if}]</a></li>
[{/if}]
[{/if}]
[{/foreach}]
</ul>
</div>
[{/if}]
</li>
[{else}]
[{capture append="moreLinks"}]
<li [{if $homeSelected == 'false' && $ocat->expanded}]class="current"[{/if}]>
<a href="[{$ocat->getLink()}]">[{$ocat->oxcategories__oxtitle->value}][{ if $oView->showCategoryArticlesCount() && ($ocat->getNrOfArticles() > 0)}] ([{$ocat->getNrOfArticles()}])[{/if}]</a>
</li>
[{/capture}]
[{/if}]
[{/if}]
[{/foreach}]
[{if $iAllCatCount > $oView->getTopNavigationCatCnt()}]
<li>
[{assign var="_catMoreUrl" value=$oView->getCatMoreUrl()}]
<a href="[{ oxgetseourl ident="`$_catMoreUrl`&cl=alist" }]">[{ oxmultilang ident="TOP_CATEGORIES_MORE" }]</a>
<div class="dropdown_columns align_left">
<ul>
[{foreach from=$moreLinks item=link}]
[{$link}]
[{/foreach}]
</ul>
</div>
</li>
[{/if}]
</ul>
in out/azure/tpl/layout/header.tpl
suchen:
[{include file="widget/header/topcategories.tpl"}]
mit dieser ersetzen:
[{include file="widget/header/OXCss3Menu.tpl"}]
in [B][U]out/azure/src/css/oxid.css[/U][/B] ganz oben einfügen:
/*Start OXCss3Menu */
#OXCss3Menu {
list-style:none;
width:938px;
clear:both;
height:38px;
padding:0;
background-color:transparent;
margin: 0;
position:relative;
top:40px;
border-radius:5px;
border: 1px solid #d4d4d4;
border-top:#DADADA 1px solid;
background: #BFBFBF url(../../img/menu-bg.gif) repeat-x center scroll;
box-shadow: 0 1px 1px rgba(0,0,0,2), inset 0 1px rgba(255,255,255,0.3), inset 0 40px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
-o-box-shadow: 0 1px 1px rgba(0,0,0,2), inset 0 1px rgba(255,255,255,0.3), inset 0 40px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,2), inset 0 1px rgba(255,255,255,0.3), inset 0 40px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
-moz-box-shadow: 0 1px 1px rgba(0,0,0,2), inset 0 1px rgba(255,255,255,0.3), inset 0 40px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
}
#OXCss3Menu li {
float:left;
display:block;
text-align:center;
position:relative;
padding: 0;
height:39px;
line-height:20px;
min-width:60px;
border-right:1px solid #CCC;
}
#OXCss3Menu li:hover,#OXCss3Menu .current{
background: #5b5b5b url(../../img/menu-act.gif) repeat-x center scroll;
color:#eee;
}
#OXCss3Menu li a {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color: #000;
display:block;
outline:0;
text-decoration:none;
padding: 10px 17px 2px 17px;
height:19px;
line-height:20px;
}
#OXCss3Menu li:hover a {
color:#eee;
}
.dropdown_columns{
padding:10px 15px 20px 15px;
margin:8px 0 0 1px;
float:left;
position:absolute;
left:-999em; /* Hides the drop down */
text-align:left;
border-top:none;
z-index:20000;
background:#282828;
border-radius: 0 0 5px 5px;
width: 182px
}
#OXCss3Menu li:hover .dropdown_columns {
left:-1px;
top:auto;
z-index:999;
}
#OXCss3Menu p, #OXCss3Menu div{
color:#eee;
}
#OXCss3Menu p {
line-height:18px;
margin:0 0 10px 0;
}
#OXCss3Menu li:hover div a {
font-size:13px;
color:#eee;
padding: 3px 5px 4px 26px;
text-align:left;
width:157px;
background: url(../../img/subnav.png) no-repeat left;
}
#OXCss3Menu li:hover div a:hover {
color:#FF0000;
background:transparent url(../../img/subnav.png) no-repeat left;
}
#OXCss3Menu li ul {
list-style:none;
padding:0;
margin:0;
}
#OXCss3Menu li ul li {
position:relative;
border:none;
margin: 0;
padding:3px 0;
float:none;
width:157px;
line-height:18px;
height:18px;
}
#OXCss3Menu li ul li:hover {
background:none;
border:none;
padding:3px 0;
margin:0;
}
/*Ende OXCss3Menu */
noch das subnav.png. Mit rechtsklick speichern unter…
[B]out/azure/img/subnav.png[/B]
[B][U]subnav.png[/U][/B]