Question

Hey all i have the following jsfiddle > Fiddle that i need some help on.

When i have my mouse over it-it expands out to a static width but, depending on the text length, it grabs it by the inner’s text $(‘.inner’).height().

Problem being is that it goes a little too far beyond the last text list item and when i roll over any of the text in the menu box it slides back up a little. How can prevent it from (1) sliding back up and (2) have the exact height needed without even having the extra space at the bottom of the box for its height?

The JS:

$(document).ready(function() {
    $('#menuSquare, .inner').mouseout(function() {
        theMenu('close');
    });

    $('#menuSquare, .inner').mouseover(function() {
        theMenu('open');
    });
});

function theMenu(what2Do) {
    if (what2Do == 'open') {
        $('#menuSquare').stop().animate({
            width: 190, //95
            height: $('.inner').height(),
            duration:900,
            'padding-top' : 10,
            'padding-right' : 10,
            'padding-bottom' : 10,
            'padding-left' : 10,
            backgroundColor: '#fff',
            opacity: 0.8
        }, 1000,'easeOutCubic')
    } else {
        $('#menuSquare').stop().animate({
            width: "20",
            height: "20",
            padding: '0px',
            backgroundColor: '#e51937',
            opacity: 0.8
        }, 500,'easeInCirc')
    }
}​

The HTML:

<div id="menuSquare" class="TheMenuBox" style="overflow: hidden; width: 20px; height: 20px; background-color: rgb(229, 25, 55); opacity: 0.8; padding: 0px;">
    <div class="inner">
      <p style="text-decoration:none; color:#666; cursor: pointer;    " onclick="changeImg('Custom Homes');">Custom Homes</p>
      <p style="text-decoration:none; color:#666; cursor: pointer;    " onclick="changeImg('Full Service Hotels');">Full Service Hotels</p>
      <p style="text-decoration:none; color:#666; cursor: pointer;    " onclick="changeImg('Mixed Use');">Mixed Use</p>
      <p style="text-decoration:none; color:#666; cursor: pointer;    " onclick="changeImg('Office');">Office</p>
      <p style="text-decoration:none; color:#666; cursor: pointer;    " onclick="changeImg('Retail');">Retail</p>
      <p style="text-decoration:none; color:#666; cursor: pointer;    " onclick="changeImg('Select Service Hotels');">Select Service Hotels</p>   
    </div>
</div>

Answer 1

This is because of the min-widht of the <div class="inner">. when the <div class="menuSquare" > haven’t expended, the with of <div class="inner"> is 110px, so the texts in the <p> Word Wrapped to two or more lines. then $(.inner).height() get the (Word Wrapped)height of your <div class="inner">

so to figure this prob out, just change your min-width to 190(the same as<div class="menuSquare">)