jQuery Menu w/ Drop Down Tutorial

Afraz Shahid — Mon, 30 May 2011 06:01:23 +0000

Before 2006, it was not possible to make transitions, animations and other decent web stuff quickly within seconds. You will find a lot of plugins for menus, banners, etc. for the jQuery.

With the same purpose, my today’s tutorial is about a menu which has all the decent and stylish animated functionality, what you may be looking for. I’ll not go into details of HTML and CSS, I’m assuming you know about that or you can copy the HTML and CSS from below.

Slicing PSD

We have a free PSD for this tutorial and we’re using that in our tutorial, scroll down to download the PSD. Following is the snapshot how we will slice out.

The HTML Structure

As you can see in the PSD, there are Menu items and one Search Bar on right side. The HTML for all those elements goes here.


	
		Home

			
				Sub Menu Item 1
				Sub Menu Item 2
				Sub Menu Item 3
				Sub Menu Item 4
				Sub Menu Item 5

			

		
		Services

			
				Sub Menu Item 1
				Sub Menu Item 2
				Sub Menu Item 3
				Sub Menu Item 4
				Sub Menu Item 5

			

		
		Portfolio

			
				Sub Menu Item 1
				Sub Menu Item 2
				Sub Menu Item 3
				Sub Menu Item 4
				Sub Menu Item 5

			

		
		Contact

			
				Sub Menu Item 1
				Sub Menu Item 2
				Sub Menu Item 3
				Sub Menu Item 4
				Sub Menu Item 5

Keep in mind I’ve added sub menus within the list item.

The CSS

Below is the CSS which used to format the menu. Apply the styles and see results in browser.

.main-navigation{
	width:890px;
	height:44px;
	border:1px dashed #a2d2cf;
	background:url(../images/nav-bg.jpg) left repeat-x;
	top:50%;
	left:50%;
	margin:-22px 0 0 -445px;
	position:absolute;
	}

ul{
	margin:0px;
	padding:0px;
	list-style:none;

	}

li{
	float:left;
	font-size:15px;
	color:#FFFFFF;
	height:42px;
	display:block;
	position:relative;

	}

li .hover{
	color:#FFFFFF;
	text-decoration:none;
	position:absolute;
	background:url(../images/hover-bg.png) top left no-repeat;
	top:0;
	left:0;
	z-index:0;
	height:44px;
	display:none;
	}

li a{
	display:block;
	color:#FFFFFF;
	text-decoration:none;
	padding:14px 43px 13px 44px;
	z-index:1000;
	position:relative;
	}

.search{
	float:right;
	margin:9px 26px 0 0;
	padding:0px;
	}

.search-input{
	font-family:LucidaGrande, Lucida Sans, Arial;
	font-size:12px;
	color:#FFFFFF;
	width:117px;
	height:26px;
	padding:0 5px 0 10px;
	padding:5px 5px 0 10px \9;/* IE 7 and 8 */
	border:0;
	outline:none;
	background:url(../images/search-input-bg.png) top left no-repeat;
	float:left;
	}

.search-btn{
	width:37px;
	height:26px;
	border:0;
	outline:none;
	background:url(../images/search-btn.png) top left no-repeat;
	float:left;
	}

ul li ul{
	width:200px;
	position:absolute;
	display:none;
	top:44px;
	padding:1px 0 0 0;
	}

ul li:hover ul{

	display:block;

	}

ul li ul li{
	display:block;
	padding:10px 10px 10px 0;
	width:200px;
	padding:0px;
	margin:0px;
	background:url(../images/nav-bg.jpg) left repeat-x;
	position:relative;
	}

ul li ul li a{
	display:block;
	color:#FFFFFF;
	text-decoration:none;
	padding:14px 43px 13px 28px;
	z-index:1000;
	position:relative;
	}

Now you can view a decent looking menu with search box. You can check it’s functionality, it’s simple. Now we go ahead and work with jQuery to apply some effects to look it more decent. Here is the CSS menu snapshot.

The jQuery

Now, the actual part of tutorial begins here. I will teach you step by step here. Go to the head section of your page and paste the following code.

I’ve included jQuery library from google libraries. After that, a normal script is started and in the //

After this, we will go for another function. That will do the same as we use some mouseover and mouseout functions. Let’s see the code.

$("li").hover(function() {
	//This function will call the HOVER event on any li.
} , function() {
	//This function will call the HOVER OUT event on the li which was hovered.
});

A basic function is ready and we will add all the transitions for menu here.

