arrow

jQuery Dropdowns

Here I will demonstrate some of jQuery's ability to make drop down menus and some nice effects that you can do while hovering over something.

Dropdown Menu

This is most likely something that you have seen before on other sites. This is an animated dropdown menu that slowly drops the menu elements down instead of just having them appear on the page like normal. There are many ways to do this but here is one example of how it can be done.

$(document).ready(function(){
/* This tells the code only to run after the page has finished loading */

$('#menu li ol').css({
display: "none",
/* This gives a css rule of display none to all ol tags that are inside of an li tag that are inside of a tag with an id of menu. We use jQuery to do this so that if the user has javascript disabled, the drop down will still display for them. */

})
$('#menu li').hoverIntent(function() {
/* This selects all li's inside of the menu id and loads up the hoverIntent function that is inside the hoverintent plugin */

$(this)
/* In this case, "this" refers to which ever menu option the user hovers over */

.find('ol')
/* This looks for the next ol inside of what the user hovers over. In this case, the dropdown menu */

.stop(true, true)
/* This stops any animation that is already in motion. This is so that the menu does not continue to open and close with repeated hovers */

.slideDown('fast'); },
/* This is what kind of hover effect to give. We are giving the menu a slideDown effect at a fast pace */

function() {
$(this)
.find('ol')
.stop(true,true)
.slideUp('fast');
/* This chunk of code does the same as the the first only as a hover off */

}); });


Hover Tooltips

This is something that used to be very popular but has fallen off a bit though is still a nice effect. When hovered over a text box will follow your mouse and show the title tag of your link, image, or pretty much anything you want.

Startart Logo

$(document).ready(function(){
/* This tells the code only to run after the page has finished loading */

$('tooltiplink').hover(function(event){
var titleText = $(this).attr('title');
$(this)
.data('tipText', titleText)
.removeAttr('title');
/* This tells the code to look for any tag with the class of tooltiplink and on hover creates a new variable named titleText that holds whatever the is in the title attribute of the hovered item then stores it in .data under the name tipText then removes the title attribute from the element */

$('<p class="tooltip"></p>')
.text(titleText)
.appendTo('body')
.css('top', (event.pageY - 10) + 'px')
.css('left', (event.pageX + 20) + 'px')
.fadeIn('slow');
/* This part of the code makes a new p tag on the page with a class of tooltip and places it inside of the body tag. It then gives CSS to the p tag so it will appear wherever the mouse currently is placed and slowly fades it in. */

}, function() {
$(this).attr('title', $(this).data('tipText'));
$('.tooltip').remove();
/* This part of the code starts a new function for when the mouse is moved off of the hovered tag. It removes anything with the class of tooltip which makes the tooltip dissapear when hovered off of. */

}).mousemove(function(event){
$('.tooltip')
.css('top', (event.pageY - 10) + 'px')
.css('left', (event.pageX + 20) + 'px');
/* This is what keeps the tooltip aligned with the mouse as it hovers over the element. the .mousemove function tracks the mouse as it moves and applys new css as needed. */

});
});


Animated Sidebar / Navigation

This is something some sites use as a second level navigation or an additional sidebar on the left side of the screen. It is usually seen as a button on the left side that when clicked will open up into a new sidebar. This is one way to make that happen.

$(document).ready(function(){
$('<div></div>')
.attr('id', 'overlay')
.css('opacity', 0.65)
/* This adds a new div to the page and gives it an id of overlay. Then applies CSS to the div of opacity .65 */

.hover(function(){
$(this).addClass('active');
}, function() {
$(this).removeClass('active');
/* This part of the code is for the hover function. When hovered over it adds a class of active to the div then removes the class when hovered off of */

setTimeout(function(){
$('#overlay:not(.active)').slideUp(function(){
$('.overlayhover').removeClass('overlayhover');
});
}, 800);
/* This starts a timer that in 800 miliseconds will check if something with an id of overlay has a class of active, if not then it starts the slide up function and looks for something with the class of overlayhover, and removes it */

}).appendTo('body');
/* This places the div right after the body tag */

$('#overlaybutton').click(function(){
$(this).addClass('overlayhover');
$('#overlay:not(:animated)')
.addClass('active')
/* This part looks for something with the id of overlaybutton and when clicked adds the class of overlayhover. Then if something with an id of overlay is not animated, it adds the class active to it */

.html('<h1 id="sidebaroverlay">Additional Sidebar</h1><div><p>This section could be used for additional sidebar links, navigation, sidebar information, and much more.</p></div>')
.slideDown();
/* This is the html that is put into the sidebar. It has to be inside of the .html function and all in one line. Next is the type of animation to use for the slider, we are using the slideDown effect */

});
});