In Dreamweaver CS4: Navigation, Templates & Media Integration, we discuss how to use Dreamweaver’s built-in behaviors to create drop-down menus for the main site navigation:
Specifically, we use Show-Hide Elements to control when, and under what conditions, the navigation sub-menu should appear and disappear. Show-Hide Elements is a fast and easy way to create drop-down menu items, but it can also be used, with a slight adaptation, to make pieces of content in the main part of a page appear and disappear based on the user’s behavior. Read on to find out more…
The Use Case
Let’s say that you’re building a website where you need to display similar kinds of information about several related items:
- a Visit Us page for a company or organization that has several locations
- advertising a product that comes in several styles or colors
For the purposes of this post, let’s say we’re building a website for an artist and we’d like to show off a few of their works. The easiest solution is to create separate pages for each item. There are a few reasons why we might not want to do this, though:
- Its a little jarring for the user to go from page to page
- It can be difficult for the user to quickly compare different pieces
- It could be a lot of duplication for us (copying and pasting copyright information to each page featuring an artwork, for example)
And, as a matter of fact, our client the artist has stated very strongly that she wants her artist’s statement to appear above every piece of art featured on the site. That means if we create a unique page for each piece of artwork, we have to copy and paste her artist’s statement each time. And then when she changes her artist’s statement (since we all know how fickle artists are , we’ll have to remember to change the statement on all the artwork pages.
BUT, if we put all of her artworks on a single page, the page will be very long and its possible that viewers of the page won’t scroll all the way down to see all of the items.
There’s a number of ways to solve this condundrum. Today, we’re going to repurpose the Dreamweaver behavior Show Hide Elements to allow the user to select which pieces of art they look at, based on their title.
Here’s where we’re at:
- We’ve already sketched out a site, including a Portfolio page.
- At the top of the portfolio page, we’ve inserted the artist’s statement.
Here’s what our site and Portfolio page looks like so far:
Now what we want to do is add a sort of mini-nav below the artist’s statement, where each item in the mini-nav is a link to a particular artwork:
Instead of the link taking the end-user to another page, however, we want the artwork that the user clicked on to appear below the artist’s statement, like this:
The nice thing about this approach is that the user stays on the same page, and as they click on the various artwork titles, an image of the artwork and a description appears below.
Here’s what you’ll need to know before watching the following demonstration:
- Basic understanding of CSS (if you’ve taken Dreamweaver CS4: Creating Web Sites with CSS, you should be set)
- Basic understanding of Dreamweaver Behaviors (if you’ve taken Dreamweaver CS4: Navigation, Templates, and Multimedia Integration, you should be set)
Here’s what the tutorial video will cover:
- Manually adding <div>s and giving those <div>s names
- Adding content to <div>s
- Creating links to be used with Behaviors
- Adding the Show/Hide Behavior so that clicking a link will show certain <div>s and hide others
- Understanding the difference between CSS properties Visibility and Display
One other thing:
- Download the finished site (.zip format / 40MB)