I’ve been wanting to do this one for a while and finally had a few
minutes to put it together so I hope someone finds it useful. This is
about using graphics for menu buttons and has nothing to do with any
action. It’s all done manually using text links and CSS, there’s not
a graphic box in sight.
I see posts from people struggling with stacks of graphic menu
buttons and whether they need to be grouped, layered, unlayered etc.
While this example is nothing new (no reinventing the CSS wheel here)
I think a lot of users may not be aware of alternative methods. This
example is based on a client design I did recently.
While it’s easy enough to understand the concept behind stacked
images for different link states and its apparent simplicity to
execute it has some major drawbacks:
Completely useless for inline layouts.
A semantic dead-zone (read: not very search engine friendly).
A lot of code and layout clutter due to the multiple divs needed
for each link state.
Using CSS to achieve the same end result is far more elegant and
doesn’t suffer from the above problems. In fact, probably the best
argument for this approach is that it allows the use of lists for the
menu which from the point of view of a search engine makes your page
more tasty.
This example assumes at least a basic understanding of CSS and the
structure of lists though even if you’re new to this stuff please
take the time to pick apart the example, it’s not difficult and
you’ll probably be glad you did. It may appear like a lot of work
compared to drawing graphic boxes on a page but the fact is a lot of
the CSS is repetitive so once you grasp the basic idea it’s easy and
the benefits are many.
You could probably work through the instructions online but I suggest
downloading the file since it helps to pick things apart if you get
stuck. If you find any problems with the instructions let me know as
it was done rather quickly.
Here’s a slight code variation on the same basic idea that I hand-
coded. It adds an “active” state to the mix. Sorry, no FW file
available but all the CSS is in the Head tag for those interested.
Hi Todd
I’ve been reading back through the whole Freeway Talk site trying to improve my knowledge. Was really interested in this thread but dissapointed to find the links no longer work. Any chance of a new link?
Kevin
On Sep 16, 2010, at 4:45 AM, Kevin McElligott wrote:
Hi Todd
I’ve been reading back through the whole Freeway Talk site trying to
improve my knowledge. Was really interested in this thread but
dissapointed to find the links no longer work. Any chance of a new
link?