Hello,
I want to set the default backgournd color to transparent but getting white color when i set it to transparent
please check the line 26 ( defaultBgColor: '#e5e5e5') and 143 ( backgroundColor: settings.defaultBgColor ) of my code and please fix it for me please thanksss

(function($) {

    var methods = {
            init    : function( options ) {

                if( this.length ) {

                    var settings = {
                        // configuration for the mouseenter event
                        animMouseenter      : {
                            'mText' : {speed : 350, easing : 'easeOutExpo', delay : 140, dir : 1},
                            'sText' : {speed : 350, easing : 'easeOutExpo', delay : 0, dir : 1},
                            'icon'  : {speed : 350, easing : 'easeOutExpo', delay : 280, dir : 1}
                        },
                        // configuration for the mouseleave event
                        animMouseleave      : {
                            'mText' : {speed : 300, easing : 'easeInExpo', delay : 140, dir : 1},
                            'sText' : {speed : 300, easing : 'easeInExpo', delay : 280, dir : 1},
                            'icon'  : {speed : 300, easing : 'easeInExpo', delay : 0, dir : 1}
                        },
                        // speed for the item bg color animation
                        boxAnimSpeed        : 300,
                        // default text color (same defined in the css)
                        defaultTextColor    : '#001e35',
                        // default bg color (same defined in the css)
                        defaultBgColor      : '#e5e5e5'
                    };

                    return this.each(function() {

                        // if options exist, lets merge them with our default settings
                        if ( options ) {
                            $.extend( settings, options );
                        }

                        var $el             = $(this),
                            // the menu items
                            $menuItems      = $el.children('li'),
                            // save max delay time for mouseleave anim parameters
                        maxdelay    = Math.max( settings.animMouseleave['mText'].speed + settings.animMouseleave['mText'].delay ,
                                                settings.animMouseleave['sText'].speed + settings.animMouseleave['sText'].delay ,
                                                settings.animMouseleave['icon'].speed + settings.animMouseleave['icon'].delay
                                              ),
                            // timeout for the mouseenter event
                            // lets us move the mouse quickly over the items,
                            // without triggering the mouseenter event
                            t_mouseenter;

                        // save default top values for the moving elements:
                        // the elements that animate inside each menu item
                        $menuItems.find('.sti-item').each(function() {
                            var $el = $(this);
                            $el.data('deftop', $el.position().top);
                        });

                        // ************** Events *************
                        // mouseenter event for each menu item
                        $menuItems.bind('mouseenter', function(e) {

                            clearTimeout(t_mouseenter);

                            var $item       = $(this),
                                $wrapper    = $item.children('a'),
                                wrapper_h   = $wrapper.height(),
                                // the elements that animate inside this menu item
                                $movingItems= $wrapper.find('.sti-item'),
                                // the color that the texts will have on hover
                                hovercolor  = $item.data('hovercolor');

                            t_mouseenter    = setTimeout(function() {
                                // indicates the item is on hover state
                                $item.addClass('sti-current');

                                $movingItems.each(function(i) {
                                    var $item           = $(this),
                                        item_sti_type   = $item.data('type'),
                                        speed           = settings.animMouseenter[item_sti_type].speed,
                                        easing          = settings.animMouseenter[item_sti_type].easing,
                                        delay           = settings.animMouseenter[item_sti_type].delay,
                                        dir             = settings.animMouseenter[item_sti_type].dir,
                                        // if dir is 1 the item moves downwards
                                        // if -1 then upwards
                                        style           = {'top' : -dir * wrapper_h + 'px'};

                                    if( item_sti_type === 'icon' ) {
                                        // this sets another bg image for the icon
                                        style.backgroundPosition    = 'bottom left';
                                    } else {
                                        style.color                 = hovercolor;
                                    }
                                    // we hide the icon, move it up or down, and then show it
                                    $item.hide().css(style).show();
                                    clearTimeout($item.data('time_anim'));
                                    $item.data('time_anim',
                                        setTimeout(function() {
                                            // now animate each item to its default tops
                                            // each item will animate with a delay specified in the options
                                            $item.stop(true)
                                                 .animate({top : $item.data('deftop') + 'px'}, speed, easing);
                                        }, delay)
                                    );
                                });
                                // animate the bg color of the item
                                $wrapper.stop(true).animate({
                                    backgroundColor: settings.defaultTextColor
                                }, settings.boxAnimSpeed );

                            }, 100);    

                        })
                        // mouseleave event for each menu item
                        .bind('mouseleave', function(e) {

                            clearTimeout(t_mouseenter);

                            var $item       = $(this),
                                $wrapper    = $item.children('a'),
                                wrapper_h   = $wrapper.height(),
                                $movingItems= $wrapper.find('.sti-item');

                            if(!$item.hasClass('sti-current')) 
                                return false;       

                            $item.removeClass('sti-current');

                            $movingItems.each(function(i) {
                                var $item           = $(this),
                                    item_sti_type   = $item.data('type'),
                                    speed           = settings.animMouseleave[item_sti_type].speed,
                                    easing          = settings.animMouseleave[item_sti_type].easing,
                                    delay           = settings.animMouseleave[item_sti_type].delay,
                                    dir             = settings.animMouseleave[item_sti_type].dir;

                                clearTimeout($item.data('time_anim'));

                                setTimeout(function() {

                                    $item.stop(true).animate({'top' : -dir * wrapper_h + 'px'}, speed, easing, function() {

                                        if( delay + speed === maxdelay ) {

                                            $wrapper.stop(true).animate({
                                                backgroundColor: settings.defaultBgColor
                                            }, settings.boxAnimSpeed );

                                            $movingItems.each(function(i) {
                                                var $el             = $(this),
                                                    style           = {'top' : $el.data('deftop') + 'px'};

                                                if( $el.data('type') === 'icon' ) {
                                                    style.backgroundPosition    = 'top left';
                                                } else {
                                                    style.color                 = settings.defaultTextColor;
                                                }

                                                $el.hide().css(style).show();
                                            });

                                        }
                                    });
                                }, delay);
                            });
                        });

                    });
                }
            }
        };

    $.fn.iconmenu = function(method) {
        if ( methods[method] ) {
            return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
        } else if ( typeof method === 'object' || ! method ) {
            return methods.init.apply( this, arguments );
        } else {
            $.error( 'Method ' +  method + ' does not exist on jQuery.iconmenu' );
        }
    };

})(jQuery);

If a color needs to be transparant, you have two options:

  • Use an RGBA definition, e.g. background-color: rgba(255,0,0,0.5); , see http://www.w3schools.com/cssref/css_colors_legal.asp (but this is only supported on the newer versions of browsers)

  • Use the opacity (Netscape-based browsers) and filter (IE-based browsers) property

~G

Not working is there any way to use verticle gredient color? in line 143 and 105

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.