Join Michael Murphy for an in-depth discussion in this video Creating an expanding two-level navbar with tables, part of InDesign for Web Design.
In the last movie we very quickly designed and built a two-level vertical nav bar. Here, we're going to take that basic nav bar mockup a bit further to mimic some common web behavior. To save valuable screen space many two-level navigation schemes expand and collapse when a top-level item is clicked or just hovered over. When you're designing web page mockups in InDesign you may want to show both the expanded and collapsed states to your client. Here is the way to do that without having to actually create a completely different table or rely on hiding and showing the layers.
This is the nav bar that we've already created, and it is a single table. I can click on the top left corner, and I'm selecting one entire table. All of these items, here, are my second level navigation items, and I want to try and mimic the expanding and collapsing behavior of this type of nav bar. To do that, I am actually going to have to split this into some separate tables and bring some other InDesign features that aren't strictly table related into the mix. The first thing I'm going to do is hover over the left side of all of these level 2 items and cut all of those cells to the clipboard. And then going to just hit Command+V or Ctrl+V on Windows to paste them, and it will create a new text frame containing all of those cells it just expand that frame for now, and the next I want to do is separate everything after the first item into its own table. So I'll select all of those rows, cut those to the clipboard as I did before.
Hit Command+V or Ctrl+V, which pastes them into a new text frame. And now I want to combine each of these three tables into this one text frame in a way that looks like it's one table. So I'll select this entire table--and as you know a table is just one text item, a single character on a line in an InDesign text frame--so I can just double-click, and I am really just selecting this line. I'll cut the entire table to the clipboard again, put my cursor in at the end of this single row single cell table and hit Return. Then paste my level two table onto a new line--don't worry about that gap between the two we're going to fix that--I'll hit Return then I'll go select this separate table with my remaining level 1 items, cut that to the clipboard, and paste that at the bottom of this frame.
Now you're seeing this gap here because of a rather irritating default of InDesign tables, and that is built-in space before and space after for every single table you create. I want to eliminate that in all of these tables, so I'm going to actually select this first one and under Table, go to Table Options > Table Setup and here are those pesky defaults that I do not care for. I'm going to eliminate the 4 pixel Space Before, I'll hold down the Shift key and click the down arrow to set that to 0 and for some reason there's a negative space after, and I'm going to Shift click the up arrow to reset that to 0 then I'll click OK.
Next, I'll select this entire table by hovering over the top left, clicking to select all the rows, and I'll do the exact same thing Table Options > Table Setup set both Space Before and Space After to 0 and click OK and these two become nested together, so they visually appear to be on table even though they're not, I'll hover over this select the entire table do the exact same thing again, clear out those values, click OK, and now I've just got my three tables.
The white space that you see there is the white space that's built into the cell style that appears on the top and bottom borders of each of these cells so that's actually supposed to be there. So how do I get the expanding and collapsing trick to work? Well, the first thing I need to do is get my cursor up to select, not this table, but I'll use my up arrow to select the single line containing this table. And I'm going to use the feature called conditional text, which really has nothing to do with tables, and you can't apply to a table itself, but you can apply it to the line that a table sits on.
I'm going to go to the Window menu to Type & Tables > Conditional Text, and I'm going to create a new condition by clicking New Condition from the Panel menu. I'll name this condition expanded, or I could name it Level 2 whatever works and click OK. Right now, it's not applied, but all I have to do is click here to apply that condition to this text. Once that condition is applied, I can then hide and show anything that I've put that condition on simply by toggling this icon in the Conditional Text panel and with that condition hidden my table has disappeared, but the line that it sits on is still there that's because I selected the table and applied the condition, but I didn't select the paragraph return at the end of line that it sits on, so I can do that quickly and easily now.
By double-clicking in that line you can see I've got my return selected, and I'm going to apply the expanded condition to that and since it's hidden, it's going to disappear immediately. So now I've got what looks like a single table with all of my top-level nav items and by simply toggling this expanded condition on, or off I can mimic the appearance and show in mockups to my clients, what a collapsed or expanded navigation is going to look like. I really love this best of both worlds approach to getting two different appearances out of a single object by combining various features, it's one of InDesign's real strengths, when it comes to creating web designs.
- Understanding web concepts such as pages, pixels, and the box model
- Working within web colors and grids
- Working with type and type styles
- Designing a nav bar with tables
- Setting up a template with headers, footers, and modular content
- Experimenting with liquid and alternate layouts
- Adding interactive content such as links and video
- Exporting flat PNG and JPEG comps
- Exporting HTML and CSS content