Viewers: in countries Watching now:
To preview the finished project, visit: http://codifydesign.com/chris/lynda/samples/course-0015
This course was created and produced by Chris Converse. We are honored to host his material in the lynda.com online training library.
Now to add custom classes on to all the list items that have submenus inside of the document ready after the drop menu instruction that we assigned, let's add a few returns. Let's start by typing dollar sign, beginning and ending parentheses. Inside the parentheses, two tick marks for a string literal, we're going to search for list items. Outside of the parentheses .has parentheses, inside of the parentheses two tick marks for a string literal, we're going to type 'ul'.
So we're looking for all list items that have the ul item inside of them. Then we're going to type .find, beginning and ending parentheses. Inside of find parentheses tick marks for a string literal. We're going to type greater than, space, a. Outside of the parentheses we'll type addClass, beginning and ending parentheses, semicolon. Inside of addClass, two tick marks for a string literal.
We are going to type 'indicator'. So what this is basically doing is we're looking for every list item if it has an unordered list as one of its children, we're going to find the immediate anchor tag inside of that list item. And if this is true, which means there is an anchor tag inside of an unordered list inside of a list item, we're going to add a class called indicator. And if we remember back to our CSS file at the very bottom, we have a.indicator, and we set the background to arrow right, and if it's a top-level item we set it to arrow down.
So let's come back to our Source Code, let's come back to Live View or you can previous this in a browser. And now we'll see that every item that has a submenu has an indicator here as well. So Link 1 in 3 have the down arrow, Link 4 has a down arrow, and then the second item here has a rightmost arrow. So now we have indicators showing our users which one of these menus actually have submenus associated to them. So at this point we have completed adding a jQuery dropdown menu to our web site. In the next movie we'll talk about where you might want to go from here.
Find answers to the most frequently asked questions about Create Navigation Menus with jQuery and Dreamweaver .
Here are the FAQs that matched your search "" :
Sorry, there are no matches for your search "" —to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.