CODEWITHSUNDEEP
cssjquery-animate
balexandre
balexandre

Reputation: 75073

Make vertical images menu

I'm having a hard time making a vertical menu using images.

There are 5 images and I want to show all them in a "collapsed" mode, and upon clicking, the clicked image should expand and other collapse to make room for it.

I'm almost there: http://jsbin.com/eyepam/2/

But I can't make it work perfectly as:

Can any one that has a better knowledge of CSS help me get there?

Upvotes: 0

Views: 98

Answers (1)

Mysteryos
Mysteryos

Reputation: 5791

Check out my solution here

jQuery code:

var winWidth = $(window).width(),
    activeWidth = winWidth / 2,
    nonActiveWidth = (winWidth - activeWidth) / 4 ;

$(function () {
  $("ul li")
    .height($(window).height())
    .click(function () {

      $(this) // expand active one
        .animate({ width: activeWidth , queue: false});
      $("ul li") // collapse others
        .not(':eq('+$(this).index()+')')
        .animate({ width: nonActiveWidth , queue: false});
    });

});

I moved the width adjustments to the CSS:

The important part, use of box-sizing:border-box so that the border appear as 'inner-borders' and hence it doesn't disturb our calculations of the <li>'s widths at all.

.container ul li {
  overflow: hidden;
  width: 20%;
  display: inline-block;
  float: left;
  border-left: 4px solid #000;
  height: 768px;
  -moz-box-sizing:    border-box;
  -webkit-box-sizing: border-box;
  box-sizing:         border-box;   
}

Upvotes: 1

Related Questions