Join Bill Weinman for an in-depth discussion in this video Exploring examples of dynamic menus, part of Creating Dynamic Menus.
- View Offline
Dynamic menus are a valuable technique for creating a website navigation system. For example, this website here, which is a sample website we use here at lynda.com, you'll notice that this menu along the top has a number of options. So, it has got a dozen or so different pages. It's like a medium-sized website. Each of these pages-- let's go ahead and click on Press Releases. You can see it's all the same content, but it changes the header so you can see that it's a different page. So, this website has a dozen or so pages, and if you want to put all of them along here, it would be too crowded.
The only other alternative would be to do something like a Site Map, which is kind of cumbersome for a site of this size. So, these dynamic menus are a great way to do that. They pop in and out of the way. So it allows you to have a nice clean design. It's still attractive and it's easy to navigate. So, a site that could benefit from something like this, like for instance my own personal website, which you see has couple of dozen links along the side there. That will be a great candidate for this. I think I will redesign my site at some point to include that.
A big site like CNN is really too big. You'll notice it's got all of these different sections and each one of these sections is a whole section into itself. It's like a whole sub-website that's got all kinds of stuff and other links and things. So this is really too big for something like the dynamic menus. On the other had, a site like the Mozilla website, which has Products, Add-ons, and it's got about a dozen or two dozen different links. This is a medium-sized website and this benefits, as you can see they've done this, using this technique.
This benefits greatly from this kind of a navigation system, so that you can actually navigate over to Firefox Support if you want to, without having to click on a page and then click on another page, or without having to go to a Site Map and try to find it. So this website here is our example website. We'll be building this website. What we'll be starting with is what I got from the designers, which is this version of it, which is this little menu with these four links in it. So, we'll be starting with this and we'll be ending up with this.
- Creating and formatting menus with CSS
- Establishing positioning for a menu
- Exploring configuration variables for any menu