A bite of bits

The main drawback of the Navigation I built in Part 1 was the fixed width of each “crumb”. The nicest feature is the ability to properly render the corner arrow and act correctly when you click right or next to it. Meaning that what’s inside the arrow, stays inside the arrow, what’s outside the arrow refers to the next option.

When asked if there was a way to make the width dynamic, using my method, my first thought was that without JavaScript, it would not be possible. If JavaScript were to be used, neither the span nor the a would have a width, but would retain all the other properties, and upon load, the script would run through each element, see it’s width, and apply that value as it’s height/line-height.

Such a script could be enriched even further by using something like modernizr to provide progressive enhancement/degradation. But I’ll leave that idea for someone else who wants to pick it up.

The purpose of this exercise is to simply render something using the latest and most modern CSS. Graceful degradation is something your front-end-developer needs to worry about if he brings this exercise to a production-level website.

If you recall the original method, we basically had two nested tags, a and span, that were square shaped and were being rotated inversely. in order to maintain the text in a horizontal position.

In order to do this, the shape of both elements needed to be a square, because otherwise the text wouldn’t remain centered.

Ideally we shouldn’t have size constraints. Ideally it should maintain the same functionality/look.

The only way to achieve those two objectives is to change the markup a little. So what we do next is to put the span and the a in the same hierarchical level.

<div>
    <ul>
        <li><span>Home</span><a href="http://www.google.com/">Home</a></li>
        <li><span>Blog</span><a href="#blog">Blog</a></li>
        <li><span>About</span><a href="#about">About</a></li>
        <li><span>Portfolio</span><a href="#portfolio">Portfolio</a></li>
        <li><span>Contact</span><a href="#contact">Contact</a></li>
    </ul>
</div>

Reason why both the span and the a share the same text is simply for accessibility reasons. The text inside the link isn’t really visible, but that doesn’t mean that accessibility should be sacrificed for the sake of that. Just imagine you’re using a browser for blind people, or a text browser like Linx, and you tab through a bunch of empty links, not very fun if you ask me.

So, the logic for the square remains the same, except this time we only apply it to the a.

li a {

	display: block;
	position: absolute;

	width: 500px;
	height: 500px;

	right: 125px;

	top: 50%;
	right: 105px;
	bottom: -20px;

	margin-top: -251px;

	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);

	border: 1px solid #7f858d;
	border-left: none;
	border-top: none;

	background: #b7c0ca;
	text-indent: -10000em;

}

Reason why the link is so big, is so that you won’t see the opposite corner of it. You could actually make it bigger, just to be safe. Just remember to adjust the margin-top accordingly.

There’s nothing special about the span styling, the only thing we need to remember is to give it a z-index that is higher than the link

span {

	position: relative;
	display: block;

	z-index: 100;

	padding: 0 10px;

	margin-right: 20px;

	line-height: 20px;

	text-align: center;

	color: #494e53;

	cursor: pointer;

	text-shadow: 0 1px #e5f0fe;

}

And now we have adjustable breadcrumbs with just CSS!!!

Except that… it doesn’t quite work… The span blocks most of the link’s area therefore we can’t click the links except in some corners. And we can’t place the span behind the link because the link has to have a background.

But never fear, we have a simple solution for this issue, and we’ll reveal it to you in part 3, so look forward to it very soon.