Add Page Option Button on web Page

On the home page of msn, yahoo, there are page option buttons, which allow the visitors to customize the theme they like. Here we introduce how to make a simple page option by our own.

page options

HTML of the page option

The page option just looks like a drop down menu, but just one list. 6 theme buttons are designed. Click the button and theme is changed accordingly.

CSS code

Besides the css code for the layout of page option button, 6 color themes for the page layout need to be designed. It's not a small work, but not so difficult using our 2 column layout generator. Save them into 6 different stylesheet files. Now we can add actions.

Javascript Code

The js script completes 2 tasks. Add event to the buttons. Load external css files when the specific button is clicked.