Wie setzt man diesen Effekt in einer Navigation um?

Hallo,

ich habe gerade eine Webseite gesehen, bei der mir die Navigation sehr gut gefällt:
http://www.blackboard-consulting.com/partnerzy/

Welche Möglichkeiten gibt es diesen hover-Effekt zu erstellen? Es geht mir um das breiter werden des Background d. einzelnen Listenpunkte.
Wir würde momentan nur eine Lösung mit CSS3 einfallen, indem ich sage, dass bei hover das padding des Listenpunktes nach links vergrößert wird. Das Ganze dann innerhalb einer best. Zeit.

Aber es gibt sicher noch eine bessere Lösung oder? Vielleicht gibt es auch ein Modul, von dem ich nichts weiß!?


DANKE euch schon einmal!

Also ich wäre für CSS3 :) Der einzige Nachteil du wirst nicht alle IE bedienen können.
Alternativ könntest du das ganze auch via MooTools machen, in etwa so:

PHP-Code:

---

window.addEvent('domready', function(){
            var list = $$('.subsub li a');
            list.each(function(element) {
                
                var fx = new Fx.Styles(element, {duration:400, wait:false});
                
                element.addEvent('mouseenter', function(){
                    fx.start({
                        'padding-left': 25,
                        'background-color': '#eaeaea',
                        'color': '#92AE01',
                                                'width': 205
                    });
                });
                
                element.addEvent('mouseleave', function(){
                    fx.start({
                        'padding-left': 0,
                        'background-color': '#262626',
                        'color': '#FFF',
                                                'width': 230
                    });
                });
                
            });
        }); 


---

Hallo,

ich habe leider noch nichts selbst mit MooTools gemacht. Wie müsste ich nun vorgehen?
Ich würde ein neues Moo-Template erstellen und dieses dem Nav-Modul zuweisen!?

Ja du must ein moo_menu tamplate erstellen.
Unter Layout - Templates.

Dort

Zitat:

---

<script type="text/javascript">
window.addEvent('domready', function(){
var list = $$('.subsub li a');
list.each(function(element) {

var fx = new Fx.Styles(element, {duration:400, wait:false});

element.addEvent('mouseenter', function(){
fx.start({
'padding-left': 25,
'background-color': '#eaeaea',
'color': '#92AE01',
'width': 205
});
});

element.addEvent('mouseleave', function(){
fx.start({
'padding-left': 0,
'background-color': '#262626',
'color': '#FFF',
'width': 230
});
});

});
});
</script>

---

Zitat:

---

var list = $$('.subsub li a');

---

.subsub ist die Class die du dem Menü zuteilen solltest.
li = Liste
a = dann der Link

Oder du schreibst im Script .(Deine Class rein)

mouseenter,mouseleave = hier Einstellungen vornehmen (anpassen der vorhandenen Daten)

Nicht vergessen unter Layout - Themes - Seitenlayouts - (Dein Layout)
moo_menu zu aktivieren mit Häckchen und speichern :)

lg Matthias

werde ich glaube ich auch einmal ausprobieren, vielen dank für die Anleitung!

Eine andere Frage, weiß jemand zufällig wie man diese Transparenten Linien die über den BG bildern liegen erstellt?

Hallo,

schau dir doch einmal dieses Tutorial an. http://css-tricks.com/examples/jQueryStop/

Oder diese Beispiele: http://www.2meter3.de/code/hoverFlow/
http://css-tricks.com/video-screenca...ry-animations/

Da kannst du diesen Effekt nachvollziehen.

mit freundlichen Grüßen und besten Wünschen für ein ruhiges und besinnliches Weihnachtsfest!

Hi,
unter 2.10.3 habe ich nun ein neues Template (zur Sicherheit eines als HTML5 und eines als XHTML) angelegt. Unter Systemwartung den Cache geleert. Im Seitenlayout sehe ich auch unter Mootools das Template "mootools_nav", das ich brav angeklickt habe, aber wenn im ein Navigationsmodul anlege, dann kann ich nur das "nav_default" auswählen...

Beim Menu Magic musste man im Seitenlayout noch einen eigenen JavaScript-Code eingeben....

Irgendetwas habe ich wohl vergessen????

Danke für die Hilfe...

wer auf alte browser verzichten kann.. kann das ganze auch mit css3 machen! ich hab ebenfalls ein menü dieser art.. allerdings ganz ohne javascript.
demolink stelle ich demnächst zur verfügung, da die seite im moment nocht nicht den kompletten content beinhaltet.. das menü ist aber schon lauffähig.

Zitat:

---

Zitat von macbee

Im Seitenlayout sehe ich auch unter Mootools das Template "mootools_nav", das ich brav angeklickt habe, aber wenn im ein Navigationsmodul anlege, dann kann ich nur das "nav_default" auswählen...

---

Navigationssubtemplates benötigen im Dateinamen den Präfix "nav_", damit Contao dieses Template als auswählbares "Partial" erkennt.

Danke. Hatte ich übersehen.
LG

Wäre wirklich mal eine Alternative das in CSS3 anzuschauen.
Freu mich schoon drauf. Da einige meiner Kunde unser Logo nicht immer so präsent auf der Seite haben wollen, dachte ich an so eine Art Flyout am unteren Rand, wo dann das logo erst erscheint wenn man mit der Maus drüberfährt.

LG

Zitat:

---

Zitat von ways2web

wer auf alte browser verzichten kann.. kann das ganze auch mit css3 machen! ich hab ebenfalls ein menü dieser art.. allerdings ganz ohne javascript.
demolink stelle ich demnächst zur verfügung, da die seite im moment nocht nicht den kompletten content beinhaltet.. das menü ist aber schon lauffähig.

---

schau mal hier rein: http://ways2web.de/beta/index.html

ist nur ne spielwiese und wird sicher ab und zu mal off sein... da ich an der installation nur ein paar spielchen teste...

Sieht ja echt super aus.... Der Effekt mit der Lupe ist ja auch nett. Allerdings wahrscheinlich mit vorsicht zu genießen, weil man sonst bei zuvielen Bildern einen flash bekommt...
:-)))

Zitat:

---

Zitat von macbee

Sieht ja echt super aus.... Der Effekt mit der Lupe ist ja auch nett. Allerdings wahrscheinlich mit vorsicht zu genießen, weil man sonst bei zuvielen Bildern einen flash bekommt...
:-)))

---

wie du siehst, ist der lupeneffekt nur bei Bildern, die auch ne großansicht haben (in dem fall nur das rechte Bild zum testen vom css)... von daher sollte kein problem sein. Jedes Bild was ne großansicht bietet, sollte das mit dem effekt auch anzeigen. Zumal man dieses angepasste template ja auch nicht überall nutzen muss.


viele Grüße
ways