Javascript

Menü mit Hover-Fade-Effekt

14. 12. 2011

Ziel

Ziel war es, einem aus 3 Bildern bestehenden Menü Hover-Fade-Effekte hinzuzufügen, d. h. bei Mouseover bei einem Bild soll dieses flüssig in ein anderes überblenden.

Menu 01.png

Menu 02.png

Lösung

Hier die schrittweise Lösung, wie es umgesetzt wurde:

1. Das jQuery-Framework direkt von den Google-Servern in den HTML-Quellcode im Header einbinden:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

2. Anschließend den Quellcode für das „Fade-PlugIn“ von http://jqueryfordesigners.com/image-cross-fade-transition/ (im Quelltext der Beispielseite) in einer separaten .js-Datei speichern und nach dem jQuery-Framework einbinden.

Der JavaScript-Code:

    <!--
	//Quelle: http://jqueryfordesigners.com/image-cross-fade-transition/
 
    // wrap as a jQuery plugin and pass jQuery in to our anoymous function
    (function ($) {
        $.fn.cross = function (options) {
            return this.each(function (i) { 
                // cache the copy of jQuery(this) - the start image
                var $$ = $(this);
 
                // get the target from the backgroundImage + regexp
                var target = $$.css('backgroundImage').replace(/^url|\(\)'"/g, '');
 
                // nice long chain: wrap img element in span
                $$.wrap('<span style="position: relative;"></span>')
                    // change selector to parent - i.e. newly created span
                    .parent()
                    // prepend a new image inside the span
                    .prepend('<img>')
                    // change the selector to the newly created image
                    .find(':first-child')
                    // set the image to the target
                    .attr('src', target);
 
                // the CSS styling of the start image needs to be handled
                // differently for different browsers
                if ($.browser.msie || $.browser.mozilla) {
                    $$.css({
                        'position' : 'absolute', 
                        'left' : 0,
                        'background' : '',
                        'top' : this.offsetTop
                    });
                } else if ($.browser.opera && $.browser.version < 9.5) {
                    // Browser sniffing is bad - however opera < 9.5 has a render bug 
                    // so this is required to get around it we can't apply the 'top' : 0 
                    // separately because Mozilla strips the style set originally somehow...                    
                    $$.css({
                        'position' : 'absolute', 
                        'left' : 0,
                        'background' : '',
                        'top' : "0"
                    });
                } else { // Safari
                    $$.css({
                        'position' : 'absolute', 
                        'left' : 0,
                        'background' : ''
                    });
                }
 
                // similar effect as single image technique, except using .animate 
                // which will handle the fading up from the right opacity for us
                $$.hover(function () {
                    $$.stop().animate({
                        opacity: 0
                    }, 250);
                }, function () {
                    $$.stop().animate({
                        opacity: 1
                    }, 250);
                });
            });
        };
 
    })(jQuery);
 
    // note that this uses the .bind('load') on the window object, rather than $(document).ready() 
    // because .ready() fires before the images have loaded, but we need to fire *after* because
    // our code relies on the dimensions of the images already in place.
    $(window).bind('load', function () {
        $('img.fade').cross();
    });
 
    //-->

Und einbinden (Verzeichnis und Dateinamen anpassen):

<script type="text/javascript" src="scripts/jquery_pic_fade_20111214.js"></script>

3. Das Menü im HTML-Quelltext definieren. Wichtig ist, dass jeder Menüpunkt ein Listenelement ist. Im Fordergrund das Standardbild; als Hintergrund ist das Bild definiert, das bei Mouseover angezeigt wird. Mit dem a-Tag wird jeweils ein Link zugewiesen.

Der „Trigger“ für das jQuery-JavaScript ist die Klasse „fade“.

Hier ein Beispiel:

      	<ul class="menu_ul">
        	<li class="menu_item"><a href="#"><img class="fade" src="used/main_page/btn_print_standard_01.png" style="background: url(used/main_page/btn_print_hover_01.png);" /></a></li>
            <li class="menu_item"><a href="#"><img class="fade" src="used/btn_search_standard_01.png" style="background: url(used/main_page/btn_search_hover_01.png);" /></a></li>
            <li class="menu_item"><a href="#"><img class="fade" src="used/btn_contact_standard_01.png" style="background: url(used/main_page/btn_contact_hover_01.png);" /></a></li>
        </ul>

4. CSS

Mittels CSS werden die Klassen „menu_ul“ und „menu_item“ definiert, die das Menü so anzeigen, dass Vorder- und Hintergrundbild genau übereinander liegen. Beispiel:

.menu_ul {
	float:left;
	list-style-type:none;	
}
.menu_item {
	display:inline;
	float: left;
    /*margin-left: 3em;*/
}

Quellen

Die oben genannte Anleitung ist eine Kombination aus http://jqueryfordesigners.com/image-cross-fade-transition/ und http://danwellman.co.uk/hoverfade/example.html.

Vielen Dank!

image_print
1 Stern2 Sterne3 Sterne4 Sterne5 Sterne
Loading...

Author

Manuel

Ich bin Manuel Wurm, IT-Consultant und Blogger. Ich mag es, verschiedenste Dinge auszuprobieren. Vor allem mit Retro-Computern, Bierbrauen, Bogenschießen und Schlagzeug spielen verbringe ich gerne meine Zeit. Kochen zählt zu meinen größten Hobbys - das spiegelt sich auch auf wurmweb.at wieder, wo ich gerne Rezepte teile und hilfreiche Tipps für Interessierte festhalte.

Related Posts