Menü ausklappen

[newbie]

Hallo zusammen!
Ist es möglich mit TYPOlight ein Menü zu erstellen, wie es z.B. auf der McDonalds Webseite zu sehen ist!? Also dass es ausklappt und auch noch ein Bild darstellt!?
Bin für jede Hilfe/Anleitung dankbar. Bin eben ein Newbie !
LG Newbie

[m-werk]

Hallo, das müsste funktionieren.

Ich habe auch auf einer Webseite ein horizontales Menü a la Suckerfish erstellt. Dass dann auch noch ein Bild zu sehen ist, müsste mittes hover funktionieren.

Ich habe es noch nicht probiert aber ich glaube, du müsstest für den hover dann für jeden Menüpunkt eine eigene css-klasse schreiben.

Bitte korriegiert mich, wenn ich falsch liege.

[marcules]

Hallo Neuling,

das ist überhaupt kein Problem und ganz ohne Java-Script lösbar
Schau dir einfach mal die zwei Menüs von Stu Nicholls an:

Horizontales Menü
Slide (ausklappbares) Menü

Müsstest du halt nur noch kombinieren.
Wenn ich die Zeit finde, kann ich dir bis heute Abend auch ein Beispiel geschrieben haben… wenn du nicht weiterkommst versteht sich


Grüße,
Marc

[newbie]

ich werde nicht klar kommen .

wär super lieb, wenn du mir behilflich sein könntest.

[marcules]

Hallo Neuling,

hat jetzt leider etwas länger gedauert als ich gedacht hätte, bin die letzten Tage stark im Stress gewesen…

wie dem auch sei, hier eine Lösung, die in allen guten Browsern funktioniert + ein JavaScript, daß ich standardmäßig einbinde, damit es auch im IE funktioniert:

<div id="menue">
	<ul class="level-1">
		<li>
			<a href="#nogo">Menuepunkt 1</a>
			<ul class="level-2">
				<li>
					<a href="#nogo">
						Untermenüpunkt I
						<img src="images/umen-1.png" alt="" title="" />
					</a>
				</li>
				<li>
					<a href="#nogo">
						Untermenüpunkt II
						<img src="images/umen-2.png" alt="" title="" />
					</a>
				</li>
				<li>
					<a href="#nogo">
						Untermenüpunkt III
						<img src="images/umen-3.png" alt="" title="" />
					</a>
				</li>
			</ul>
		</li>
		<li>
			<a href="#nogo">Menuepunkt 2</a>
		</li>
		<li>
			<a href="#nogo">Menuepunkt 3</a>
			<ul class="level-2">
				<li>
					<a href="#nogo">
						Untermenüpunkt I
						<img src="images/umen-4.png" alt="" title="" />
					</a>
				</li>
				<li>
					<a href="#nogo">
						Untermenüpunkt II
						<img src="images/umen-5.png" alt="" title="" />
					</a>
				</li>
				<li>
					<a href="#nogo">
						Untermenüpunkt III
						<img src="images/umen-6.png" alt="" title="" />
					</a>
				</li>
			</ul>
		</li>
	</ul>
</div>

div#menue { padding-top: 20px; }

div#menue ul.level-1 {
	width: 600px;
	margin: 0 auto; }

div#menue ul.level-1 li {
	float: left;
	position: relative;
	width: 200px; }

div#menue ul.level-1 li a {
	display: block;
	float: left;
	width: 200px;
	height: 25px;
	line-height: 25px;
	text-align: center;
	text-decoration: none;
	color: #ddd;
	background: #141414; }

div#menue ul.level-1 li a:hover {
	background: #444; }

div#menue ul.level-2 {
	display: none;
	position: absolute;
	left: -20px;
	top: 25px;
	padding: 0 20px 100px 20px; }

div#menue ul.level-1 li:hover ul.level-2 {
	display: block; }

div#menue ul.level-2 li a {
	height: auto; }

div#menue ul.level-2 li img {
	display: none; }

div#menue ul.level-2 li:hover img {
	display: block; }

Hier eine Vorschau: *klick*
JavaScript: IE8-JS

Grüße,
Marc

[adifl]

Nun fragt sich wie sich das in typolight einbinden lässt.

