Huhu,
bastel an unserer neuen website und hab dabei folgendes Menü gebaut ( nur für startseite):
http://web9.cpsrv01.agentur2c.net/
so spart man sich nen nivoslider etc und hat trotzdem nen “aha” effekt 
[B]Jetzt die Frage: Besteht da Interesse für ein Tutorial?[/B]
Gerne auch Kritik / Anregungen 
keiner? auch gut ^^ spar ick mir die arbeit
find ich echt schick dat Dingens!
na klar, her mit dem Tutorial Schaut gut aus!
Sehr gern
Gruß
Schaut mal richtig genial aus - Keine Frage … Ach komm, die meiste Arbeit hast Du dir doch eh schon gemacht, da wäre so ein Tut Tut eine echt feine Sache!!!
Persönlich würde ich das Menü nach unten hin öffnen. alte Macht der Gewohnheit und meine Erwartungshaltung beim überfliegen mit der Maus von Menüleisten.
Sooo anbei die Anleitung für das Startmenü (image menü) + dem neuen untermenü (das menü das angezeigt wird, wenn man nicht auf der startseite ist)
Benötigte Scripte:
http://web9.cpsrv01.agentur2c.net/out/azure/src/js/libs/jquery.easing.1.3.js
http://web9.cpsrv01.agentur2c.net/out/azure/src/js/libs/jquery.bgImageMenu.js
[B]Die Schritte[/B]
[B]1. neue Datei namens StartMenu.tpl in “/out/azure/tpl/widget” mit folgendem Inhalt erstellen:[/B]
[{oxscript include="js/libs/jquery.easing.1.3.js"}]
[{oxscript include="js/libs/jquery.bgImageMenu.js"}]
<div id="sbi_container" class="sbi_container" style="width:960px;height:568px;">
[{foreach from=$oxcmp_categories item=ocat key=catkey name=root}]
[{if $ocat->getIsVisible() }]
<div class="sbi_panel" data-bg="[{$ocat->getThumbUrl()}]">
<a href="[{$ocat->getLink()}]" class="sbi_label">[{$ocat->oxcategories__oxtitle->value}]</a>
<div class="sbi_content">
<ul>
[{foreach from=$ocat->getSubCats() item=osubcat key=subcatkey name=SubCat}]
[{if $osubcat->getIsVisible() }]
<li><a href="[{$osubcat->getLink()}]">[{$osubcat->oxcategories__oxtitle->value}]</a></li>
[{/if}]
[{/foreach}]
</ul>
</div>
</div>
[{/if}]
[{/foreach}]
</div>
<ul id="oe_menu" class="oe_menu">
[{foreach from=$oxcmp_categories item=ocat key=catkey name=root}]
[{if $ocat->getIsVisible() }]
<li><a href="[{$ocat->getLink()}]">[{$ocat->oxcategories__oxtitle->value}]</a>
<div>
[{foreach from=$ocat->getSubCats() item=osubcat key=subcatkey name=SubCat}]
[{if $osubcat->getIsVisible() }]
<ul>
<li class="oe_heading">[{$osubcat->oxcategories__oxtitle->value}]</li>
[{foreach from=$osubcat->getSubCats() item=osubcat2 key=subcatkey name=SubCat}]
[{if $osubcat2->getIsVisible() }]
<li><a href="[{$osubcat2->getLink()}]">[{$osubcat2->oxcategories__oxtitle->value}]</a></li>
[{/if}]
[{/foreach}]
</ul>
[{/if}]
[{/foreach}]
</div>
</li>
[{/if}]
[{/foreach}]
</ul>
[B]3. in der “/out/azure/tpl/header.tpl” den eintrag des Menüs suchen (topcategories.tpl glaube ich) und ersetzen mit:[/B]
[{if $oView->getClassName() == 'start'}]
[{include file="widget/StartMenu.tpl"}]
[{else}]
[{include file="widget/MenuNew.tpl"}]
[{oxid_include_dynamic file="widget/minibasket/minibasket.tpl"}]
[{oxid_include_dynamic file="widget/minibasket/minibasketmodal.tpl"}]
[{include file="widget/header/search.tpl"}]
[{/if}]
[B]4. eine datei zum initalisieren aller javascript dateien erstellen. in meinem fall ist dies /out/azure/src/js/libs/init-all.js mit folgendem inhalt:[/B]
$(document).ready(function()
{
initEvents();
});
// start after user input >= 3 chars
var startSuggest = 3;
/* Init basic events and effects */
function initEvents()
{
initStartMenu();
initBottomMenu();
initMenuNew();
initAutoSuggest();
}
function initStartMenu() {
$('#sbi_container').bgImageMenu({
defaultBg : '/out/azure/img/default.jpg',
border : 1,
height : 568,
width : 960,
type : {
mode : 'seqHorizontalSlide',
speed : 250,
easing : 'jswing',
seqfactor : 100
}
});
}
function initBottomMenu() {
$('#sti-menu').iconmenu();
}
function initMenuNew() {
var $oe_menu = $('#oe_menu');
var $oe_menu_items = $oe_menu.children('li');
$oe_menu_items.bind('mouseenter',function(){
var $this = $(this);
$this.addClass('slided selected');
$this.children('div').css('z-index','9999').stop(true,true).slideDown(200,function(){
$oe_menu_items.not('.slided').children('div').hide();
$this.removeClass('slided');
});
}).bind('mouseleave',function(){
var $this = $(this);
$this.removeClass('selected').children('div').css('z-index','1');
});
$oe_menu.bind('mouseenter',function(){
var $this = $(this);
$this.addClass('hovered');
}).bind('mouseleave',function(){
var $this = $(this);
$this.removeClass('hovered');
$oe_menu_items.children('div').hide();
})
}
function initAutoSuggest()
{
$('#searchparam').bind('keyup', function() { autoSuggest(); } );
$('#searchparam').focus(function() { $('#searchparam').val(" "); } );
$('#searchparam').blur(function() { $('#searchparam').val("Suchbegriff eingeben"); } );
$('body').click(function() { $('#results').slideUp(); } );
}
[{oxscript include='js/libs/init-all.js'}]
[B]… weiter im nächsten post[/B]
[B]6. noch folgende css änderungen in der oxid.css vornehmen:[/B]
/*Start Menu*/
.sbi_container{
position:relative;
margin: 0px 0px 20px 0px;
overflow:hidden;
padding:0px;
background:#000;
-moz-box-shadow:1px 1px 5px #000;
-webkit-box-shadow:1px 1px 5px #000;
box-shadow:1px 1px 5px #000;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px 4px 4px 4px;
clear:both;
}
.sbi_panel{
float:left;
position:relative;
height:100%;
overflow:hidden;
}
.sbi_panel_img{
position:absolute;
height:100%;
width:960px;
top:0px;
background-repeat:no-repeat;
}
.sbi_label{
display:block;
width:100%;
background:#000;
text-align:center;
font-size:20px;
height:40px;
line-height:40px;
position:absolute;
bottom:50px;
left:0px;
opacity:0.7;
cursor:pointer;
text-shadow:0px 0px 1px #000;
text-decoration:none;
color:#fff;
outline:none;
}
.sbi_label:hover{
opacity:0.9;
text-decoration:none;
}
.sbi_content{
position:absolute;
border-top:2px solid #000;
bottom:90px;
left:0px;
width:100%;
background:transparent url("/out/azure/img/pattern.png") repeat top left;
display:none;
overflow:hidden;
text-decoration:none;
}
.sbi_content li{
list-style:none;
}
.sbi_content ul{
padding:10px;
text-decoration:none;
list-style:none;
}
.sbi_content ul a{
display:block;
color:#f0f0f0;
font-size:16px;
padding:4px 6px 4px 14px;
background:transparent url("/out/azure/img/triangle.png") no-repeat 3px 50%;
opacity:0.9;
text-decoration:none;
}
.sbi_content ul a:hover{
background-color:#000;
color:#fff;
-moz-box-shadow:1px 1px 5px #000;
-webkit-box-shadow:1px 1px 5px #000;
box-shadow:1px 1px 5px #000;
text-decoration:none;
}
/* Bottom Menu Startseite */
.sti-menu{
width:1010px;
position:relative;
margin:40px auto 0 auto;
list-style:none;
font-family: 'Wire One', arial, serif;
}
.sti-menu li{
float:left;
width:200px;
height:250px;
margin-right: 50px;
list-style:none;
}
.sti-menu li a{
display:block;
overflow:hidden;
background:#fff;
text-align:center;
height:100%;
width:100%;
position:relative;
-moz-box-shadow:1px 1px 2px #ddd;
-webkit-box-shadow:1px 1px 2px #ddd;
box-shadow:1px 1px 2px #ddd;
border-radius:4px 4px 4px 4px;
-moz-box-shadow:1px 1px 5px #000;
-webkit-box-shadow:1px 1px 5px #000;
box-shadow:1px 1px 5px #000;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}
.sti-menu li a h2{
color:#000;
font-size:30px;
font-weight:bold;
text-transform:uppercase;
line-height:30px;
position:absolute;
padding:10px;
width:180px;
top:140px;
left:0px;
text-shadow: 0px 1px 1px black;
}
.sti-menu li a h3{
font-family: Baskerville, "Hoefler Text", Garamond, "Times New Roman", serif;
font-size:18px;
font-style:italic;
color: #111;
position:absolute;
top:200px;
left:0px;
width:180px;
padding:10px;
}
.sti-icon{
width:100px;
height:100px;
position:absolute;
background-position:top left;
background-repeat:no-repeat;
background-color:transparent;
left:50px;
top:30px;
}
.sti-icon-care{
background-image:url("/out/azure/img/care.png");
}
.sti-icon-alternative{
background-image:url("/out/azure/img/alternative.png");
}
.sti-icon-family{
background-image:url("/out/azure/img/family.png");
}
.sti-icon-info{
background-image:url("/out/azure/img/info.png");
}
.sti-icon-technology{
background-image:url("/out/azure/img/technology.png");
}
/*Neues HauptMenu */
.oe_overlay{
background:#000;
opacity:0;
position:fixed;
top:0px;
left:0px;
width:100%;
height:100%;
}
ul.oe_menu{
list-style:none;
position:relative;
margin:30px 0px 0px 40px;
width:560px;
float:left;
clear:both;
list-style:none;
}
ul.oe_menu > li{
width:112px;
height:101px;
padding-bottom:2px;
float:left;
position:relative;
list-style:none;
}
ul.oe_menu > li > a{
display:block;
background-color:#101010;
color:#aaa;
text-decoration:none;
font-weight:bold;
font-size:12px;
width:90px;
height:80px;
padding:10px;
margin:1px;
text-shadow:0px 0px 1px #000;
opacity:0.8;
list-style:none;
}
ul.oe_menu > li > a:hover,
ul.oe_menu > li.selected > a{
background:#fff;
color:#101010;
opacity:1.0;
list-style:none;
}
.oe_wrapper ul.hovered > li > a{
background:#fff;
text-shadow:0px 0px 1px #FFF;
list-style:none;
}
ul.oe_menu div{
position:absolute;
top:103px;
left:1px;
background:#fff;
width:498px;
height:180px;
padding:30px;
display:none;
}
ul.oe_menu div ul li a{
text-decoration:none;
color:#222;
padding:2px 2px 2px 4px;
margin:2px;
display:block;
font-size:12px;
list-style:none;
}
ul.oe_menu div ul.oe_full{
width:100%;
list-style:none;
}
ul.oe_menu div ul li a:hover{
background:#000;
color:#fff;
list-style:none;
}
ul.oe_menu div ul li{
list-style:none;
}
ul.oe_menu li ul{
list-style:none;
float:left;
width: 150px;
margin-right:10px;
list-style:none;
}
li.oe_heading{
color:#aaa;
font-size:16px;
margin-bottom:10px;
padding-bottom:6px;
border-bottom:1px solid #ddd;
list-style:none;
}
Hatte ich doch glatt vergessen… bitte folgendem link folgen und lazyloading für kategorien aktivieren:
http://www.musterdenker.de/2009/09/oxid-eshop-enable-lazy-loading-for-categories/
[B]wichtig: die bilder werden den kategorien entnommen (thumbnails). bitte im azure template die größe der kategorie thumbnails auf 960*568 stellen und dann die gewünschten thumbnails hochladen. das zuerst angezeigte bild wird im CSS code festgelegt. einfach eins erstellen und hochladen und dann in der css ändern.[/B]
fertig ich denke ich sollte nichts vergessen haben
Hat jemand ausprobiert ob alles geht?
@ray: kannst du daraus nen wiki eintrag machen, für die dies nachbaun wollen?
hab noch ne kleine sache ins template eingebaut… die produktbilder werden jetzt via popeye angezeigt.
demo hier:
wie findet ihr das?
Superklasse!
Was auch sehr gut ist -> das Menü.
Wie bekommst Du dieses Listing der Unterkategorien hin?
Wenn ich z.b. bei Büromöbel mit der Maus drüber fahre, klappt das Menü nach unten aus
und die Unterkategorien “Arbeitsplatz” & “Konferenz” sind nebeneinander gelistet.
Auch sehr schick.
Arbeite erst seit wenigen Tagen mit Oxid (komme von OsCommerce - war höchste Zeit).
Grüße
Sirc
und die oldtimer (4.2.0) gehn mal wieder leer aus…
muß mich doch mal an das update machen
sirc: dieses menü ist in der anleitung mit dabei. einfach durchmachen dann haste das gleiche.
wobei ich in der zwischenzeit ne aktualisierte version hab. kann ich ja bei interesse zur verfügung stellen.
@domino: das menü kannst du auch bei dir einbauen. sieht halt nur anders aus… aber sollte einfach möglich sein
Hi caladan,
super, danke.
Ich werde das direkt ausprobieren.
Die aktualisierte Version ist natürlich auch interessant.
Gruß
sirc
achtung: hab die anleitung noch ergänzt um “lazy loading für kategorien”…dringend beachten.
Habe das tut abgearbeitet.
Das Startseiten-Menu, da wo die Grafiken der Kategorien eingeblendet werden, habe ich
weggelassen. Und in der header,tpl einfach nur
[{include file="widget/MenuNew.tpl"}]
integriert, bzw. den alten Eintrag ersetzt.
Bei MouseOver klappen aber die Kategorien nicht nach unten auf, sprich: es werden die Unterkategorien nicht angezeigt.
Woran kann das liegen?
Fehler beim Einbau schliese ich auas.
Gruß
Sirc
du brauchst auch den jss code aus der init-all.js
sprich den part:
function initMenuNew() {
var $oe_menu = $('#oe_menu');
var $oe_menu_items = $oe_menu.children('li');
$oe_menu_items.bind('mouseenter',function(){
var $this = $(this);
$this.addClass('slided selected');
$this.children('div').css('z-index','9999').stop(true,true).slideDown(200,function(){
$oe_menu_items.not('.slided').children('div').hide();
$this.removeClass('slided');
});
}).bind('mouseleave',function(){
var $this = $(this);
$this.removeClass('selected').children('div').css('z-index','1');
});
$oe_menu.bind('mouseenter',function(){
var $this = $(this);
$this.addClass('hovered');
}).bind('mouseleave',function(){
var $this = $(this);
$this.removeClass('hovered');
$oe_menu_items.children('div').hide();
})
}
Hi caladan,
die komplette init-all.js wird korrekt über die base.tpl geladen.
Den Einbau habe ich auch nochmal kontrolliert - alles wie beschrieben.
Seltsam.
Übrigens: bei Dir gibt es auch Problemem mit der Topkategerie.
Die schliesst sich direkt wieder nach dem aufklappen.
http://web9.cpsrv01.agentur2c.net/mein-konto
Gruß
sirc
dass sie sich bei mir grad schliesst, liegt daran, dass ich grad an dem menü rumspiel und versuch was einzubauen
hat es jetzt bei dir geklappt?
wenn nicht, sag bescheid