CODEWITHSUNDEEP
jqueryhtmlcss
Jan Solo
Jan Solo

Reputation: 17

Expanding lists

I have spent many hours playing and searching for the answer but no joy!

I have a list that when I hover on it, I want the list elements to expand in width - I have this working, but when the mouse leaves the list, I want the list elements to go back to their original size (this is not a set size).

The CSS:

#navigation ul {
position: absolute;
right: 0;
bottom: 10px;
height: 30px;
list-style: none;
}

#navigation ul li {
display: inline-block;
margin-right: 20px;
text-transform: uppercase;
color: #FFF;
font-size: 12px;
height: 30px;
line-height: 30px;
text-align: left;
list-style: none;
background: #C00;
}

The HTML:

<ul id="nav">

    <li>about us</li>
    <li>news</li>
    <li>services</li>
    <li>area profiles</li>
    <li>book a valuation</li>
    <li>testimonials</li>
    <li>contact</li>

</ul>

The JQuery

 $('#nav li').each(function() {
     $.data(this, 'width', $(this).width());
 });

$('#nav').hover(function() {  
    $('#nav li').stop().animate({width:"150px"});
},
    function() {$('#nav li').stop().animate({width: $(this).data('width') + "px"});
});

Any help would be great!! I am trying to recreate this menu: http://teefouad.com/themes/truestory/

Upvotes: 0

Views: 64

Answers (6)

ThePavolC
ThePavolC

Reputation: 1738

Maybe this could help.

$('#nav li').hover(
    function() {  
        $(this).stop().animate({width:$(this).width() + 30});
    },
    function() {
        $(this).stop().animate({width:$(this).width() - 30});
    }
);

Demo

Upvotes: 0

ImreNagy
ImreNagy

Reputation: 511

In your mouseleave part you need to loop through your li elements since they all have different stored values:

$('#nav li').each(function() {
     $.data(this, 'width', $(this).width());
});

$('#nav').hover(function() {  
      $('#nav li').stop().animate({width:"150px"});
  },
  function() {
      $('#nav li').each(function() {    
          $(this).stop().animate({width: $.data(this, 'width') + "px"});
      });
});

See JSFiddle

Upvotes: 0

Lu&#237;s P. A.
Lu&#237;s P. A.

Reputation: 9739

Just do it with HTML and CSS

CSS

#navigation ul {
position: absolute;
right: 0;
bottom: 10px;
height: 30px;
list-style: none;
}

ul#nav li {
display: inline-block;
margin-right: 20px;
text-transform: uppercase;
color: #FFF;
font-size: 12px;
height: 30px;
line-height: 30px;
text-align: left;
list-style: none;
background: #C00;
}

ul#nav li:hover {
width: 150px;
cursor: pointer;;
}

HTML

<ul id="nav">

    <li>about us</li>
    <li>news</li>
    <li>services</li>
    <li>area profiles</li>
    <li>book a valuation</li>
    <li>testimonials</li>
    <li>contact</li>

</ul>

DEMO HERE

Upvotes: 0

vakata
vakata

Reputation: 3886

Why not go for a CSS only solution if the browsers you need to support allow for this? If this is not possible - there is no need to store the width before the hover - simply set it to auto. Here is a CSS only solution, it is far from optimal as it uses min-width, but still - it should be better than the jQuery solution.

#nav {
  list-style: none;
}
#nav li {
  text-align: center;
  min-width: 0;
  display: inline-block;
  background: red;
  margin: 0 0 1px 0;
  padding: 5px;
  transition: min-width 0.5s;
}
#nav li:hover {
  min-width: 150px;
}
<ul id="nav">
  <li>about us</li>
  <li>news</li>
  <li>services</li>
  <li>area profiles</li>
  <li>book a valuation</li>
  <li>testimonials</li>
  <li>contact</li>
</ul>

Upvotes: 3

Jeff Clarke
Jeff Clarke

Reputation: 1397

Can be done with just CSS. Since you are animating from an unknown width, you need to animate min-width. Set min-width to 0 for the normal state, and to 150px for the :hover state:.

fiddle: https://jsfiddle.net/427qq4cq/1/

Upvotes: 0

taxicala
taxicala

Reputation: 21769

I've modified a bit your JS in order to target the lis accurately:

var $nav = $('#nav'), $lis = $nav.find('li');

$lis.each(function() {
     $(this).attr('data-realwidth', $(this).width());
 });

$nav.on('mouseenter', function() {  
    $lis.stop().animate({width:150});
});

$nav.on('mouseleave', function() {
    $lis.stop().each(function() {
         $(this).animate({width: $(this).data('realwidth')});
     });
});

http://jsfiddle.net/kge66es0/

Upvotes: 0

Related Questions