Druckbare Version
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
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.
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 :D
Grüße,
Marc
ich werde nicht klar kommen :(.
wär super lieb, wenn du mir behilflich sein könntest.
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:
HTML-Code:<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>
Hier eine Vorschau: *klick*Code: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; }
JavaScript: IE8-JS
Grüße,
Marc
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
Hey Marc,
super und vielen lieben Dank!!!!
Nun mal schauen, wie ich es in TL eingebaut bekomme.
Daaaaanke noch mal.
LG
Verzögerungen sind eigentlich Javascriptsache...schau doch mal den Source bei McDonald's nach :)
Hallo Ihr,
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ß :oZitat:
Zitat von adifl
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.Zitat:
Zitat von adifl
Zitat:
Zitat von adifl
Und da wir zumeist Mootools sowieso schon eingebunden haben, können wir die Mootools-Klasse "tween" verwenden um diesen "Akkordeon"-Effekt zu erzeugen…Zitat:
Zitat von Toflar
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 :)
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
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:DZitat:
Zitat von newbie
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"?:rolleyes:*verwirrtbin*
Ein bisschen damit auseinandersetzten musst du dich schon selbst.
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.*Zitat:
Zitat von Bobi
Ich habe mich damit auseinandergesetzt und herausgekommen ist dieser Schund:Zitat:
Zitat von Bobi
Quelltext mit Highlight
Quelltext:
Grüße,Code: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]);
}
});
});
});
});
Marc
*Sorry Trugschluß
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
CSS-Quelltext mit Syntaxhighlighting (normal)HTML-Code:<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"> </a>
</div>
</div>
CSS-Quelltext mit Syntaxhighlighting (java)Code: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; }
JavaScript-Quelltext mit SyntaxhighlightingCode:div#menue ul.level_2 li a:hover { height: auto; }
div#menue ul.level_2 { display: block; }
Das ganze noch als Vorschau in einer typolight-Testumgebung von mir: *klick*Code: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]);
}
});
});
});
Grüße,
Marc