Resizing elements but keeping centralised

Question

I'm making some breadcrumbs and restricting the width of them using text-overflow so the text does not spill over. I have wrote a jQuery script which enlarges the size of the breadcrumb when the user hovers over it.

My problem is that when the breadcrumb is enlarged, they end up too long to fit inside the container. I need to make the width of the other breadcrumbs smaller and at the same time, make the highlighted breadcrumb longer.

I have wrote a script for this but it is very buggy. The reason is that when other breadcrumbs are shrunk down in size, the position of the highlighted breadcrumb moves.

I would like the highlighted breadcrumb to expand in size outwards , so that it remains in the same position. But the breadcrumbs around it shrink in size to allow everything to fit on.

Is this do-able?

Here's a fiddle of what I've got so far- http://jsfiddle.net/8FPeS/

And here's my jQuery code:

$('.breadcrumbButton').mouseenter(function(){

    $('.breadcrumbButton').css({width:'30px', minWidth:'30px'});
    $(this).css({width:'auto', minWidth:'80px'});

});


$('.breadcrumbButton').mouseleave(function(){

    $('.breadcrumbButton').css({width:'80px', minWidth:'80px'});
    $(this).css({width:'80px'});

});

Answer 1

I've re-coded it from scratch to hopefully get it to work to Codepen / JSFiddle

HTML

<ul id="container">
  <li><a href="#">Network Accessories</a>
  <li><a href="#">DYMO</a>
  <li><a href="#">Labelling Solutions</a>
  <li><a href="#">Labelling Solutions</a>
  <li><a href="#">Sound Proof Data Cabinets & Server Racks</a>
  <li><a href="#">Labelling Solutions</a>
  <li class='active'><a href="#">Dymo Flexible Nylon</a>
</ul>

CSS

body {
    font-family: 'Tahoma', sans-serif;
    font-weight: bold;
}

#container {
    width: 735px;
    border: 1px solid red;
    padding-top: 10px;
    padding-bottom: 10px;
    float: left;
    list-style: none;
    margin: 0;
}

#container li:first-child {
    margin-left: -20px;
}

#container li {
    margin-right: 22px;
    background: #eee;
    border-right: none;
    text-decoration: underline;
    padding: 10px 5px;
    float: left;
    height: 16px;
    position: relative;
}

li:after {
    content: '';
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 18px 0 17px 17px;
    border-color: transparent transparent transparent #eee;
    position: absolute;
    top: 0px;
    right: -17px;
}

li:before {
    content: '';
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 18px 0 18px 18px;
    border-color: #eee #eee #eee transparent;
    position: absolute;
    top: 0;
    left: -18px;
}

#container li a {
    font-size: 11px;
    color: #666;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    float: left;
    overflow: hidden;
    display: block;
    max-width: 30px;
    line-height: 15px;
    text-align: center;
}

.active {
    background: #333365 !important;
}

.active:before {
    border-color: #333365 #333365 #333365 transparent;
}

.active:after {
    border-color: transparent transparent transparent #333365;
}

.active a {
    max-width: 1000px;
    color: #fff !important;
}

.hover {
    max-width: 1000px !important;
}

JS

$('li').mouseenter(function(){
  $('.active a').css('max-width', '40px');
  $(this).children('a').addClass('hover');
});

$('li').mouseleave(function(){
  $(this).children('a').removeClass('hover');
  $('.active a').css('max-width', '1000px');
});

Hope this helps!