A bite of bits

In our last episode, we had a dynamic CSS3-only menu in which all options stretched dynamically. It looked wonderful (although it could probably use a designer’s touch) but there was tiny tiny problem: it didn’t work.

Despite rendering properly, as a menu it was completely useless because we couldn’t click any of the options.

Like I mentioned in the second part of this series, in order to progress we have to sacrifice a bit of markup, and this time the sacrifice is quite obvious. If we turn the inner span into a link also, we solve all of the issues.

The menu markup now looks like this:

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

As you can tell, I added a class to both elements, and changed the selectors accordingly in the stylesheets. Other than that, there is no other difference between this and what was used in the previous version (I did say it would be quick).

The final product is here.

Out of all the versions, my favorite is still the first one, not because it was the one whose idea came only from my head, but because it’s the most semantic and easiest to convert into something that degrades gracefully.

Also, with a tiny bit of JavaScript it wouldn’t be too hard to make it change width accordingly. Something in the lines of:

$('ul li').each(function(){
   $(this).height($(this).width());
   $(this).css('line-height',$(this).width()+'px');
   $('a',this).height($(this).width());
   $('a',this).css('line-height',$(this).width()+'px');
})

But with the necessary adjustments in the margins order to make it work. Maybe I’ll get back to this one day and build a version that is enhanced by JS.

Until then I bid you adieu!

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.

Read the rest of this entry »

We don’t do designs ourselves, we receive them from our clients or partners. Because of this we work with a lot of different designers, all with their own habits which is cool, but after working like this for a few months we realized that we had to streamline this process. Since a couple of weeks we have started to ask every designer that works with us to take the following guidelines.

Read the rest of this entry »