Da bei typolight die grafiken ja nicht mitgegeben werden können, ich meine weil du das img im html-code drin hast... lässt sich das auch im css definieren?

das menü ist spuper die mc donalds seite hat aber noch so eine schöne verzögerung drin, ist das auch noch möglich??

gruss adifl

[newbie]

Hey Marc,

super und vielen lieben Dank!!!!

Nun mal schauen, wie ich es in TL eingebaut bekomme.

Daaaaanke noch mal.

LG

[Toflar]

Verzögerungen sind eigentlich Javascriptsache...schau doch mal den Source bei McDonald's nach

[marcules]

Hallo Ihr,

Da bei typolight die grafiken ja nicht mitgegeben werden können, ich meine weil du das img im html-code drin hast...

Huch? Ich sehe kein Problem darin geschwind ein -- sehr primitives und einfaches -- Modul-Template mit PHP zu erstellen, daß dann nach irgendeiner Namensvorgabe die Bilder aus einem Ordner fischt... ja sehr primitiv, ich weiß

lässt sich das auch im css definieren?

Klar… so im Nachhinein fällt mir auf, daß man das auch einfach über ein background-image und eine height-Veränderung beim hover in Kombination eines overflow:hidden hätte lösen können.

das menü ist spuper die mc donalds seite hat aber noch so eine schöne verzögerung drin, ist das auch noch möglich??

Verzögerungen sind eigentlich Javascriptsache...schau doch mal den Source bei McDonald's nach

Und da wir zumeist Mootools sowieso schon eingebunden haben, können wir die Mootools-Klasse "tween" verwenden um diesen "Akkordeon"-Effekt zu erzeugen…

Wie man sieht ansich kein Problem, nur etwas rumwurschdln muss man… wenn ich Zeit finde -- und das ist wohl sehr wahrscheinlich -- kann ich mal schauen, was ich für tl so zusammengebastelt kriege und hier ein Ergebnis posten… aber ob das bis Freitag was wird? Keine Ahnung.



Grüße,

Marc

PS Das Menü ist ja im Moment schon ohne JavaScript verwendbar - da spricht auch etwas EyeCandy nicht mehr dagegen, ist ja kein essentieller bestandteil des Menüs

[joe]

Ich sponsore mal einen meiner Bookmarks

Für animierte Flyouts lässt sich wunderbar folgende Klasse verwenden

http://greengeckodesign.com/projects/menumatic.aspx

Hier noch die Demo

http://greengeckodesign.com/projects...es/horizontal/

Noch nen Edit:
Alternativ ist auch das hier zu empfehlen
http://www.chrisesler.com/mootools/1.2/dropMenu.html

[Bobi]

Hallo marcules,

hast Du eventuell etwas für TL zusammengebastelt ;-)!?

LG newbie

Verststeh ich jetzt irgendwie nicht - joe zum Beispiel hat hier doch schon ganz klare Tutorials geliefert...... Was soll man da zusammengebastelt haben - vorgekauter geht es doch schon garnicht mehr

Bei diesem mit Javascript bindest eben das Script ein, setzt deine CSS regeln für die verschiedenen Dinge und gut ist - was soll man denn da noch "basteln"?*verwirrtbin*

Ein bisschen damit auseinandersetzten musst du dich schon selbst.

[marcules]

joe zum Beispiel hat hier doch schon ganz klare Tutorials geliefert...... Was soll man da zusammengebastelt haben

Beide Tutorials haben nicht diesen "Ausrolleffekt" sondern einen "Einblendeffekt" zumal das Tutorial auf der grünen Seite beide Effekte kombiert aber leider auch noch jQuery verwendet, welches ich aus ressourcensparenden Gründen vermeiden wollte.*

Ein bisschen damit auseinandersetzten musst du dich schon selbst.

Ich habe mich damit auseinandergesetzt und herausgekommen ist dieser Schund:
Quelltext mit Highlight
Quelltext:

