Fancy Drop Down Menus Using CSS and JQuery.

Written By: Zeeshan Rasool  |  Posted In: CSS, JQuery, PHP, Web Design

Hi dear readers, I created a fancy drop down menus with CSS and JQuery. I have another tutorial on 99points in which I used some animated navigation. I used jQuery animate function and CSS to put some stylish effects. Also I used a background for navigation.
Support: Firefox, Chrome and Safari.

Enter your email to subscribe :

Delivered by FeedBurner

JQuery Code

$(function() {
                $('#navigation > div').hover(
                function () {
                    var $this = $(this);
					//$this.find('.images').fadeIn();
					
					$this.find('a.menu').removeClass('menu').addClass('hovered');
					
                    $this.find('.images').stop().animate({
                        'width'     :'230px',
                        'height'    :'390px',
                        'opacity'   :'1.0'
                    },400,'easeOutBack',function(){
					
                        $(this).parent().find('div').fadeIn('fast');
                    });
                },
                function () {
                    var $this = $(this);
					
                    $this.find('div').fadeOut(500);
					//$this.find('.images').hide();
                   $this.find('a.hovered').removeClass('hovered').addClass('menu');
				   
				    $this.find('.images').stop().animate({
                        'width'     :'100px',
                        'height'    :'0px',
                        'top'       :'0px',
                        'left'      :'0px',
                        'opacity'   :'0.9'
                    },600,'easeOutBack'); 
              }
            );
            });

HTML

Download all the files and use this stylish tutorial. Thanks !

You also might like:

  1. Fancy Ajax Tabs Navigation with Ajax CSS and PHP
  2. All Time Most Popular JQuery Tutorials of 99Points
  3. Learn How to Create Super CSS3 and jQuery Based Menus
  4. New Twitter Like Application with JQuery and PHP

If you enjoyed this post, please consider leaving a comment below or subscribing to the RSS feed to have future articles delivered to your feed reader. You can also follow us on Facebook or Twitter @99Points


Zeeshan Rasool is the founder and editor of this blog. Beside this, he is an experienced PHP web developer and freelancer. He loves to create best and interactive web apps. You can follow him at twitter @99_Points and facebook OR drop an email at 99points.info@gmail.com

46 to “Fancy Drop Down Menus Using CSS and JQuery.”

Post comment


Email Subscriber!

Be the first to know about new updates


Fan Page Follow Us Follow Us Feed Subscribers
Advertisement


Categories

Popular post

Recommend