Morgan Clarke Morgan Clarke - 7 months ago 14
Javascript Question

Expanding menu shows text before expansion

I have made an expanding menu that will be my navigation menu. When you run it the text is showing when it isn't expanded. This is what I don't want, I want it hidden until the menu is expanded. I have tried to use

overflow: hidden;
but it doesn't work.
JSFidlle

HTML

<div id="div1">Home</div><br />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>


CSS

#div1{
position: fixed;
width: 0;
height: 0;
border-bottom: 50px solid black;
border-right: 50px solid transparent;
float: left;
color: white;
font-size: 20px;
vertical-align: middle;
line-height: 50px;
}


JQUERY

$(document).ready(function() {

$("#div1").hover(
function() {
$(this).animate({
width: '+=800'
}, 'slow'
);
},
function() {
$(this).animate({
width: '-=800px'
}, 'slow'
);
}
);

});

Answer

You should wrap the text in a span so you can animate that separately. Fiddle.

html:

<div id="div1"><span>Home</span></div><br />

css:

#div1{
    position: fixed;
    width: 0;
    height: 0;
    border-bottom: 50px solid black;
    border-right: 50px solid transparent;
    float: left;
    color: white;
    font-size: 20px;
    vertical-align: middle;
    line-height: 50px;
}

js:

$(document).ready(function() {
    $("#div1 span").hide();

    $("#div1").hover(
        function() {
          $(this).animate({
            width: '+=800'
            }, 'slow'
          );

          $("span", this).show('slow');
        },
        function() {
          $(this).animate({
            width: '-=800px'
            }, 'slow'
          );

          $("span", this).hide('slow');
        }
    );
});