Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Developer and personalized recommendations.Start Your Free Trial Now
- View Offline
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.
Skill Level Intermediate
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.