Display different header depending on page selected

Question

I have an asp.net website with 5 items (home, products, news, about, contact) on the main horizontal navigation.

The site uses a master page which splits the page into a header, body and footer using

I want to be able to display a different header (which will include different colors and images) depending on which of the 5 navigation items is selected.

Can anyone tell me the best way to achieve this without bloating the page download?

I know my way around asp.net, html, css, javascript and vb but I am no expert.

Answer 1

I'd probably create a base CSS class that they'd all use, and then create 5 different themes in the app_themes directory (create one if you don't have one), one for each nav option; in there, you can override the base CSS with more specific options to change the background images / colors. If you're using Asp:Images (instead of background images with CSS), you can also change the source using a .theme file in each theme. This way, you'd only download the relevant files. You'll have to change the Page.Theme on Page_Init.

Answer 2

Are you trying to implement a menu?...

One possible strategy that I can think of is making a usercontrol for the header and then rendering the design in HTML based on the mode.

This way you will still be able to take advantage of a distinct header and will be able to have a flexible design.

Answer 3

Create conditional statements within the header depending on what page is selected.