Image Menü für Startseite

Hi caladan,

uff, danke das Du nochmal nachfragst.
Ich wollte nämlich nicht penetrant sein und löchern-> denn es klappt noch nicht.

Es klappt einfach nichts aus, obwohl im Quellcode alle Unterkategorien ausgegeben werden.

...
<li><a href="http://meineUrl.de/Kiteboarding/">Kiteboarding</a>
                <div>
                                                                        <ul>
                                <li class="oe_heading">Kites</li>

                                                                </ul>
                                                                                                <ul>
                                <li class="oe_heading">Kiteboards</li>
                                                                </ul>
                                                                                                <ul>
                                <li class="oe_heading">Trapeze</li>
                                                                </ul>
                                                                                                <ul>

                                <li class="oe_heading">Zubehör</li>
                                                                </ul></div>
            </li>  usw.

Die init-all.js ist auch eingebunden.
Haste noch einen Tipp woran das liegen könnte?

Danke & Gruß
Sirc

da fehlen doch noch die untermenüs in den menüs …

von der art her ist es so:

es gibt hauptkat, subcat und subsubcat …siehe auch bei mir auf dem web9…

ansonsten gib mir doch mal dein testweb dann schau ich mal was da bei dir ist.

ach im übrigen der quellcode für die “neue” MenuNew.tpl:


<div id="CompleteMenuOle" style="width:800px;height:108px;clear:both;">
<li id="miep" style="float:left;position:relative;list-style:none;width:112px;height:101px;padding-bottom:2px;"><a href="/">Startseite</a></li>
<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 style="left:-[{math equation="x * y" x=$smarty.foreach.root.iteration y=112}]px;position:absolute;width:900px; display:none;">
                    [{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=SubCat2}]
                                            [{if $osubcat2->getIsVisible() }]
                                                <li><a href="[{$osubcat2->getLink()}]">[{$osubcat2->oxcategories__oxtitle->value}]</a></li>
                                            [{/if}]
                                        [{/foreach}]
                                </ul>
                        [{/if}]
                    [{/foreach}]
			    </div>
		    </li>
        [{/if}]
    [{/foreach}]
</ul>
</div>

Beispielsweise bei Bekleidung sind die Subcats bereits angelegt, - sorry, hätte den auschitt posten sollen.
Dort geht es auch nicht.

 <li><a href="http://www.TestUrl.de/kunden/luckyd_oxid/Bekleidung/">Bekleidung</a>
                <div>
 <ul>
<li class="oe_heading">Sportswear</li>
       <li><a href="http://www.TestUrl.de/kunden/luckyd_oxid/Bekleidung/Sportswear/Neopren/">Neopren</a></li>
        <li><a href="http://www.TestUrl.de/kunden/luckyd_oxid/Bekleidung/Sportswear/Sonstiges/">Sonstiges</a></li>
</ul>
<ul>
<li class="oe_heading">Fashion</li>
<li><a href="http://www.TestUrl.de/kunden/luckyd_oxid/Bekleidung/Fashion/Fuer-Sie/">Für Sie</a></li>
<li><a href="http://www.TestUrl.de/kunden/luckyd_oxid/Bekleidung/Fashion/Fuer-Ihn/">Für Ihn</a></li>
<li><a href="http://www.TestUrl.de/kunden/luckyd_oxid/Bekleidung/Fashion/Accessoires/">Accessoires</a></li>
</ul>
</div>
</li>

Ich schicke Dir meine TestUrl per PN, kannst ja mal einen kurzen Blick darauf werfen.

Danke & Gruß
Sirc

mach ma und bind ma vorher das neue grad gepostete ein :slight_smile:

um die hier mitlesenden noch auf den aktuellen stand zu bringen:

fehler war simpel, dass er meine komplette init-all.js kopiert hatte, aber nicht alle funktionen daraus nutzte. das resultierte dann in entsprechenden fehlern und deswegen hat das menü nicht richtig funktioniert.

Ok dann machen wir jetzt hier weiter, ich habe jetzt alles eingebaut aber irgedwie ist das ganze layout zerschossen als ob er die css datei nicht anspricht. zu sehen unter http://www.lehmitz.info/test . Ich habe alles nach deiner Anleitung erstellt und eingebaut. Allerdings sobald ich unter Module das lazyloading eintrag habe ich nur eine weiße seite. Hast du eine Idee wo ich den fehler habe?

Patrick

Du hast die init-all.js nicht eingebunden (sieher erste Seite dieses Themas).
Auch die CSS Klassen finde ich nicht.
Das fällt mir so beim drübersehen auf.

Gruß
Sirc

ja habe gerade gesehen das ich die ganzen .js in out/azure/src/js und nicht in out/azure/src/js/libs hatte ist jetzt geändert aber die css classen habe ich alle ans ende der oxid.css gesetzt werden aber anscheinend nicht aufgerufen? der rest sollte jetzt stimmen

Jetzt wird zumindest auch die css ausgelesen. ich habe sie jetzt in die element.css eingefügt und dann gings. jetzt wird aber die startseite überlagert und kein inhalt angezeigt… brauche da bitte nochmal hilfe.

gruß und danke patrick

als kleiner tip: bau doch das menü direkt im content ein. weil dieses menü lohnt sich eh nur für die startseite. also pack es nicht in den header sondern in den content.

in der page.tpl:

        [{if $oView-&gt;getClassName() == 'start'}]
            [{include file="widget/StartMenu.tpl"}]
        [{/if}]

