Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 101672 Viewers
61 Video lessons · 88422 Viewers
71 Video lessons · 72266 Viewers
56 Video lessons · 103990 Viewers
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.
Your file was successfully uploaded.