document.write('<link rel="stylesheet" href="tl_files/newbie/css/javascript.css" type="text/css" />');
window.addEvent('domready', function() {
    var menele = $$('#menue ul.level_1 ul.level_2 li a');
    var menakti = $$('#menue ul.level_1 a.submenu');
    var men = $$('#menue ul.level_1 ul.level_2');
    
    menele.each(function(el, index){
        var fx = new Fx.Tween(el,{
            duration: 500,
            link: 'cancel'
        });
        
        hovered = false;
        var counter = function(enter){
            if(enter == true){
            if(check == index){
                this.start('height', 100);
            }else{
            hovered = false;
            }
            }
        };
        
        el.setStyle('height', '25px').addEvents({
            'mouseenter': function(e){
                e.stop();
                hovered = true;
                check = index;
                counter.delay(500, fx, hovered);
            },
            'mouseleave': function(e){
                e.stop();
                hovered = false;
                fx.start.delay(500, fx, ['height', 25]);
            }
        });
    });
    
    menakti.each(function(el, aindex){
    	men.each(function(ele, mindex){
    		var ffx = new Fx.Tween(ele,{
    			duration: 500,
    			link: 'cancel'
    		});

    		var fffx = new Fx.Tween(ele,{
    			duration: 500,
    			link: 'cancel'
    		});
    		
    		var nstil = function(f){
    			ele.setStyle('overflow', 'visible');
    			ele.setStyle('padding-bottom', 300);
    			ele.setStyle('height', '100%');
    		}
    		
    		ele.setStyle('overflow', 'hidden');
    		ele.setStyle('padding-bottom', 0);
    		ele.setStyle('height', '0%');
    		
    		el.addEvents({
    			'mouseenter': function(e){
    				e.stop();
    				if(aindex == mindex){
    					ffx.start('height', ['0%', '100%']).chain(nstil);
    				}else{
    					ele.setStyle('overflow', 'hidden');
    					ffx.start('height', '0%');
    					fffx.start('padding-bottom', 0);
    				}
   		 	}
   		 });
   		ele.addEvents({
   			'mouseenter': function(e){
   				e.stop();
   				if(aindex != mindex){
   					ele.setStyle('overflow', 'hidden');
   					ffx.start('height', '0%');
   					fffx.start('padding-bottom', 0);
   				}
   			},   					
   			'mouseleave': function(e){
   				e.stop();
   				ele.setStyle('overflow', 'hidden');
   				ffx.start('height', ['100%', '0%']);
   				fffx.start('padding-bottom', [300, 0]);
   			}
   		});
  		});
    });
});

Grüße,
Marc

*Sorry Trugschluß

[marcules]

So,

ich habe mittlerweile (eher durch Zufall) eine Möglichkeit gefunden das Menü endlich fertigzustellen. Dabei musste das Menü aber etwas vom CSS her angepasst werden.

Die fertigen Elemente sind nun folgende:

HTML-Quelltext mit Syntaxhighlighting

<div id="menue">
	<div class="mod_navigation block">
		<a href="#skipNavigation1" class="invisible">Navigation überspringen</a>
		<ul class="level_1">
			<li class="active first"><span class="active first">startseite</span></li>
			<li><a href="index.php/blog.html" onclick="this.blur();">blog</a></li>
			<li class="submenu">
				<a href="index.php/portfolio.html" class="submenu" onclick="this.blur();">portfolio</a>
				<ul class="level_2">
					<li class="first"><a href="index.php/corporate-design.html" class="first" onclick="this.blur();" style="background-image: url(tl_files/newbie/images/umen-corporate-design.png);">corporate design</a></li>
					<li><a href="index.php/bildergalerie.html" onclick="this.blur();" style="background-image: url(tl_files/newbie/images/umen-bildergalerie.png);">bildergalerie</a></li>
					<li class="last"><a href="index.php/webdesign.html" class="last" onclick="this.blur();" style="background-image: url(tl_files/newbie/images/umen-webdesign.png);">webdesign</a></li>
				</ul>
			</li>
			<li class="submenu">
				<a href="index.php/tutorials.html" class="submenu" onclick="this.blur();">tutorials</a>
				<ul class="level_2">
					<li class="first"><a href="index.php/css.html" class="first" onclick="this.blur();" style="background-image: url(tl_files/newbie/images/umen-css.png);">css</a></li>
					<li><a href="index.php/php.html" onclick="this.blur();" style="background-image: url(tl_files/newbie/images/umen-php.png);">php</a></li>
					<li><a href="index.php/java-scriptajax.html" onclick="this.blur();" style="background-image: url(tl_files/newbie/images/umen-java-scriptajax.png);">java-script/ajax</a></li>
					<li class="last"><a href="index.php/sql.html" class="last" onclick="this.blur();" style="background-image: url(tl_files/newbie/images/umen-sql.png);">sql</a></li>
				</ul>
			</li>
			<li class="last"><a href="index.php/kontaktimpressum.html" class="last" onclick="this.blur();">kontakt/impressum</a></li>
		</ul>
		<a name="skipNavigation1" id="skipNavigation1" class="invisible">&nbsp;</a>
	</div>
