IntroductionPreviewing the final project| 00:03 | Hi, this is Chris Converse, and this
is the course on creating a dropdown
| | 00:07 | menu for your web site.
I want to start by showing the Final Project.
| | 00:10 | So inside of the exercise files, you can
open up inside of Final Project, index.html.
| | 00:15 | And what we are going to do here is
take a standard unordered list, and we are
| | 00:19 | going to turn this into a dropdown menu.
| | 00:21 | So when I roll over individual items,
we can see a menu that animates down.
| | 00:25 | And we can even create submenus.
| | 00:26 | So under Link 4 here, for example, I
have Sub Link here, which will then open up
| | 00:30 | a third level menu navigation item.
| | 00:32 | So using a plug-in called jQuery Drop
Menu, we are going to take a standard
| | 00:36 | unordered list in HTML, like this, and
have the JavaScript in CSS conform that
| | 00:42 | into this menu that
functions like a dropdown system.
| | 00:45 | This is a very common technique
that you'll find among many jQuery and
| | 00:49 | JavaScript plug-ins that turn your
unordered lists into menus, and we are going
| | 00:53 | to walk step-by-step through how to do that.
| | 00:55 | Now, if you're not a premium subscriber
to the lynda.com online training library,
| | 00:58 | we are supplying folders 1 and 3 out of
the exercise files, which includes the
| | 01:03 | plug-in and all of the CSS files and
the Snippet files to help you create some
| | 01:08 | of the CSS rules inside of here.
| | 01:09 | So while you won't get the art
templates in Photoshop in the Final Project, you
| | 01:13 | will have enough contents so that you
can follow along in the course as well.
| | 01:16 | So I hope this sounds interesting to you, and
if so, let's get started with the first movie.
| | Collapse this transcript |
| Using the exercise files| 00:00 | Now, when you download the exercise
files, there are going to be four folders
| | 00:04 | inside of there, Files to add, Art
Templates, Snippet, and Final Project.
| | 00:09 | Now if you are a premium subscriber to
the lynda.com online training library,
| | 00:12 | you will have access to all of these folders.
| | 00:14 | If you're not a Premium Member, you'll
have access to a free version of these
| | 00:18 | exercise files, which includes folders 1 and 3.
| | 00:22 | Inside of folder 1 are all of the files
we are going to be adding to our project
| | 00:26 | to give us a jumpstart, including
inside of the add to includes folder, a copy
| | 00:30 | of jquery, a copy of dropmenu, two
CSS files, and a copy of a JS file that's
| | 00:36 | empty, but hooked into the HTML file
that's out here in the main folder so that
| | 00:41 | again you can get a jumpstart on a layout,
and we can focus strictly on building
| | 00:45 | the actual dropdown menu.
| | 00:47 | Inside of the Snippet folder are a
series of CSS rules that relate specifically
| | 00:51 | to the dropmenu plug-in, so I
have these rules here as well.
| | 00:54 | For the premium
subscribers, we have Art Templates.
| | 00:57 | We have a source Photoshop file with
all of the slices intact, so you can
| | 01:00 | customize your design before
saving out your slices if you want.
| | 01:04 | And in folder 4 is a copy of the Final Project.
| | 01:06 | This is a full copy of what we will be
creating throughout the course, and it's
| | 01:09 | also the project we looked
at in the introduction video.
| | 01:12 | So now that we are familiar with the
exercise files, in the next movie, we will
| | 01:15 | get started creating our project folders.
| | Collapse this transcript |
| Creating a folder and adding the starter files| 00:00 | Now to begin our project, let's
create a folder on the Desktop.
| | 00:04 | We will call this myMenu.
| | 00:08 | I am going to just resize this
and move it over here a little bit.
| | 00:12 | Inside of here, we are going to
create two additional folders,
| | 00:16 | one called includes, one called images.
| | 00:20 | Now let's come back to the exercise files,
let's come in to folder 1, Files to add.
| | 00:25 | Let's take the index.html file,
let's copy that into the main folder.
| | 00:29 | Let's come back, open up add to includes,
let's grab all of the files inside of
| | 00:34 | here, and let's drag a copy of these
into the includes folder that we created
| | 00:38 | inside of the myMenu folder.
| | 00:39 | Now inside of here we have a copy
of jquery-1.7, a copy of the dropmenu
| | 00:44 | plug-in, a menu CSS file for IE7 and 8,
a menu.css, which basically creates the
| | 00:52 | layout for the outermost page that we
are going to be working inside of, and a
| | 00:57 | menu.js file, there's nothing inside of this JS file
here, but it is hooked into the index.html file.
| | 01:02 | Now with these files in place, we can
open the index.html file up in a browser,
| | 01:07 | and we will see our base layout working here.
| | 01:09 | We have all our content that sort of
flows around inside of here, and up here is
| | 01:13 | where the background graphics are
going to showing inside of the header area.
| | 01:16 | And now that we have the base layout in
place, in the next movie, we will work
| | 01:20 | on some graphics for the layout.
| | Collapse this transcript |
|
|
1. Creating Web GraphicsSaving web graphics from Photoshop| 00:00 | Now to create the graphics for our
layout, let's come up to the folder 2, Art
| | 00:04 | Templates inside of the exercise files.
Let's open up template_items.psd.
| | 00:11 | Now inside of the Layers Panel, I
have a layer at the bottom called fpo.
| | 00:14 | This is simply just a gray layer,
but since we have some semi-transparent
| | 00:18 | artwork on the stage here, this is going to
make it easier for us to see that artwork.
| | 00:22 | So I am going to zoom up
here on the individual slices.
| | 00:25 | Now to get to the Slice tool, we are
going to come over here to the Cropping
| | 00:29 | tool, click and hold, and we will see
two Slice Tools here, the Slice Creation
| | 00:33 | tool, and the Slice Selection tool.
| | 00:34 | I am going to select the Slice
Selection tool, double-click on logo.
| | 00:38 | And here we can see the slice settings, the
Name is logo, the Width is 120, the Height is 70.
| | 00:45 | This is the semi-transparent ping file
that's used inside of the IE7 and 8 CSS file.
| | 00:50 | We'd use a semi-transparent ping
here since IE7 and 8 don't support
| | 00:54 | semi-transparency with CSS 3,
and this is set to 15 x 15.
| | 01:00 | And if I zoom up even further, we can
see the two small arrows, we are going to
| | 01:04 | use as indicators for our menu.
| | 01:05 | This is the down arrow set to 7 x 5,
and the right arrow set to 10 x 7.
| | 01:12 | Then lastly, if I zoom out we see
this large graphic across the top.
| | 01:16 | This has named banner, and
it's set to 980 x 150 pixels.
| | 01:21 | So before we save these out,
let's come back to the Layers panel.
| | 01:24 | Let's turn off the fpo layer, and let's
come under the File menu and come down
| | 01:28 | and choose Save for Web.
| | 01:30 | If you're using Photoshop CS2 to
Photoshop CS 5.5, this menu item will say Save
| | 01:35 | for Web and Devices.
| | 01:37 | In Photoshop CS6, which is what I am
using here, Adobe changed the name now
| | 01:41 | to just Save for Web.
| | 01:43 | When you select this, this is going to
bring up the dialog box giving us all of
| | 01:47 | the optimization settings for these slices.
| | 01:48 | So if I select this slice right here,
the very top one, I can see this is set to
| | 01:53 | a JPEG file, 75% Quality.
| | 01:54 | And in the lower left-hand area, I can see
that this is going to take up 32 kilobytes.
| | 01:59 | If I select the logo, this is going to
be saved as a 24-bit PNG, which is going
| | 02:04 | to give us all of that
semi-transparency as well.
| | 02:06 | And this slice here, 24-bit PNG for
the ie_transparency, and then the tiny
| | 02:11 | little slices here for the arrow
indicators, and I can zoom up on those as well.
| | 02:16 | Now all of these optimization settings
have been saved into this Photoshop file,
| | 02:19 | so all of these slices
will retain these settings.
| | 02:22 | Let's come down and hit Save.
| | 02:24 | Now from this Save As dialog box,
let's come under the Slices.
| | 02:27 | Make sure All User Slices is selected.
| | 02:29 | This tells Photoshop that any slice
that we have created will get saved out.
| | 02:33 | All of the additional slices that Photoshop
creates to complete the canvas will be ignored.
| | 02:38 | Let's come up here and choose myMenu.
Let's pick the images directory, let's hit Save.
| | 02:43 | Now move my document out of the way,
come back to the operating system, and now
| | 02:49 | inside of the images directory, we can
see all of those individual slices from
| | 02:52 | the Photoshop canvas are
saved as individual graphics.
| | 02:55 | I have arrow_down and arrow_right
saved out as GIF files, banner.jpg,
| | 02:59 | ie_transparency and logo
are saved out as PNG files.
| | 03:03 | Now that we have generated our graphics,
let's come back to the index.html file.
| | 03:07 | Let's open this up in a browser.
| | 03:09 | So in here we can see that our CSS
rules are kicking in and locking onto those
| | 03:13 | graphics, our logo is here
in the upper left-hand corner.
| | 03:16 | And we can see the graphic in the
background that's being applied to that header
| | 03:19 | element inside of our HTML file.
| | 03:22 | So now that we have all of the
graphics in place, in the next movie we will
| | 03:25 | start working on the HTML markup that we are going
to have our jQuery plug-in conform into a menu.
| | Collapse this transcript |
|
|
2. Adding HTML Adding a standard unordered (bulleted) list| 00:00 | Now to begin editing our HTML file, let's
open this file up inside of Dreamweaver.
| | 00:04 | Now if you have prefer to take
this course in a more code-oriented tool,
| | 00:07 | we're offering the same course in the
training library using Aptana Studio
| | 00:11 | instead of Dreamweaver.
| | 00:12 | Now inside of Dreamweaver you might
notice right away that this doesn't look
| | 00:16 | anything like what we saw on the browser.
| | 00:18 | If you're using Dreamweaver CS3 or
later, there's a Live View up here.
| | 00:22 | Clicking on Live View will actually
have Dreamweaver use its internal WebKit
| | 00:26 | rendering engine to show us what
this will look like in a browser.
| | 00:28 | When I come out of Live View however,
I am looking at a view here that doesn't
| | 00:33 | look exactly like what
we're seeing in our browser.
| | 00:35 | I can see all of the content, but
I am not seeing the full HTML5 layout.
| | 00:39 | Let's come over here to the Code
View of this particular document.
| | 00:42 | Now inside of here, one of the first things
you might notice is this gray block down here.
| | 00:46 | These are IE conditional rules.
| | 00:48 | Now on line 11, we're
bringing in the IE7 and 8 CSS file.
| | 00:52 | This is where we're going to use the
semitransparent PNG file, because IE7 and 8
| | 00:56 | don't support CSS3 transparency.
| | 00:58 | And then on line 12 here, we have
a link to the HTML5 Google Shiv.
| | 01:04 | What this does is use JavaScript to
take HTML5 elements, like header and
| | 01:09 | article and footer, and render them
in such a way that IE7 and 8 will
| | 01:13 | understand them as regular HTML.
| | 01:16 | So this gives us the ability to work
with HTML5 and still have our layouts work
| | 01:20 | back in browsers as old as IE7 and 8.
| | 01:23 | Other things you will notice at the top,
I have already hooked in the menu.css,
| | 01:27 | a copy of jQuery, the jquery.dropmenu,
and the menu.js, and in addition at the
| | 01:33 | very top, Dreamweaver shows you the related
files for the particular project we have open.
| | 01:37 | So I can click on each one of these
items here and see all of the related files.
| | 01:42 | So now I went ahead and set all of
this up because I wanted those to focus
| | 01:45 | specifically on the menu.
| | 01:47 | So if we come down into the
navigation area here, I have an HTML comment
| | 01:50 | called menu goes here.
| | 01:51 | So the first thing we're going
to do is add an unordered list.
| | 01:54 | So let's come down here and select
that entire comment, let's delete it, and
| | 01:59 | let's start by creating an unordered list.
| | 02:02 | So we'll start with a ul tag,
let's end that tag, let's open it up.
| | 02:08 | Inside here, we're going to add list
items, that's an li tag, let's end that.
| | 02:13 | So there is the first one
we're going to need four.
| | 02:17 | Let me copy that to the clipboard.
I am going to paste three more of these.
| | 02:22 | Let's come inside of the first one,
let's add an anchor link, a href equals,
| | 02:27 | we'll link that to a pound sign,
which is a self link, let's end the anchor
| | 02:32 | tag, let's copy that, let's paste that
inside each of the LIs we pasted earlier.
| | 02:40 | Let's get the cursor inside of the
anchor link for the very first one.
| | 02:44 | We're going to type Link 1, let's go
into the second one, Link 2, put Link 3 in
| | 02:54 | the third one, and Link 4 in the fourth one.
Let's choose File > Save.
| | 03:02 | Let's come up here in Dreamweaver,
and let's go into Split View.
| | 03:05 | So on the right-hand side, we can
see the unordered list that we created
| | 03:08 | showing up on the right-hand side here while
we're looking at the code on the left-hand side.
| | 03:14 | Most JavaScript in jQuery plug-ins
that create dropdown menus work off of
| | 03:17 | unordered lists and here we
have our base unordered list.
| | 03:20 | So this is going to
constitute the very topmost navigation.
| | 03:23 | In the next movie, we'll add some
nested lists inside up here, which will be
| | 03:27 | manipulated by the plug-in
to become dropdown menus.
| | Collapse this transcript |
| Nesting unordered lists| 00:00 | Now to create our first menu, we
need to create a nested unordered list.
| | 00:04 | So let's come in here under Link 1.
| | 00:06 | After the anchor link, but before the
ending li, let's hit a Return, let's split
| | 00:12 | that open, let's come inside of here,
and we're going to add another unordered
| | 00:16 | list inside of this list item.
| | 00:19 | So let's start with the ul tag, let's
end that tag, let's split that open, let's
| | 00:25 | open that up, add another list item
tag, end that tag. Let's copy that.
| | 00:34 | Let's paste that two more times, insert
another anchor link inside, make that a
| | 00:41 | self link, so we'll link it to a pound
sign, and the anchor tag, let's paste
| | 00:49 | that inside of each of other list
items. And for the very first one, inside of
| | 00:54 | the link area, we'll type Sub Link
space 1-1, let's copy that, and the second
| | 01:05 | one, we'll call that Link 1-2, and then 1-3.
| | 01:11 | One of the thing we're going to do
inside of here, let's add a class to the
| | 01:15 | middle one, and we're going to
set this class equal to selected.
| | 01:21 | Let me come over here and
open my split a little bit more.
| | 01:24 | So this selected class here is going to
allow our users to see what section of
| | 01:29 | the site they are already in, and you
can add a selected class to anyone of the
| | 01:33 | anchor tags to give indications on
where somebody is inside the navigation.
| | 01:37 | So now with our first submenu in place,
let's come up here, and let's select
| | 01:40 | that entire nested unordered list,
let's copy that to the clipboard, let's come
| | 01:45 | down to item number three, lets split
that list item open, let's paste in that
| | 01:52 | submenu, let's come in here and call
this Sub Link 3, let's take off this
| | 01:58 | selected class on the second one, and
we'll call the Sub Link 3-2, and 3-3.
| | 02:07 | Now that we have two nested unordered
lists in place, one under Link 1, and one
| | 02:11 | under Link 3, in the next movie, we're
going to add a nested list to Link 4, and
| | 02:16 | then we're going to put a nested list
inside of that nested list, that's going
| | 02:19 | to give us that third level menu
that we saw in the Introduction video.
| | Collapse this transcript |
| Nesting a list within another nested list| 00:00 | Now to prepare HTML for a third level
navigation system, let's come up here to
| | 00:05 | the nested unordered list
inside of Link 3. Let's copy that.
| | 00:10 | Let's come down to Link 4
before the ending list item tag.
| | 00:13 | Let's hit a few returns, split that open, let's
paste in all of the links for the Sub Link here.
| | 00:20 | Let's change 3s to a 4.
So now we have Sub Link 4-1, 4-2 and 4-3.
| | 00:26 | Now let's add a nested list inside of link 4-2.
| | 00:30 | So let's come inside of here before
the ending list item tag, let's hit
| | 00:34 | Return, split that open, let's
paste those links inside of here.
| | 00:40 | So let's come in here and change these.
| | 00:43 | This is going to be 4-1, 4-2, and 4-3, but
then we're going set -2 for each one of these.
| | 00:54 | So now we have Sub Link 4-2-1, 4-2-2, and 4-2-3.
| | 01:00 | So these are three sub links inside Sub
Link 4-2, which is a sub link of Link 4.
| | 01:06 | Now save your work. And to get a quick
idea of what this is starting to look
| | 01:10 | like, let's come over
here and click on Live View.
| | 01:13 | Over here in the right-hand side, we'll
see all of those unordered lists in place.
| | 01:17 | Now this does look like a little bit of a mess.
| | 01:19 | We need to use CSS and JavaScript to
take this unordered list and relay it out
| | 01:23 | and set the submenus to be hidden until
we actually roll over them, but before
| | 01:27 | we get to that point, we can actually see here
that the unordered list is structured properly.
| | 01:31 | Link 1 with its three sub links, Link
2 has nothing, Link 3 has one sub list,
| | 01:37 | Link 4 has a sub list, and then Sub
Link 4-2 has three under there as well.
| | 01:43 | Now that we have all of the markup in place,
let's come up here and turn off Live View.
| | 01:47 | Now the last thing we need to do
before we can style this is add a class
| | 01:51 | onto the parent ul.
So let's come back in to our HTML.
| | 01:54 | The very first unordered list
inside of the nav item, inside of the ul
| | 01:57 | tag, let's hit a Space.
We're going to add a class of dropmenu.
| | 02:03 | This is going to be the class that both
the CSS and the jQuery plug-in is going
| | 02:08 | to lock onto to convert all
this markup into a dropdown menu.
| | 02:11 | So now that we have this in place, in the next
movie we can work on styling the menu with CSS.
| | Collapse this transcript |
|
|
3. Styling and Activating the MenusAdding CSS rules to style the menu| 00:00 | Now there is a fair amount of CSS that
goes along with styling these dropdown menus.
| | 00:04 | So I have gone ahead and created the
snippet to kind of give us a jumpstart.
| | 00:07 | So from Dreamweaver come up to
the File menu, let's choose Open.
| | 00:11 | Go into the exercise files, folder
3, and let's open up dropmenu.css.
| | 00:17 | So in here I have added a bunch of
comments to help you understand what part of
| | 00:20 | the dropdown menu each one
of these styles is affecting.
| | 00:23 | So all items, top items are the ones
that go across the very top, the sub items
| | 00:28 | are the first level dropdown menus,
and then the sub sub-items, which is the
| | 00:31 | third-level menu items.
And down here we also have the indicators.
| | 00:35 | These are custom CSS rules that I have
added into this particular plug-in, and
| | 00:39 | we're going to look at activating with the
jQuery, adding indicators to those menus.
| | 00:44 | This plug-in doesn't actually have
that built-in to the architecture.
| | 00:47 | Now I'd also like to call your attention to the
display: none attribute here that's inside of the main dropmenu.
| | 00:53 | This is going to be applied to the UL, where we
just applied a dropmenu class in the last movie.
| | 00:59 | So what this is going to do is
through CSS hide this entire menu.
| | 01:03 | So what's going to happen is the
entire menu is going to be hidden, and then
| | 01:07 | when the jQuery plug-in initializes,
it's going to turn the menu from being
| | 01:10 | invisible to being visible.
| | 01:11 | This way your users don't see a huge
unordered list before the JavaScript has a
| | 01:16 | chance to manipulate the
layout to turn it into menus.
| | 01:19 | So now inside of the snippet, let's copy
all of this code, let's copy it to the
| | 01:24 | clipboard, and then close this
file, back in our index.html file.
| | 01:28 | If you're using Dreamweaver CS4 or later,
you see all of these related fields here.
| | 01:32 | I can simply come in here and
click on menu.css and access that file.
| | 01:37 | Earlier versions of Dreamweaver, you
can go to the File menu and just open the
| | 01:41 | menu.css in the myMenu
folder we created on the desktop.
| | 01:45 | So inside of the menu.css let's come
down to the bottom. I have the first rule
| | 01:49 | in here already for nav menu.
| | 01:51 | Let's hit Return, let's paste in all of
the CSS rules, and choose File > Save.
| | 01:57 | Now if we click on Live View, we'll see
over here in the preview area the menu is
| | 02:01 | actually hidden because of that display
none on the topmost item, but all of the
| | 02:06 | CSS rules are taking effect on those
actual items, even though the main item has
| | 02:10 | a display set to none.
So now all of the markup in CSS is in place.
| | 02:14 | In the next movie we can modify
the JavaScript file to initialize the
| | 02:17 | plug-in against our markup.
| | Collapse this transcript |
| Activating the plug-in with jQuery| 00:00 | Now, to activate the jQuery menu plug-in,
we're going to come over to the menu.js file.
| | 00:05 | If your version of Dreamweaver
supports these related files up here, you can
| | 00:07 | simply click on this, and we can
work right inside of this window.
| | 00:12 | If you don't have the related files
here in Dreamweaver you can go to the File
| | 00:14 | menu, choose Open, and then choose
the menu.css file inside of the Includes
| | 00:19 | folder, inside of the myMenu
folder we created on the Desktop.
| | 00:22 | So now inside of this JavaScript file
here, we're going to start with the jQuery
| | 00:26 | document ready structure.
| | 00:27 | So we're going to type dollar sign,
beginning and ending parentheses,
| | 00:33 | inside of the parentheses we're
going to type document, outside of the
| | 00:38 | parentheses we're going to type ready,
beginning and ending parentheses, then a semicolon.
| | 00:45 | Inside of ready we're going to type
Function, beginning and ending parentheses,
| | 00:52 | beginning and ending bracket,
split that open on the brackets.
| | 00:55 | Now the first thing we want to do is
set that unordered list to display type of
| | 00:59 | block so that it becomes visible.
| | 01:01 | So let's start with a dollar sign
beginning and ending parentheses,
| | 01:06 | inside of the parentheses two tick
marks for string literal, I am going to type
| | 01:12 | .nav_menu, space, .dropmenu, and
outside of the parentheses we're going to type
| | 01:21 | .css;, inside we're going to
type two tick marks for string literal.
| | 01:31 | First property is going be 'display',
outside of the string literal but still
| | 01:35 | inside of the parentheses, comma,
two more tick marks for another string
| | 01:39 | literal, then type 'block'.
So we're going to set the display type to block.
| | 01:46 | Let's hit a few returns, now let's
activate the menu, dollar sign
| | 01:50 | parentheses, tick marks inside of
the parentheses for string literal,
| | 01:59 | '.nav_menu, then a space, then a greater
than sign, then space, then ul'.
| | 02:06 | So what the greater than sign
does is it targets the direct children ul
| | 02:11 | that are inside of the .nav_menu class.
| | 02:15 | Outside of the parentheses, .dropmenu, inside of the
parentheses, semicolon, beginning and ending bracket.
| | 02:26 | Let's split that open on the
brackets, so this becomes a custom jQuery
| | 02:31 | instruction that we can
actually assign to objects.
| | 02:33 | Now inside of the dropmenu
instruction we can assign a bunch of
| | 02:37 | different parameters.
| | 02:40 | First one is going to be effect, colon
space, two tick marks for string literal,
| | 02:46 | 'slide', then a comma.
| | 02:49 | On the next line speed, we're going
to set the speed to 250 milliseconds or
| | 02:57 | quarter per second, and again you can
change any of these affects that you want.
| | 03:01 | Let's hit Return. We're going to set a
timeout to zero. What that does is how
| | 03:08 | long does the menu take to roll
back up once the user rolls off of it.
| | 03:12 | You can actually have it linger for a
second or two if you'd like.
| | 03:15 | Setting timeout to zero means that
they'll just scroll back up immediately.
| | 03:18 | Next line, we're going to set
non-breaking space to false.
| | 03:27 | If we were to set that to true, the menus
would lock down to a certain width, and
| | 03:30 | we would get a lot of text wrapping, but
in this case I don't have that happen I
| | 03:34 | just want those to be opened up.
| | 03:36 | And then make sure you don't put a
comma after the last item, so we need to
| | 03:40 | have a comma in between each one of the different
settings and the last one doesn't get a comma.
| | 03:45 | And all of these settings are contained
within the set of brackets right here.
| | 03:50 | So now we have this in place, let's
choose File > Save, and come out of Live
| | 03:54 | View, let me bring this split down
here a little bit. Let's go back into Live
| | 03:58 | View, and we should be able to
interact with the menus inside of Dreamweaver.
| | 04:02 | So if I rollover the Link 1, I can see
the submenu animates open, takes 250
| | 04:06 | milliseconds to the animate open.
| | 04:08 | Link 2 doesn't have a menu, Link 3 has a menu,
and Link 4 has a menu and also has a submenu.
| | 04:15 | So when I go over 4-2, we can see the
three links we put inside of that nested
| | 04:20 | list, with 4-2-1, 2, and 3.
| | 04:24 | Now that our menus work, the only thing
we have left to do is to give our users
| | 04:28 | an indication that there's a menu.
| | 04:29 | So we'll see right here links 1, 3,
and 4 have the submenus, but we don't see
| | 04:34 | that little arrow here, and under Link 4,
Link 4-2 has a menu, but we don't see
| | 04:37 | the indication here as well.
| | 04:38 | So using jQuery in the next movie
we're going to add custom classes onto any
| | 04:43 | item that does have a submenu.
| | Collapse this transcript |
| Targeting parent items with a special CSS class| 00:00 | Now to add custom classes on to all the
list items that have submenus inside of
| | 00:05 | the document ready after the drop menu
instruction that we assigned, let's add a few returns.
| | 00:10 | Let's start by typing dollar sign,
beginning and ending parentheses.
| | 00:16 | Inside the parentheses, two tick marks for a
string literal, we're going to search for list items.
| | 00:21 | Outside of the parentheses .has
parentheses, inside of the parentheses two tick
| | 00:28 | marks for a string literal,
we're going to type 'ul'.
| | 00:33 | So we're looking for all list items
that have the ul item inside of them.
| | 00:37 | Then we're going to type .find,
beginning and ending parentheses. Inside of find
| | 00:45 | parentheses tick marks for a string literal.
| | 00:47 | We're going to type greater than, space, a.
| | 00:52 | Outside of the parentheses we'll
type addClass, beginning and ending
| | 00:58 | parentheses, semicolon.
| | 01:00 | Inside of addClass, two tick
marks for a string literal.
| | 01:05 | We are going to type 'indicator'.
| | 01:08 | So what this is basically doing is
we're looking for every list item if it has
| | 01:12 | an unordered list as one of its
children, we're going to find the immediate
| | 01:17 | anchor tag inside of that list item.
| | 01:20 | And if this is true, which means there
is an anchor tag inside of an unordered
| | 01:24 | list inside of a list item, we're
going to add a class called indicator.
| | 01:30 | And if we remember back to our CSS file
at the very bottom, we have a.indicator,
| | 01:37 | and we set the background to arrow right, and
if it's a top-level item we set it to arrow down.
| | 01:41 | So let's come back to our Source Code,
let's come back to Live View or you can
| | 01:45 | previous this in a browser.
| | 01:47 | And now we'll see that every item that
has a submenu has an indicator here as well.
| | 01:51 | So Link 1 in 3 have the down arrow,
Link 4 has a down arrow, and then the second
| | 01:56 | item here has a rightmost arrow.
| | 01:58 | So now we have indicators showing our
users which one of these menus actually
| | 02:01 | have submenus associated to them.
| | 02:03 | So at this point we have completed adding
a jQuery dropdown menu to our web site.
| | 02:06 | In the next movie we'll talk about
where you might want to go from here.
| | Collapse this transcript |
|
|
Where to Go from HereMore resources for additional menu plug-ins| 00:00 | Now if you do a search for jQuery
dropdown menus in your favorite search
| | 00:03 | engine, you'll find dozens of plug-ins
to do something very similar to what we
| | 00:07 | were just doing in this particular course.
| | 00:09 | And tons of different menu systems
have different animation styles or design
| | 00:12 | styles, and you'll even
see groups of comparisons.
| | 00:16 | So here we see 38 different plug-ins
compared, 22 or 25, and if we go look at
| | 00:22 | those individual sites, they'll give
you a screenshot of what that particular
| | 00:24 | plug-in looks like and then give you
the ability to download all of the files.
| | 00:29 | So again, as you go through these
different sections, you'll see all kinds of
| | 00:31 | different animation styles, design
styles, and the process for putting these
| | 00:35 | together is very similar to
what we just did in this course.
| | 00:38 | The reason I picked the drop menu in
this particular course was that it's a
| | 00:41 | really small file and has a very
little amount of CSS associated to it.
| | 00:45 | But once you get the hang of using a
particular plug-in, using additional
| | 00:48 | plug-ins from other
resource will become a lot easier.
| | 00:51 | And with that, I wish you all the luck
in building some cool dropdown menus for
| | 00:54 | your web site, and I really
appreciate you watching my course.
| | Collapse this transcript |
|
|
