February 23, 2010 A Neat, Subtle Archives Widget
Update: I’ve removed the archives widget in favor of a dedicated page/section. The widget was a fun experiment, but never really worked the way I wanted it to. I’m leaving this article up for posterity and so others can still use and adapt the widget if they so desire.
You may have noticed I rearranged some elements of Geek & Mild over the weekend. Or maybe you didn’t.
The biggest change is the location of the archives widget timeline thing, which I moved to the opposite side of the window. The reasoning has to do with Fitt’s law and the widget sharing vicinity with the browser scrollbar. I was never comfortable with how close the two interface elements were.
I’m still unsure if the widget works for its purpose, but since I haven’t gotten any particularly negative feedback about it, I figure it must do its job adequately.
The widget itself — the code, I mean — is so simple I thought I’d share it.
The HTML (plus ExpressionEngine)
<li id="now"><a href="/"><span>Now</span></a></li>
{exp:weblog:month_links}
<li id="a{year}-{month_num}"><a href="{path=index}"><span>{month} {year}</span></a></li>
{/exp:weblog:month_links}
</ul>
The CSS
position: absolute;
top: 185px;
left: 0;
width: 75px;
margin: -20px 0;
padding: 20px 0 20px 0;
overflow: hidden;
list-style: none;
font: bold 10px/1 ‘helvetica neue’, helvetica, sans-serif;
text-transform: uppercase;
list-style: none;
z-index: 2;
}
#archives:hover {
width: 150px;
}
#archives li {
margin-left: -120px;
}
#archives:hover li {
margin-left: -10px;
}
#archives li a {
display: block;
position: relative;
width: 120px;
height: 6px;
margin: 0 0 4px;
padding: 0 4px;
text-align: right;
color: #ededed;
background: #ccc;
border: none;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}
#archives li a:hover {
height: 10px;
margin: -4px 0 0;
padding: 2px 4px;
color: #ededed;
background: #222;
z-index: 2;
}
#archives li a span {
visibility: hidden;
}
#archives li a:hover span {
visibility: visible;
}
Then I stick this in the <head> of the index page:
#archives #a{segment_2}-{segment_3} a {
width: 130px;
margin-left: -5px;
background: #222;
}
{if:else}
#archives #now a {
width: 130px;
margin-left: -5px;
background: #222;
}
{/if}
There you have it. Feel free to reuse and repurpose the widget for your own project or website. Let me know if you do, I’d love to see how it’s adapted.
(Thanks to Coda for the code formatting via ‘copy-as-XHTML’ function!)
Would love to see a subtle contextual clue that the archives live here. Would have never known without this post.
Joshua Cody
February 23, 2010