Proper way to display clicked state of a button in the navigation menu of an iOS style html5/phonegap app (picture included)

Question

The title is a bit of a mouth full, but I want to know the best way to format my div's to show that a button on the bottom navigation bar has been pressed. (not a question of graphic design)

The way I was thinking is to make 1 solid image for the nav bar in its default state. I will set a div around each "button" to detect a press. When the button is pressed I will display the individual image of the button in it's pressed state.

I've added an awesome image to help illustrate my question.

An alternative is to create 8 unique buttons. However, I know that most of the psd's I've seen have the nav bars, default and pressed, as solid elements with the icons layered on top.( like this: http://dribbble.com/shots/691632-App-net-Starter-Kit?list=tags&tag=appDOTnet)

Thank you for your help!

Answer 1

That approach seems a little heavy to me, honestly.

You'll already have five images, so why not just create a sprite containing the pressed state for each individual button as well as a no-pressed state, and then slide using the CSS "background-position" property?

Your CSS would look something like:

div.buttons {
 background-image: url(images/myimage.png);
 background-position: 0 0;
 position:relative;
 width:64px;
}
div.buttons.dog{
 background-position: 0 32px;
}
div.buttons.cat{
 background-position: 0 64px;
}
div.buttons div.dog{
 position:absolute;
 left: 0;
 top: 0;
 width: 32px;
 height: 32px;
 border: transparent 1px solid;
}
div.buttons div.cat{
 position:absolute;
 left: 32px;
 top: 0;
 width: 32px;
 height: 32px;
 border: transparent 1px solid;
}

With your HTML as:

<div class="buttons">
 <div class="dog"></div>
 <div class="cat"></div>
</div>

And then something simple for jQuery such as:

$('div.buttons').children().each(function(){
  $(this).click(function() { $(this).parent().addClass($(this).attr('class')).removeClass($(this).siblings().attr('class'));
});

---

UPDATE

Per the asker's request, here's how you would implement a div overlay on the button layer. First, start with the div.buttons CSS block up top, only instead of a sprite use your image for the buttons in their default "off" position.

Then, create four containers as such (I've used divs here, but you could conceivably use any element that gives the appropriate semantic context for a container).

CSS

div.buttons{
 background-image: url(images/myimage.png);
 background-position: 0 0;
 position:relative;
 width:136px; /* whatever your width for the image is */
}

div.fish, div.rabbit, div.dog, div.cat {
 position: absolute;
 top: 0;
 background-size: cover;
 height: 24px; /* Whatever the height of your buttonbar is */
}
div.cat{
 width: 32px; /* Width of your button */
 left: 0;
 background-image: none;
}
div.on.cat {
 background-image: url(path/to/catImage.png);
}
div.dog {
 left: 32px; /* The width of the preceding button(s), if they exist */     
 width: 40px; /* Width of your button */
 background-image: none;
}
div.on.dog {
 background-image: url(path/to/dogImage.png);
}
div.rabbit {
 left: 72px; /* The width of the preceding button(s), if they exist */     
 width: 32px; /* Width of your button */
 background-image: none;
}
div.on.rabbit {
 background-image: url(path/to/rabbitImage.png);
}
div.fish {
 left: 104px; /* The width of the preceding button(s), if they exist */     
 width: 40px; /* Width of your button */
 background-image: none;
}
div.on.fish {
 background-image: url(path/to/fishImage.png);
}

HTML

<div class="buttons">
   <div class="cat"></div>
   <div class="dog"></div>
   <div class="rabbit"></div>
   <div class="fish"></div>
</div>

This assumes that your div "wrapping" the button slice has a class matching its animal, but this could obviously be whatever you'd like it to be. Then, on the click event, you'd simply apply the class that you need to the pressed button. The jQuery you'd use would look like this:

jQuery

$('.buttons > div').on('click',function(){
    var t = $(this);
    t.siblings.removeClass('on');
    t.addClass('on');

    //Whatever your button is supposed to do normally here
});