var itemwidth = $(this).width(); /* Getting the LI width */
$(this).prepend("
"); /* Inserting a blank div into within li above the  tag*/
$(this).find("div").fadeIn('10000').css({ 'width' : itemwidth}); /* Using the itemwidth for the div to display properly*/
$(this).find("ul").fadeIn('1000').slideDown('10000').css("display", "block");

After putting the above code into HOVER function, our code will look like this.

Now, we will work down the HOVER OUT event. Remove the HOVER OUT comments and put the following code in it.

$(this).find("div").slideUp('1000').fadeOut('1000');/* sliding up and fading out the hover div */
$(this).find("div").remove();/* removing the  code from html at every mouseout event*/
$(this).find("ul").fadeOut('1000'); /* fading out the sub menu */

Well. If you test the menu, it’s really amazing drop down and hover effects. The menu part has been done. We will go ahead and work on the animation of search box.

We will create two functions here. Focus and Focus out. Both are as follows:


$(".search-input").focus(function(){
$(this).animate({width:'180px'}, 500); /* on focus, increasing the input width of search to left side*/
	});

$(".search-input").focusout(function(){
	$(this).animate({width:'117px'}, 500);  /* on focus, decreasing the input width of search to left side*/
	});

Your jQuery menu including sub menu and search box are ready to use.

Conclusion

There are thousands of jQuery plugins available to use but the purpose of this tutorial is to give you a detailed practice how the jQuery work and how it creates animation in no time. I hope you will like the menu and give us feedback.

Simple jQuery/CSS3 Modal Box

Lee Grant — Sun, 20 Mar 2011 20:18:09 +0000

Seeing as how my last tutorial about the “jQuery slide effect” had a great response I thought I’d be back to write another simple easy-to-follow jQuery tutorial for you guys.

What we’ll be making today is a jQuery modal box which can be used can used for all sorts including images, forms and in my case, my blogging profile.

The Live Demo

You can view the Live Demo Here

What Makes This Effect

HTML
CSS3
jQuery
Dreamweaver (or your favorite text editor)

New document

For the purpose of this tutorial I will include all css and jQuery in one file (index.html) but would advise not to do so when using this script in a live website, always call you styles and jQuery from an external file.

With that done and said, create yourself a new html file and name it index.html

Calling jQuery

I like to use google’s jQuery, it’s useful if your user has already visited a site using google hosted jQuery as it’ll be cached on their machine already.

So, in your document inside the head section insert the following script tag.

Some markup

We’ll start by creating our modal box, using only on div to contain our elements such a heading, a few paragraphs and some social media icons. You can use the images included in the download or simply link to my online images.


Nam liber tempor cum soluta nobis eleifend
    

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit littera um formas humanitatis per seacula quarta decima et quinta decima.Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.

Style the modal box

With the barebones of the modal box set up, it’s time to bring it to life with some styling. We’re going to be using a little bit off css3 to give our modal box some nicely rounded corners and a box shadow, as in most cases internet explorer doesn’t recognise the css rule “border-radius” and will show squared corners instead.

.modal-profile h2 {
	font-size:2em;
	letter-spacing:-1px;
}
.modal-profile {
	display:none;
	height: 250px;
	width: 500px;
	padding:25px;
	border:1px solid #fff;
	box-shadow: 0px 2px 7px #292929;
	-moz-box-shadow: 0px 2px 7px #292929;
	-webkit-box-shadow: 0px 2px 7px #292929;
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	background: #f2f2f2;
	z-index:50;
}
a.modal-close-profile {
	position:absolute;
	top:-15px;
	right:-15px;
}
a.modal-social {
	margin:0 10px 0 0;
}

-moz-box-shadow
Allows mozilla firefox to recognise the box shadow property

-webkit-box-shadow
Allows google chrome to recognise the box shadow property

-moz-border-radius
Allows mozilla firefox to recognise the border radius property

-webkit-border-radius
Allows google chrome to recognise the border radius property

Lights out

To create the block overlay on the body of our webpage once the modal box is opened we’ll be creating an effect known as “lights out”, quite self explanatory as it give the illusion of flicking the light switch off on our webpage.

Create a new div below our modal box with the class of “modal-lightsout” like so.

Thats’s it, just one div, simple right?

Now to apply some css to position the div and apply a black background (you could use white for this tutorial if you have a lighter website).

.modal-lightsout {
	display:none;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	z-index:25;
	background:#000;
}

Make it pop with jQuery

Now with all our markup and styles set it’s time to make things work with the help of jQuery. Apply this code in your head section below you google jQuery reference

Creating the link

Our modal box is now complete and ready for action, all it takes is us to create a link to call it. It’s important that for any link we want to use our modal box we apply the “rel” name of “modal-profile” like this.

Open modal box

Simples!

This was just a basic and simple way of creating a modal box, there are plenty of other ways to do this I just thought I’d show you how I do mine. As stated, this is great to use as a profile pop-up, or be a little more creative and show us what you’ve done? Hope you’ve enjoyed the read.

hv-designs » jquery