Ergebnis 1 bis 14 von 14

Thema: Wie setzt man diesen Effekt in einer Navigation um?

  1. #1
    Contao-Fan
    Registriert seit
    14.01.2011.
    Beiträge
    260

    Standard 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!

  2. #2
    Community-Moderator Avatar von schman
    Registriert seit
    20.06.2009.
    Ort
    Dornbirn
    Beiträge
    3.739
    User beschenken
    Wunschliste

    Standard

    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:400wait: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
                        
    });
                    });
                    
                });
            }); 
    Kein Privat Support via PM.

  3. #3
    Contao-Fan
    Registriert seit
    14.01.2011.
    Beiträge
    260

    Standard

    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!?

  4. #4
    Alter Contao-Hase Avatar von Messa
    Registriert seit
    19.01.2011.
    Ort
    Vorarlberg, Österreich
    Beiträge
    1.423

    Standard

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

    Dort
    <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>
    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
    Geändert von Messa (19.12.2011 um 16:14 Uhr)
    Full Service Agentur - Grafikdesign, Screendesign, Webdesign, Webentwicklung, SEO, Weiterbildung, persönliches Coaching
    http://www.matthiasgmeiner.com

  5. #5
    Contao-Nutzer
    Registriert seit
    05.03.2010.
    Beiträge
    94

    Standard

    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?

  6. #6
    Contao-Nutzer Avatar von RedWise
    Registriert seit
    05.03.2010.
    Ort
    Querfurt
    Beiträge
    45

    Standard

    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!
    Beste Grüße

    Steffen Richter

  7. #7
    Contao-Fan
    Registriert seit
    26.01.2010.
    Ort
    Salzburg
    Beiträge
    373

    Standard Mootools probiert, haut aber nicht hin....

    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...

  8. #8
    Contao-Urgestein Avatar von ways2web
    Registriert seit
    23.03.2010.
    Ort
    Berlin
    Beiträge
    1.698
    User beschenken
    Wunschliste

    Standard

    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.

  9. #9
    Administrator Avatar von xchs
    Registriert seit
    19.06.2009.
    Beiträge
    14.583
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von macbee Beitrag anzeigen
    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.
    Contao Community Administrator

    [Unterstützungsmöglichkeiten]

  10. #10
    Contao-Fan
    Registriert seit
    26.01.2010.
    Ort
    Salzburg
    Beiträge
    373

    Standard Super

    Danke. Hatte ich übersehen.
    LG

  11. #11
    Contao-Fan
    Registriert seit
    26.01.2010.
    Ort
    Salzburg
    Beiträge
    373

    Standard Wäre mal interessant....

    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 Beitrag anzeigen
    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.

  12. #12
    Contao-Urgestein Avatar von ways2web
    Registriert seit
    23.03.2010.
    Ort
    Berlin
    Beiträge
    1.698
    User beschenken
    Wunschliste

    Standard

    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...

  13. #13
    Contao-Fan
    Registriert seit
    26.01.2010.
    Ort
    Salzburg
    Beiträge
    373

    Standard supi

    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...
    :-)))

  14. #14
    Contao-Urgestein Avatar von ways2web
    Registriert seit
    23.03.2010.
    Ort
    Berlin
    Beiträge
    1.698
    User beschenken
    Wunschliste

    Standard

    Zitat Zitat von macbee Beitrag anzeigen
    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

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •