Stanford University Stanford Hospital & Clinics Lucile Packard Children's Hospital VA Palo Alto Santa Clara Valley Medical
Stanford School of Medicine Web & New Media Services
This Site Only
All School of Medicine Sites
School of Medicine Home » Dean's Office » IRT » Web & New Media Services » References » Web Clips
IRT Logo

Web Clips, Tips, Tricks

> Web Clips Home
> Left Navigation: Clips
> Left Navigation: Expanding Links Trick
> Highlights Boxes:
Single Column
> Highlights Boxes:
Right-aligned
> Highlights Boxes:
Left-aligned
> Free Icons
> Anti-spam JavaScript Mailto Links
> A-Z Jumper Link Sets
Web & New Media Services
> Home
> Core Services
> Products
v Support & Training
>
 
> Report an Issue
> Help Desk & Office Hours
> References & Guides
> Training for Dreamweaver & Contribute
> Web Author Meetings
> Common Questions
   
IRT Information
 

The Expanding Navigation Effect

Blue Theme (Tier 3) | Olive Theme (Tiers 1 & 2)

Sometimes it's helpful to hide links to details pages of a topic within an expanding menu for that topic. When the user clicks on the main link for the exanding topic, they go to the main topic page, where a group of smaller links to details pages is revealed.

NOTE: Highlight colors should only be applied to groups of links that are expanded. Do not add the highlight color if the navigation is always expanded or it will bring undue attention to those items.

Demo of exanding navigation effect (will appear in a new browser window)

Downloadable navigation include files

Tier 3 - Blue theme (Departments, Divisions and other subgroups of the school)

Closed navigation file (for non-topic pages) Open navigation file (for pages on that topic)

Highlight- ColumnTitleBlue 12px verdana all cap
> NavLinkNormal 12px Verdana
> Apply Nav Styles to Table Cell, Span or Paragraph, Not Link (a)
> Duplicate Rows for Links
> This Item Will Be Expanded On Target Pages in a Subdirectory
> Only Expand One Item Per Left Navigation File to Avoid Confusion
> Duplicate Rows for Links
> All Main Links (Large) Should Have Same Text At All Levels
> NavLinkNormal 12px
> Delete Unused Rows

Download File
Right-click (Win), or Ctrl-click or click-and-hold (Mac) to find command closest to "Save" or "Download" the "Link" or "Target." Save file to your intended local "includes" folder.

Highlight- ColumnTitleBlue 12px verdana all cap
> NavLinkNormal 12px Verdana
> Apply Nav Styles to Table Cell, Span or Paragraph, Not Link (a)
> Duplicate Rows for Links
v This Item Is Expanded On Target Pages in a Subdirectory
>
> These Sublinks are in a Table Nested Within a Cell of the Main Table
> NavLinkSmaller 10px For Sub-topics of The Big Link
> Apply Nav Styles to Table Cell, Span or Paragraph, Not Link (a)
> Duplicate Rows for Links
> NavLinkSmaller 10px Verdana
> Delete Unused Rows, If Any
> Only Expand One Item Per Left Navigation File to Avoid Confusion
> Duplicate Rows for Links
> All Main Links (Large) Should Have Same Text At All Levels
> NavLinkNormal 12px
> Delete Unused Rows

Download File
Right-click (Win), or Ctrl-click or click-and-hold (Mac) to find command closest to "Save" or "Download" the "Link" or "Target." Save file to your intended local "includes" folder.


Tier 1 & 2- Blue theme (Home (Tier 1) and School-wide topics (Tier 2))

Closed navigation file (for non-topic pages) Open navigation file (for pages on that topic)

Highlight- ColumnTitleOlive 12px verdana all cap
> NavLinkNormal 12px Verdana
> Apply Nav Styles to Table Cell, Span or Paragraph, Not Link (a)
> Duplicate Rows for Links
> This Item Will Be Expanded On Target Pages in a Subdirectory
> Only Expand One Item Per Left Navigation File to Avoid Confusion
> Duplicate Rows for Links
> NavLinkNormal 12px
> All Main Links (Large) Should Have Same Text At All Levels
> Delete Unused Rows

Download File
Right-click (Win), or Ctrl-click or click-and-hold (Mac) to find command closest to "Save" or "Download" the "Link" or "Target." Save file to your intended local "includes" folder.

Highlight- ColumnTitleOlive 12px verdana all cap
> NavLinkNormal 12px Verdana
> Apply Nav Styles to Table Cell, Span or Paragraph, Not Link (a)
> Duplicate Rows for Links
v This Item Is Expanded On Target Pages in a Subdirectory
>
> These Sublinks are in a Table Nested Within a Cell of the Main Table
> NavLinkSmaller 10px For Sub-topics of The Big Link
> Apply Nav Styles to Table Cell, Span or Paragraph, Not Link (a)
> Duplicate Rows for Links
> NavLinkSmaller 10px Verdana
> Delete Unused Rows, If Any
> Only Expand One Item Per Left Navigation File to Avoid Confusion
> Duplicate Rows for Links
> All Main Links (Large) Should Have Same Text At All Levels
> NavLinkNormal 12px
> Delete Unused Rows

Download File
Right-click (Win), or Ctrl-click or click-and-hold (Mac) to find command closest to "Save" or "Download" the "Link" or "Target." Save file to your intended local "includes" folder.