</div>

CSS-Quelltext mit Syntaxhighlighting (normal)

body {
	min-width: 1000px;
	max-width: 1500px;
	font-style: sans-serif;
	background: #fefefe; }

:focus { outline: none; }
.invisible { display: block; text-indent: -9999px; }
.invisible:focus { text-indent: 0; background: #242424; color: white; }

div#menue {
	position: relative;
	width: 1000px;
	margin: 0 auto;
	padding-top: 20px; }

div#menue ul.level_1 {
	position: absolute;
	width: 1000px; }

div#menue ul.level_1 li {
	float: left;
	width: 200px; }

div#menue ul.level_1 li a, div#menue ul.level_1 li span {
	display: block;
	width: 200px;
	height: 25px;
	line-height: 25px;
	text-align: center;
	text-decoration: none;
	color: #ddd;
	background: #141414; }

div#menue ul.level_1 li a:hover {
	background: #444; }

div#menue ul.level_2 {
	display: none;
	width: 200px;
	margin-left: -20px;
	padding: 0 20px 150px 20px; }

div#menue ul.level_1 li:hover ul.level_2 {
	display: block; }

div#menue ul.level_2 li, div#menue ul.level_2 li a { float: none; }

div#menue ul.level_2 li a, div#menue ul.level_2 li a:hover {
	height: auto;
	background-repeat: no-repeat;
	background-position: 0 25px; }

div#menue ul.level_2 li a:hover { height: 100px; }

div#content {
	clear: both;
	width: 800px;
	margin: 0 auto;
	padding: 25px; }

div#content h1 {
	padding: 15px 0 25px 0;
	font-size: 2.5em; }
div#content h2 {
	padding: 5px 0 25px 0;
	font-size: 2em; }

CSS-Quelltext mit Syntaxhighlighting (java)

div#menue ul.level_2 li a:hover { height: auto; }
div#menue ul.level_2 { display: block; }

JavaScript-Quelltext mit Syntaxhighlighting

document.write('<link rel="stylesheet" href="tl_files/newbie/css/javascript.css" type="text/css" />');
window.addEvent('domready', function() {

	$('menue').getElement('ul.level_1').getElements('li.submenu').each(function(e){
		var subele = e.getElement('ul.level_2');
		var menuFx = new Fx.Slide(subele).hide();
		
		e.addEvents({
			'mouseenter' : function(){
				menuFx.cancel();
				menuFx.slideIn();
			},
			'mouseleave' : function(){
				menuFx.cancel();
				menuFx.slideOut();
			}
		});
	})
	
	var menele = $$('#menue ul.level_1 ul.level_2 li a');
	
	menele.each(function(el, index){
		var fx = new Fx.Tween(el,{
			duration: 500,
			link: 'cancel'
		});
		
		hovered = false;
		var counter = function(enter){
			if(enter == true){
				if(check == index){
					this.start('height', 100);
				}else{
					hovered = false;
					this.cancel();
				}
			}
		};
		
		el.setStyle('height', '25px').addEvents({
			'mouseenter': function(e){
				e.stop();
				hovered = true;
				check = index;
				counter.delay(500, fx, hovered);
			},
			'mouseleave': function(e){
				e.stop();
				hovered = false;
				fx.start.delay(500, fx, ['height', 25]);
			}
		});
	});
});

Das ganze noch als Vorschau in einer typolight-Testumgebung von mir: *klick*



Grüße,

Marc