Texts don't keep form when panels animate

StackOverflow https://stackoverflow.com/questions/22951830

题

When I switch from panel to panel the text on the panels don't keep form. How can I make the text keep shape as I panels animate. Please Help

`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Website</title>

<!--Favicon-->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

<!--Fonts-->
<link href='http://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' type='text/css'>

<!--CSS-->
<link rel="stylesheet" type="text/css" href="css/normalize.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>

</head>

<body>

    <div id="sidebar">
        <ul>
            <li><img class="logo" src="img/whitelogo.svg"><img class="logotwo" src="img/whitelonglogo.svg"></li>
            <li><img class="nav_icons" src="img/about.svg"><a class="about_btn" href="#">ABOUT</a></li>
            <li><img class="nav_icons" src="img/submit.svg"><a class="submit_btn" href="#">SUBMIT</a></li>
            <li><img class="nav_icons" src="img/contact.svg"><a class="contact_btn" href="#">CONTACT</a></li>
        </ul>
    </div>

    <div id="about">
        <div class="menucontent">
            <div class="aboutclose closer">CLOSE</div>
            <div>
                <img src="img/logo.png">
            </div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a nunc nec mi hendrerit lacinia quis eu enim. Suspendisse sed arcu quis nunc accumsan congue. Curabitur at lectus eu turpis tincidunt ultrices. Pellentesque eleifend metus eget massa dapibus, nec elementum lorem feugiat. Phasellus ultricies condimentum libero nec tincidunt. Donec hendrerit ipsum ac iaculis blandit. Mauris lacinia nunc ut nunc mattis, vel suscipit diam iaculis. Cras vitae luctus velit. Maecenas vel est nibh. Praesent at consectetur dui, nec tincidunt lacus. Sed ultricies nibh porta quam mattis, eget consectetur nunc dapibus. Mauris cursus odio eu lorem vestibulum, in commodo magna porta. Etiam luctus leo in est tristique elementum. In bibendum ante congue ligula fermentum, vitae suscipit purus posuere. Sed tincidunt ultricies nunc, pulvinar interdum odio. Praesent enim nulla, molestie sed pretium ac, posuere et quam.</p>
            <p></p>
        </div>
    </div>

    <div id="submit">
        <div class="menucontent">
            <div class="submitclose closer">CLOSE</div>
        </div>
    </div>

    <div id="contact">
        <div class="menucontent">
            <div class="contactclose closer">CLOSE</div>
        </div>
    </div>

    <div id="mainarea">

    </div>

<!--Javascript-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/browser_hack.js" type="text/javascript"></script>
<script src="js/application.js" type="text/javascript"></script>

</body>
</html>`

CSS--------------------------------------------------------------------------------------

html, body {
    height: 100%;
    width: 100%;
}

a{
    text-decoration: none;
}

/*Side Bar Nav----------------------------------*/

.logo {
    position: absolute;
    top: 30px;
    left: 10px;
    width: 75px;
    margin: 0px;
}

.logotwo {
    position: absolute;
    top: 34px;
    left: 110px;
    width: 150px;
    display: none;
}

#sidebar {
    float: left;
    z-index: 10;
    position: relative;
    top: 0;
    left: 0;
    height: 100%;
    width: 95px;
    background: #555;
    overflow: hidden;

    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#sidebar:hover {
    width: 280px;
    background: #000;
}

.nav_icons {
    width: 40px;
    height: 40px;
}

#sidebar li {
    display: block;
    font-family: 'Special Elite', cursive;
}

#sidebar ul li:nth-child(2) {
    position: absolute;
    top: 88px;
    left: 27px;
}

#sidebar ul li:nth-child(3) {
    position: absolute;
    top: 148px;
    left: 27px;
}

#sidebar ul li:nth-child(4) {
    position: absolute;
    top: 208px;
    left: 27px;
}

.about_btn,
.submit_btn,
.contact_btn {
    position: relative;
    top: -25px;
    left: 80px;
    color: #fff;
    display: none;
    padding: 10px 200px 5px 5px;
}

