Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Join James Williamson, as he shows you how to create elegant menus, links, and buttons that help visitors navigate your site faster and more intuitively. The course covers creating structured navigation that is accessible and clean, styling links, and building horizontal and vertical menus with rollover effects. The last chapter reveals how to create stylish buttons with special effects and CSS sprites.
One of the properties in CSS that is often overlooked is the cursor property. It might be because people really don't have that often a cause to use it. But it gives you the very, very powerful ability to control the display of the cursor. In the case of our horizontal menu, that means that we can give the appearance that the link is disabled. So we're going to finish up our horizontal menu by working on the horizontal.htm from the 04_08 directory, and this is an incredibly simple fix.
I'm going to go into the current class selector, and I'm just going to create a brand-new line at the bottom of that, I'm going to type in cursor, and you've got a lot of different choices, and this is the one time that I'm going to reference some of Dreamweaver's visual tools, because the Autohinting allows me to do this. Look at all the different choices you have for cursors. You have help, you have the resize, you have none, which can be really frustrating, pointer, which is going to give you the hand. Now weight which is, of course, going to give you a little hour glass, depending upon the Browser, or the beach ball, depending upon which platform you are on.
You need to be very, very careful about using this because you can fool people into believing something is what it is not. It's nice if you are linking to maybe your frequently asked question or linking to a live chat agent to use little help icon. That's actually kind of nice. However, if you have a textbox for example, and you change the cursor to the resize, your users are going to assume they can resize that, and if they can't, they are going to get very upset. So remember, it's kind of nice that you can do this stuff, but you want to be very careful about how you utilize this property.
So I'm going to just choose default, which is going to give me any user agent's default cursor, which is typically not the hand pointer, so I'm going to save this and then go back into a browser and preview this page. And now, notice as I browse over my menu items the Hand icon, the pointer comes up to let me know that it's an active link. But when I browse over Home, it goes back to that default arrow. So it looks just like anywhere else on the page, and it really looks like that link is the activated.
So that's one of the things that you'll want to think about before you begin changing the display of the cursor.
There are currently no FAQs about CSS: Styling Navigation.
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.