Fancy Menu auch vertikal?

[pain2000]

Hallo Leute,
ich hab mal eine Frage bezüglich des 'Fancy Menus' ().
Gibt es da auch eine Variante es für eine vertikale Navigation zu benutzen?
Ich hab diesbezüglich leider nichts gefunden... Oder ich war zu blöd beim Suchen...

 

[TeXniXo]

AW: Fancy Menu auch vertikal?

die seite, die du verlinkt hast, ist ja nämlich die hauptseite dieser features wie "fancy menu" ... da müsstest dort eh finden!

eventuell mit css rumspielen bzw. auf "vert" suchen und dort auf "hori" ändern und so wieter

 

[pain2000]

AW: Fancy Menu auch vertikal?

Irgendwie bekomme ich das nicht gebacken... Hat jemand eine Ahnung wie das gehen kann?

 

[leohh]

AW: Fancy Menu auch vertikal?

#fancymenu ul li {
  float: left;
  list-style: none;
}

Wenn ich richtig gesehen hab, dann wird das Menue doch nur gefloatet...
Wo soll da jettzt das Problem sein ..

 

[pain2000]

AW: Fancy Menu auch vertikal?

Wo soll da jettzt das Problem sein ..

.. das es so einfach nicht klappt.
Dann zeigt es garnix mehr an...

 

[leohh]

AW: Fancy Menu auch vertikal?

Wie und wo hast du es denn eingebunden?!

 

[pain2000]

AW: Fancy Menu auch vertikal?

Wie und wo hast du es denn eingebunden?!

Naja, ganz normal halt. Wenn ich das float wegnehme sind zwar die li's untereinander, aber das Menu erscheint nicht... zum schauen...

 

[leohh]

AW: Fancy Menu auch vertikal?

Ist leider doch nicht so trivial, wie ich anfaenglich dachte, denn die Berechnung im Js, muss ja auch noch irgendwo stattfinden, bzw. veraendert werden. Leider kenn ich mich mit mootools nicht wirklich aus aber ueber jQuery hast du hier ein Beispiel:
LavaLamp 1.3.2 Demo - a jQuery plugin

handelt sich ja um den gleichen Effekt

 

[pain2000]

AW: Fancy Menu auch vertikal?

Hey, kuhle Sache... Die Seite kannte ich noch nicht.
Aber, da ich schon MooTools verwende würde ich nur ungern auf jQuery umsteigen...

 

[leohh]

AW: Fancy Menu auch vertikal?

Also, ich hab mich mal kurz rangesetzt und den Mootools-Muell nachvollzogen.
Ist ja doch recht simpel:

		this.back = new Element('li',{
			'class':'background',
			morph:this.options
		}).adopt(new Element('div',{'class':'top'})).inject(this.menu);
		if(this.current) this.setCurrent(this.current);
	},
	
	setCurrent: function(el, effect){
		this.back.setStyles({top: (el.offsetTop), width: (el.offsetWidth)});
		(effect) ? this.back.get('morph').start({'opacity':[0,1]}) : this.back.setStyle('opacity',1);
		this.current = el;
	},

	clickItem: function(event) {
		var item = $(event.target);
		this.setCurrent(item, true);
		this.fireEvent('onClick',[new Event(event), item]);
	},

	moveBg: function(to){
		if(!this.current) return;
		if(to){
			to = $(to.target);
		}else{
			to = this.current;
		}
		this.back.get('morph').start({
			top: to.offsetTop,
			width: to.offsetWidth
		});
	}
});

Du brauchst hier natuerlich nicht offsetLeft, da du deine Blase nach oben und unten verschieben willst, sondern das offsetTop ( javascript bleibt eben javascript, egal welche Libary man verwendet -g- ). Damit das ganze Konsistent bleibt, benennen wir natuerlich auch noch die Klasse von .left zu .top um und dementsprechend auch in der CSS-Datei:

		#fancymenu .background .top {
			background: url('images/bg_menu.png') no-repeat top left !important;
			background: url('images/bg_menu.gif') no-repeat top left;
			height: 30px;
			margin-right: 9px; /* 7px is the width of the rounded shape */
		}

Duerfte eigentlich alles so hinhauen wie du dir das vorstellst. Allderings sollte es klar sein, dass du einige Sachen in deiner CSS umaendern muesstest aber das versteht sich .. hoffe ich doch.