.gecko .about_btn,
.gecko .submit_btn,
.gecko .contact_btn { 
    top: -35px;
}

#sidebar a:hover {
    background-color: #fff;
    color: #000;
}

/*Panel------------------------------------*/

.closer {
    float: right;
    font-weight: 900;
    font-size: .75em;
    padding: 5px;
    cursor: pointer;
}

.closer:hover {
    font-size: .8em;
}

/*About------------------------------------*/

#about {
    float: left;
    z-index: 10;
    height: 100%;
    width: 600px;
    background-color: #fff;
    box-shadow: 3px 0px 2px #555;
    opacity: .8;
    display: none;
}

#about img {
    position: relative;
    top: 25px;
    left: 100px;
    display: block;
    width: 400px;
}

/*Contact------------------------------------*/

#contact {
    float: left;
    z-index: 10;
    height: 100%;
    width: 600px;
    background-color: #fff;
    box-shadow: 3px 0px 2px #555;
    opacity: .8;
    display: none;
}

/*Submit------------------------------------*/

#submit {
    float: left;
    z-index: 10;
    height: 100%;
    width: 600px;
    background-color: #fff;
    box-shadow: 3px 0px 2px #555;
    opacity: .8;
    display: none;
}

/*Main Area--------------------------------*/

#mainarea {
    float:left;
    display:block;
    position:relative;
    top: 0;
    right: 0;
    z-index: 1;
    height: 100%;
    width: 100%;
    padding-left: 100px;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -0-box-sizing: border-box;
    box-sizing: border-box;
}

JQUERY--------------------------------------------------------------------------------------

 $(document).ready(function(){

        $(function(){
            $('#sidebar').hover(function(){
                $(".about_btn, .submit_btn, .contact_btn").delay(100).fadeIn(1000);
                $(".logotwo").delay(100).fadeIn(1000);
            },function(){
                $(".about_btn, .submit_btn, .contact_btn").fadeOut(10);
                $(".logotwo").fadeOut(10);
            });
        });

    //ABOUT PANEL---------------------------------------------------

        $(function(){
            $(".about_btn").click(function () {

                if($('#submit').css("display") == "block") {
                    $('#submit').fadeOut(10);
                    $('#about').animate({width: 'toggle'});
                } else if($('#contact').css("display") == "block") {
                    $('#contact').fadeOut(10);
                    $('#about').animate({width: 'toggle'});
                } else {
                    $('#about').animate({width: 'toggle'});
                }
            }); 
        });

        $(function(){
            $(".aboutclose").click(function () {
                $('#about').animate({width: 'toggle'});
            });
        });

    //SUBMIT PANEL---------------------------------------------------
        $(function(){
            $(".submit_btn").click(function () {

                if($('#about').css("display") == "block") {
                    $('#about').fadeOut(10);
                    $('#submit').animate({width: 'toggle'});
                } else if($('#contact').css("display") == "block") {
                    $('#contact').fadeOut(10);
                    $('#submit').animate({width: 'toggle'});
                } else {
                    $('#submit').animate({width: 'toggle'});
                }
            });
        });

        $(function(){
            $(".submitclose").click(function () {
                $('#submit').animate({width: 'toggle'});
            });
        });

    //CONTACT PANEL---------------------------------------------------
        $(function(){
            $(".contact_btn").click(function () {

                if($('#about').css("display") == "block") {
                    $('#about').fadeOut(10);
                    $('#contact').animate({width: 'toggle'});
                } else if($('#submit').css("display") == "block") {
                    $('#submit').fadeOut(10);
                    $('#contact').animate({width: 'toggle'});
                } else {
                    $('#contact').animate({width: 'toggle'});
                }
            }); 
        });

        $(function(){
            $(".contactclose").click(function () {
                $('#contact').animate({width: 'toggle'});
            });
        });

    });
有帮助吗？

解决方案

Give your menu content a width like so:

.menucontent{width:600px;}
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top