Hallo,

würde auch gerne nur das Menü oben nutzen. Was muss in der init-all.js dann stehen?
Bei mir klappt es momentan nämlich auch nicht aus. Danke im Voraus.

ciao
Oliver

in dem fall sieht die init-all.js so aus:


$(document).ready(function() 
{ 
    initEvents(); 
}); 

// start after user input >= 3 chars  
var startSuggest = 3;  


/* Init basic events and effects */ 
function initEvents() 
{ 
    initMenuNew();
} 


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();
	})
}

vergesst nicht einen eventuellen nivoslider da mit rein zupacken.

sobald ich das menü oben komplett fertig hab (kategorieangebote,icons vor den kategorienamen etc etc) werd ichs mal komplett zum download zur Verfügung stellen :slight_smile:

Wo pack ich denn da den nivoslider rein. Habe den momentan extra installiert. Gibt ja hier eine Anleitung. Danke für die super arbeit und den super support dafür.

Bin leider ein totaler Newbie. Vielleicht kannst Du mir bei noch einer anderen Sache helfen, möchte noch ein Menü über dem Logo haben, wo dann CMS-Seiten drin stehen. Also so allgemeines (Shopbeschreibung usw.)

Edit: Klappt leider auch nicht mit der verkürzten ini-all. Was kann ich noch falsch machen? Den nivoslider habe ich am laufen bekommen.

ciao
Oliver

pack die initalisierung des nivosliders mit in die init-all.js rein.

einfach folgende funktion noch mit in die init-all.js (ans ende):



function initNivoSlider(){ 
  $('.Slider').nivoSlider({ 
          effect: 'random', 
          slices: 15, 
          boxCols: 12, // For box animations 
          boxRows: 6, // For box animations           
          animSpeed: 1000, 
          pauseTime: 3800, 
          startSlide: 0, //Set starting Slide (0 index) 
          directionNav: false, //Next & Prev 
          directionNavHide: false, //Only show on hover 
          controlNav: false, //1,2,3... 
          controlNavThumbs: false, //Use thumbnails for Control Nav 
          controlNavThumbsSearch: '.jpg', //Replace this with... 
          controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src 
          keyboardNav: false, //Use left & right arrows 
          pauseOnHover: false, //Stop animation while hovering 
          manualAdvance: false, //Force manual transitions 
          captionOpacity: 0.8, //Universal caption opacity 
          beforeChange: function(){}, 
          afterChange: function(){}, 
          slideshowEnd: function(){} //Triggers after all slides have been shown 
      }); 
}  

und dann in die initevents noch den nivoslider rein:


/* Init basic events and effects */ 
function initEvents() 
{ 
    initMenuNew();
initNivoSlider();
} 

und entferne die andere initalsierung des nivosliders! dann funzt auch alles :slight_smile:

Jetzt funktioniert das Menü aber der nivoslider nicht so sieht meine init-all.js aus:

$(document).ready(function()
{
initEvents();
});

// start after user input >= 3 chars
var startSuggest = 3;

/* Init basic events and effects */
function initEvents()
{
initMenuNew();
initNivoSlider();
}

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 initNivoSlider(){
$(‘.Slider’).nivoSlider({
effect: ‘random’,
slices: 15,
boxCols: 12, // For box animations
boxRows: 6, // For box animations
animSpeed: 1000,
pauseTime: 3800,
startSlide: 0, //Set starting Slide (0 index)
directionNav: false, //Next & Prev
directionNavHide: false, //Only show on hover
controlNav: false, //1,2,3…
controlNavThumbs: false, //Use thumbnails for Control Nav
controlNavThumbsSearch: ‘.jpg’, //Replace this with…
controlNavThumbsReplace: ‘_thumb.jpg’, //…this in thumb Image src
keyboardNav: false, //Use left & right arrows
pauseOnHover: false, //Stop animation while hovering
manualAdvance: false, //Force manual transitions
captionOpacity: 0.8, //Universal caption opacity
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){} //Triggers after all slides have been shown
});
}

Wo muss denn die nivoslider.js hin? und die änderung der header.tpl muss doch auch bleiben oder?

also die nivoslider.js lädst du aus der base.tpl. nur eben den teil mit dem init aus dem tutorial lässt du weg und nimmst stattdessen eben den aus der init-all.js :slight_smile:

Krieg es irgendwie nicht hin, habe jetzt den Standard-Slider installiert. Damit geht alles. Habe jetzt noch eine andere Frage. Was muss ich tun damit die das aufklappende Menü automatisch die Höhe und Breite einstellt. Habe bei den Kategorien unterschiedliche Unterkategorien und das sieht dann nicht so gut aus wenn bei dem einen die Hälfte leer ist. Ich hoffe ich habe es richtig erklärt. Danke schon mal für Deine Geduld.

ciao
Oliver

das kommt halt jetzt drauf an was du genau willst. die breite ist aktuell die gesammte content breite. wenn du das nicht möchtest, musst du diesen part aus der MenuNew.tpl nehmen.

das menü ist halt grad mit absicht mit dieser festen breite gemacht. dazu kommt ja, dass ich grad (wie auf meinem testweb) noch angebote etc rechts daneben darstelle.

die Höhe kannst du via css einstellen, z.b. in dem du die height auf auto stellst.

hab wieder bissi am menü oben rumgespielt:

http://web9.cpsrv01.agentur2c.net/Bueromoebel/

jetzt mit kategorie topangebot und etwas verbessertem aussehen :slight_smile: