Dances with a tambourine for blondes, or about a tabbed menus and artful work with graphics

Actually, I recently rewrote a small order. It seems to be simple - but I had to dance a bit with a tambourine. And all this is due to the fact that the customer turned out to be a little bit “blond to the design” (figuratively speaking), and demanded strict compliance with the final result to the layout. He demanded pixel-by-pixel, and he was not at all worried about such issues as validity, semanticism and so on. "Though lay down tables, and make." And today we will talk about how in such conditions to make a very cleverly drawn menu with tabs. As for your code, do not be ashamed, and do not fall into the face of the face of the customer, that is the question?

Actually, here is a fragment of the sketch responsible for the very menu:


This is how it should look when another item is selected:


Uncomfortable right? Not only will it not be possible to create a single background for menu items (because of this unfortunate gradient and not only), but you will have to assign styles to each item individually (you had to take an honest pioneer word from the customer that the menu structure will remain unchanged from now on) and you have to think about how to properly display the "overlaps" on other items before and after the active one. But nothing is impossible, and to implement such a thing, we will not need any tables, and there will be a minimum of crutches. The whole point - in the tricky work with graphics.
')
But before styling the menu, we need to take care of the block below it. We assign him a single-pixel border (the same one that we see under inactive points) and a background in the form of a “corner” in the upper left corner. We will not think about how this “corner” is displayed or not in the menu itself - let it lie and do not ask for food in the box below it, and if necessary we will simply close it.

Now for each menu item we need to cut into two pictures - respectively, inactive and active menu item. And for all menu items, except the first, we must also provide the option "inactive-after-active", which has no bottom edge on the left. Actually, here is the first menu item in an inactive form:


And here it is, but active:


Please note - the substrate for the active item is slightly larger in height - we need it just to close the “corner” below.

With other points, everything is a bit more complicated. Let us analyze the example of the second menu item. An inactive item is done on the same principle as the first:


"Inactive-after-active" differs from it only in the absence of the lower left border:


And for the active menu item, we must provide for a “thief” on the left, slightly “choking off” from the previous item:


Now, having cut the graphics, we take on the code. Considering that this menu is ultimately implemented on Drupal using the menu-attributes module (or whatever it is there), and accordingly, this imposes its own specificity, then we will stylize not the li tag, but the nested links. The HTML code itself, minus the CMS garbage, is what we have here:

<div id="topnav">
<ul class="menu"><li class="leaf first active-trail "><a href="#" id="apartments" title=" "></a></li>
<li class="leaf"><a href="#" id="houses" title=" , , "> </a></li>
<li class="leaf"><a href="#" id="ground" title=" "> </a></li>
<li class="leaf last"><a href="#" id="business" title=", .."> </a></li>
</ul>
</div>


As you can see, there is practically nothing superfluous, and the semantics are not broken. All the "glamor" and "ryushechki" we will do in CSS. We will have two stylesheets - for normal browsers and for IE donkey (I hope I don’t need to teach you how to include this file through conditional comments). Immediately I will state that I mean the seventh version of the “donkey IE” - because of the mass distribution of Vista and the third service pack under WinXP, the sixth is already losing ground ... so screw this nightmare. :) In any case, even in the sixth “donkey”, the layout will not go, and from the functionality of the menu it will not work unless the “inactive-after-active” implemented on the selectors. So don't care. Go!

First, let's deal with the positioning and height of the block itself. A close eye has probably already noticed that the lower border of pictures and the upper border of the block under the menu need to be slammed. And for this, we will pull up the lower block a bit, incidentally (senks for bug reports in the comments) by moving the links 1 pixel to the left:

div#topnav ul.menu {
list-style-type: none;
margin: 0 0 -1px 0;
line-height: 44px;
font-size: 0; /* */
padding-left:1px
}
div#topnav ul.menu li {
display: inline;
}
div#topnav ul.menu a {
font-size: 14px;
padding: 15px 24px 15px 15px;
height: 25px;
margin-left:-1px;
}

Immediately - fixing all this kitchen in the table for IE (for there are some nuances to display)

div#topnav ul.menu {
position: relative;
top: 3px;
list-style-type: none;
margin: 0px;
line-height: 44px;
font-size: 0;
padding-left: 1px;
}
div#topnav ul.menu li {
display: inline;
}
div#topnav ul.menu a {
font-size: 14px;
margin: 0 0 0 -1px;
padding: 15px 24px 15px 15px;
height: 25px;
}

Now we prescribe backgrounds and sizes for active and inactive menu items. The algorithm is as follows: for the first item, we increase the height if the item is active (close the corner). Other items, if active, move 6 pixels to the left (remember about the overlaps).

div#topnav ul.menu li a#apartments {
width: 80px;
background: url('images/menu-1-inactive.gif') top left no-repeat;
}
div#topnav ul.menu li a#houses {
width: 94px;
background: url('images/menu-2-inactive.gif') top left no-repeat;
padding-right:26px;
}
div#topnav ul.menu li a#ground {
width: 150px;
background: url('images/menu-3-inactive.gif') top left no-repeat;
padding-right:26px;
}
div#topnav ul.menu li a#business {
width: 240px;
padding: 15px 60px 15px 15px;
background: url('images/menu-4-inactive.gif') top left no-repeat;
}
div#topnav ul.menu li.active-trail a#apartments {
background: url('images/menu-1-active.gif') top left no-repeat;
padding-bottom: 25px;
}
div#topnav ul.menu li.active-trail a#houses {
width: 101px;
margin-left: -6px;
padding-left: 22px;
background: url('images/menu-2-active.gif') top left no-repeat;
}
div#topnav ul.menu li.active-trail a#ground{
width: 157px;
margin-left: -6px;
padding-left: 22px;
background: url('images/menu-3-active.gif') top left no-repeat;
}
div#topnav ul.menu li.active-trail a#business {
width: 247px;
margin-left: -6px;
padding-left: 22px;
background: url('images/menu-4-active.gif') top left no-repeat;
}

Well, now - we use the magic of CSS selectors in order to change the picture to the inactive menu item that comes after the active:

/* this is not supported in IE 6, so screw IE6, we want some CSS2 beauty*/
div#topnav ul.menu li.active-trail+li>a#houses{
background: url('images/menu-2-inactive-after-active.gif') top left no-repeat;
}
div#topnav ul.menu li.active-trail+li>a#ground{
background: url('images/menu-3-inactive-after-active.gif') top left no-repeat;
}
div#topnav ul.menu li.active-trail+li>a#business{
background: url('images/menu-4-inactive-after-active.gif') top left no-repeat;
}

And now, already a screenshot from the real page in the browser:


Actually, everything. And this with minimal changes can be extrapolated to any similar task. The main thing is to remember the algorithm. And if it’s interesting, I’ll tell you in the appropriate blog how to correctly and logically implement all this on the internal structure of Drupal. If it’s interesting, this is how it is implemented in Drupal: habrahabr.ru/blogs/drupal/52601 ;)