Question

当我从一个面板切换到面板时，面板上的文字不会保持形状。在面板动画时，如何使文本保持形状。请帮忙

`<!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'});
            });
        });

    });

Answer 1

为您的菜单内容添加如下宽度：

.menucontent{width:600px;}

面板动画时，文本不会保持形式

1 个答案: