Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Creating jQuery animated image menus

From: Site Navigation with CSS in Dreamweaver

Video: Creating jQuery animated image menus

JavaScript frameworks have created a revolution in web design by bringing complex functionality within reach of everyday web designers. In this video, I'll show you how to combine CSS and one of the most popular frameworks, jQuery, to create a dynamic, animated menu. Let me show you the final product that we're aiming for. Here you see five navigation categories up top. When I move over it, four of the navigation categories move over, and the same thing happens as I scroll over each of the animated menus.

Creating jQuery animated image menus

JavaScript frameworks have created a revolution in web design by bringing complex functionality within reach of everyday web designers. In this video, I'll show you how to combine CSS and one of the most popular frameworks, jQuery, to create a dynamic, animated menu. Let me show you the final product that we're aiming for. Here you see five navigation categories up top. When I move over it, four of the navigation categories move over, and the same thing happens as I scroll over each of the animated menus.

They roll into view, and the other ones are slightly hidden but still accessible. So if I want to choose one from the middle and then roll off, everything is animated from left to right, complete with some very nice kind of easing that you'll see here with the animations. This is hours of fun to play with. Let me tell you. So let's go ahead and start with the index.htm file. And as you can see, we have to start with--surprise, surprise--an unordered lists for the navigation. Now each of these items as I go to Split view, you can see has its own id, homenav, eventsnav, companynav, and so on.

So I've taken the liberty of going ahead and creating a blank CSS file for us and already linked it, and let's start by building out the CSS. First, we are going to go ahead and tackle the nav div itself, and for that we'll start by putting in the width of 630 pixels and we want to make sure that we keep everything within the width, so I am going to add an overflow property here and then hide that and zero out the margins.

I'll just close off the rule here. Now, let's move on to the UL, or unordered list, tag within the nav div, and as we've done previously in the course, we're going to get rid of the bullets by going to list-style and setting that property to none. Now we need to make a margin adjustment for the unordered list, and I am going to set that 0 0 0, which sets everything to zero except for the left, which I'll set at -40 pixels.

Finally, I'm going to set the width to the UL element to a whopping 1,600 pixels wide. This is the width of all of the pictures which are each 320 pixels times five, which is necessary to contain it. Now because we have overflow hidden up here, you won't see those elements. So let me close out the nav ul rule. And the next thing to do is address the list item, and all we are going to have to do with that one is just float it to the left-- again, because we want our list items to appear in a horizontal fashion.

So, we'll do nav ul li, and I'll set the float property to the left and close that rule. Next, we'll work with the anchor tag, and as usual, it's doing much of the heavy lifting. In addition to hiding the text links, this rule will also set the width for the closed panels. So I'll go ahead and write out the selector, nav ul li a, and do my open and closing curly brace here. I mentioned that I was going to hide the text links, and I'll do that by using a text-indent property set to a -2,000 pixels.

Now, let's go ahead and set up the background, and I am going to set that to white with no image, and I can finish off this declaration with a semicolon. Next, I want to add a border separating each of the images, so I am going to choose a border right and set that two pixels wide, make it solid, and we'll use a white color there. Next, I am going to add in a cursor specifier for Internet Explorer so that it doesn't have to worry about what kind of cursor to use.

Again, with the anchor tag, as we often do, we'll put in a display block to increase the size of the hit area. Now we'll set the width, and this will be the width of each of the images when they are closed. So that's going to be 78 pixels, and the height is consistent throughout, and that's 200 pixels. So now if I switch over to Design view, drop out of Live view here, you can see the shape beginning to take form, and now it's time to bring in the images.

So go back to nav.css and create the first one, which is going to be nav ul li, and we are going to target the first list item, which is home. And if you recall, that ID was homenav, and we're looking exactly at the anchor tag that's in that list item, and we want to bring in the background URL. And you want to make sure that you're in the exercise files Chapter 07 folder, in the 07_01, and drill down to the images folder, and here you'll see a series of images, each starting with the initials dw.

We are looking for dw_home.jpg, click on Choose, and we want this to repeat with a special value of scroll set to 0%. So now this rule is essentially the same one that we are going to use for all of the pictures. So I am going to go ahead and copy that, paste it, and let's go ahead and update the selector first, which is events. And the name of the picture is also dw_events, and then we'll paste in another copy and change the selector to company and the picture name to dw_company.

The fourth one is gallery, and the final one is booking. Now, we do need to add one more property to this final one in order for that to be the image that is remaining open, and we want to give that a minimum width property of 320 pixels. So now let's take a look at how it's working in Live view.

It looks like we've got everything in place, and of course there is a little magic already buried in the page, and that's the JavaScript. And I just want to take you through a quick tour of the JavaScript, just so you see a little bit of what's going on. So let's Code view, and you can see there are a series of script links here that are bringing in extra code libraries. The primary one is the jQuery code library that we're hot-linking to, and this is from jquery.com. jQuery 1.5 is the latest version as of the recording of this course, and then there are a couple of other easing libraries.

Easing is an animation term that makes movement seem more natural. Here is the open script tag, and this is a very common thing that you'll see in jQuery where it is the functionality that says 'wait till the document is ready and fully loaded and then begin doing your functions'. As you can see, there are a series of functions that are geared to the hover state, and once something is being animated, classes are added and animations are begun and the time for the animation is set and the type of easing is established.

Diving too deep into jQuery is beyond the scope of this course, but if you find the time to do it, you will be richly rewarded. As you can tell, while it takes a bit of work and stretching your skill set a tad, you can really create some killer navigation by combining CSS with a JavaScript framework like jQuery.

Show transcript

This video is part of

Image for Site Navigation with CSS in Dreamweaver
Site Navigation with CSS in Dreamweaver

40 video lessons · 18145 viewers

Joseph Lowery
Author

 
Expand all | Collapse all
  1. 2m 20s
    1. Welcome
      1m 2s
    2. Using the exercise files
      1m 18s
  2. 9m 26s
    1. Using icons in navigation
      2m 14s
    2. Understanding 3D nav bars
      2m 25s
    3. Understanding explanatory navigation
      1m 51s
    4. Creating animated navigation
      2m 56s
  3. 1h 14m
    1. Inserting Spry horizontal menus
      7m 4s
    2. Styling Spry menus
      6m 29s
    3. Adding Spry vertical menus
      5m 7s
    4. Styling Spry vertical menus
      10m 53s
    5. Using Spry tabbed navigation
      9m 33s
    6. Styling Spry tabbed menus
      9m 55s
    7. Including Spry accordion panel menus
      5m 32s
    8. Styling Spry accordion menus
      11m 10s
    9. Advanced Spry menu techniques
      8m 32s
  4. 35m 45s
    1. Converting lists to menus
      7m 56s
    2. Working with background images
      5m 47s
    3. Implementing sprites
      5m 53s
    4. Setting up adjustable backgrounds
      9m 4s
    5. Designing accessible navigation
      7m 5s
  5. 30m 34s
    1. Looking at the project
      1m 4s
    2. Building up the basic HTML
      2m 9s
    3. Displaying top-level links horizontally
      8m 12s
    4. Customizing the link states
      4m 29s
    5. Adding drop-down menus (HTML)
      3m 48s
    6. Working with submenus (CSS)
      4m 8s
    7. Achieving interactive submenus
      2m 21s
    8. Marking the current page
      4m 23s
  6. 23m 13s
    1. Looking at the project
      57s
    2. Understanding vertical menus
      2m 15s
    3. Defining width for link elements
      4m 43s
    4. Using background graphics with navigation
      5m 45s
    5. Creating pop-out vertical navigation
      6m 29s
    6. Setting link states
      3m 4s
  7. 10m 13s
    1. Identifying anchor tags
      7m 4s
    2. Identifying external links
      3m 9s
  8. 18m 14s
    1. Creating jQuery animated image menus
      7m 45s
    2. Using the HTML5 nav tag
      3m 24s
    3. Exploring CSS3 enhancements
      7m 5s
  9. 28s
    1. Next steps
      28s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Site Navigation with CSS in Dreamweaver.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.