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.
Inside of ready we're going to type Function, beginning and ending parentheses, beginning and ending bracket, split that open on the brackets. Now the first thing we want to do is set that unordered list to display type of block so that it becomes visible. So let's start with a dollar sign beginning and ending parentheses, inside of the parentheses two tick marks for string literal, I am going to type .nav_menu, space, .dropmenu, and outside of the parentheses we're going to type .css;, inside we're going to type two tick marks for string literal.
First property is going be 'display', outside of the string literal but still inside of the parentheses, comma, two more tick marks for another string literal, then type 'block'. So we're going to set the display type to block. Let's hit a few returns, now let's activate the menu, dollar sign parentheses, tick marks inside of the parentheses for string literal, '.nav_menu, then a space, then a greater than sign, then space, then ul'.
So what the greater than sign does is it targets the direct children ul that are inside of the .nav_menu class. Outside of the parentheses, .dropmenu, inside of the parentheses, semicolon, beginning and ending bracket. Let's split that open on the brackets, so this becomes a custom jQuery instruction that we can actually assign to objects. Now inside of the dropmenu instruction we can assign a bunch of different parameters.
First one is going to be effect, colon space, two tick marks for string literal, 'slide', then a comma. On the next line speed, we're going to set the speed to 250 milliseconds or quarter per second, and again you can change any of these affects that you want. Let's hit Return. We're going to set a timeout to zero. What that does is how long does the menu take to roll back up once the user rolls off of it.
You can actually have it linger for a second or two if you'd like. Setting timeout to zero means that they'll just scroll back up immediately. Next line, we're going to set non-breaking space to false. If we were to set that to true, the menus would lock down to a certain width, and we would get a lot of text wrapping, but in this case I don't have that happen I just want those to be opened up. And then make sure you don't put a comma after the last item, so we need to have a comma in between each one of the different settings and the last one doesn't get a comma.
And all of these settings are contained within the set of brackets right here. So now we have this in place, let's choose File > Save, and come out of Live View, let me bring this split down here a little bit. Let's go back into Live View, and we should be able to interact with the menus inside of Dreamweaver. So if I rollover the Link 1, I can see the submenu animates open, takes 250 milliseconds to the animate open. Link 2 doesn't have a menu, Link 3 has a menu, and Link 4 has a menu and also has a submenu. So when I go over 4-2, we can see the three links we put inside of that nested list, with 4-2-1, 2, and 3.
Now that our menus work, the only thing we have left to do is to give our users an indication that there's a menu. So we'll see right here links 1, 3, and 4 have the submenus, but we don't see that little arrow here, and under Link 4, Link 4-2 has a menu, but we don't see the indication here as well. So using jQuery in the next movie we're going to add custom classes onto any item that does have a submenu.
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.