Weekend Project: Eye-Catching Sidebar Menus

TypePad's Pages feature is pretty nifty - compose your Pages with the info you want to include, drop a  module into your sidebar that lists them all out nicely, and voila - instant menu. But why stop there? You can use CSS to fancy it up and draw attention to that important information.

Let's turn this:

Into this:

If you're unfamiliar with TypePad's Custom CSS feature, this will be a good way to get your feet wet. First, let's hide the "Pages" header.

.module-archives .module-header { display: none; }

Next, we'll style the links so they're black with no underline:

.module-archives .module-list-item a {
color: #000;
text-decoration: none;
}

Finally, we'll style each list-item. I've made mine very simple and sleek, so they stand out but aren't too distracting:

.module-archives .module-list-item {
margin: 0 0 2px 0;
padding: 5px 5px 5px 14px;
background-color: #EFEFEF;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ccc;
}

See how the subtle borders make the links look almost like buttons? That's CSS magic! Of course, you can use any colors you want.

Comments

[Lori Seaborg]

I enjoy these weekend articles. Please keep them coming! I'm learning so much!

[Bri]

We enjoy them too, Lori! So glad you're taking valuable info away from these articles. :)

[Kofla Olivieri]

I am clueless as always, but thanks.
Kofla @ God of War Diaries

[Account Deleted]

Again, thank you.
These tips are wonderful.

[Serge Lumoo Muhima]

le français avec moi je vous en prie