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 · 23 February 2010
I see you’ve added the contextual clue – looks very sharp now.
I never said it, but I hated it before. It was the only thing I didn’t like about the redesign. It always felt crowded and awkward right next to the scroll bar.
Now it’s subtle, out of the way but just noticeable to catch your eye on first visit – and it works great.
§ Jesse J. Anderson · 23 February 2010
I really like the change. I think it’s a great improvement from where it was.
I always enjoy the helpful posts on EE and any other web design/development topics.
§ Ben Harrison · 24 February 2010
What do you mean copy as XHTML function? Just curious. Thank you.
§ Juliano Moreira DaSilva · 25 February 2010
Never mind. I found it on Coda’s website. It’s just a function that facilitates copying and pasting to a website. Very cool!
§ Juliano Moreira DaSilva · 25 February 2010
glad you brought the archive widget back – i’ve always been a big fan of it.
§ martin del rosario · 03 March 2010