Are you Insane?

The styling of the miniblog navigation between the main nav and the search bar turned out to be more complicated than I thought. So here’s how I pulled it off.

The markup is simple enough

<ul id="miniblog">
<li class="miniblog"><a href="#bottom"></a></li>
<li><a href="#bottom">twitter</a> /</li>
<li><a href="#bottom">tumblr</a> /</li>
<li><a href="#bottom">flickr</a> /</li>
<li><a href="#bottom">my profile...r</a></li>
</ul>

The CSS is a bit more complicated, but easily explainable

#miniblog {
position:absolute;
right:20px;
top:96px;
padding:0;
margin:0;
}

#miniblog .miniblog {
display:block;
position:absolute;
top:0;
left:-28px;
background:url(images/miniblog.png) no-repeat 100% -32px;
height:32px;
width:95px;
}

#miniblog .miniblog:hover {
background-position:100% 0;
}

#miniblog .miniblog a {
height:19px;
width:95px;
margin:0 10px 0 0;
display:block;
}

#miniblog li {
display:inline-block;
font-size:15px;
line-height:21px;
position:relative;
top:15px;
}

#miniblog li a {
font-size:11px;
font-style:italic;
}

The two keys is to make the set the “miniblog” link as an absolute positioned element. Then the rest of the link will overlay on top of it and be clickable. Then I do a bit of positioning and inline-blocking to make it the way it looks right now.

I consider this part one because I will be doing a bit of jQuery on it to make it the navigation more dynamic. A web developer’s personal site is never finished…