Tag Archives: jQuery

Nice animated menu plugin jQuery

I was reading all about creating jQuery plugins on Net Tuts when I decided to make my life easier by creating plugins for some of the things I use quite often. As coincidence might have it, I was also browsing through one of the never ending 75 jQuery techniques you need to know! when I came across this post from almost a year ago from Build Internet.

Download.

Demo

The formalities aside check out what I did:

/*
Base off of this awesome tutorial
http://buildinternet.com/2009/01/how-to-make-a-smooth-animated-menu-with-jquery/
*/
(function($){  
    $.fn.easing_menu = function(options) {  
          
        var  
          defaults = {  
            min_height: '50px',  
            max_height: '150px',
            duration_in: '600', 
            duration_out: '600', 
          },  
          settings = $.extend({}, defaults, options);  
          var min_height = settings.min_height;
          var max_height = settings.max_height; 
            
 						//When mouse rolls over
						$(this).children('li').mouseover(function(){
							height = $(this).height();
							$(this).stop().animate({height:max_height}, {queue:false, duration:duration_in, easing: 'easeOutBounce'})
						});
						
						//When mouse is removed
						$(this).children('li').mouseout(function(){
							$(this).stop().animate({height:min_height}, {queue:false, duration:duration_out, easing: 'easeOutBounce'})
						});
 
          // returns the jQuery object to allow for chainability.  
          return this;  
    }  
})(jQuery);  

I created the plugin so the user can set the starting height and ending height of the effect as well as how quickly the animation is to run.

This is the menu I am using, any menu will work though:

	<ul id="easing">
		<li>
			<p><a href="#">Home</a></p>
			<p class="sub">Image or text goes here</p>
		</li>
		<li>
			<p><a href="#">About</a></p>
			<p class="sub">Image or text goes here</p>
		</li>
		<li>
			<p><a href="#">Experience</a></p>
			<p class="sub">Image or text goes here</p>
		</li>
		<li>
			<p><a href="#">Portfolio</a></p>
			<p class="sub">Image or text goes here</p>
		</li>
		<li>
			<p><a href="#">About</a></p>
			<p class="sub">Image or text goes here</p>
		</li>
	</ul>

To attach this effect to the menu all you need to do is do so within a couple of script tags:

	<script type="text/javascript">
		$(document).ready(function(){
			$('#easing').easing_menu({  
	        min_height: '50px',  
	        max_height: '150px' 
	    });  
		});
	</script>

By making this into a plugin I have made it that much simpler to incorporate the menu into a site. The next step to customizing this may be to set the easing type as a setting as well so you can choose without editing the plugin!

Make all external links open in a new window/tab using jQuery

Alright, so I wanted to make a nice easy way to make all of the external links I post to open in a new tab. It just make sense to not facilitate users leaving your web site.

Step 1)
Target all of the anchor tags on the page when they are clicked.

Alright, so if that worked it means you did something right.

Step 2)
Get the url of the current page and split it down to the base URI for the page.

If that worked you will of course see your domain popup.

Step 3)
Check if the url is your own, if it isn’t add in the attribute of target=”_blank”

$(document).ready(function(){
	$('a').click(function(){
		var fullUrl = $(this).attr('href');
		var splitUrl = fullUrl.split("/");
		<strong>
		if((splitUrl[2] != 'www.levijackson.net') && (splitUrl[2] != 'levijackson.net')){
			$(this).attr("target","_blank");
		}
		</strong>
	});
});

If you aren’t familiar with the usage of $(this), it is shorthand for the element clicked on. To finish, obviously replace my domain with your own, and voilĂ .