Question

我想重新创建一个简单的单页网站。

这是我最终想要拥有的一个很好的例子：

http://onepagelove.com/demo/?theme=EastJava

我基本上有太主要的div，一个是侧边栏和主要容器。默认情况下，我希望只有主容器可见。通过单击按钮，我希望sideBar在屏幕中移动，如上例所示。

<html>
<head>
    <title>One Page</title>
    <meta name="author" content="Me">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

    <div class="clearfix">
        <div class ="sideBar">

        </div>
        <div class ="mainCon">
            <div class ="moreB">
             <div class="buttonText">
                Learn More
             </div>
            </div>
        </div>
    </div>

</body>
</html>

到目前为止重要的CSS：

.sideBar{
width: 20%;
height: 100%;
background-color: #FF0040;
float: left;
}

.mainCon{
height: 100%;
width: 80%;
float: left;
background-color: #F3F781;

}

.moreB{

color: #ffffff;
width: 100px;
height: 50px;
margin-top: 50%;
margin-right: 50%;
margin-left: 50%;
border-radius: 60px 60px 60px 60px;
-moz-border-radius: 60px 60px 60px 60px;
-webkit-border-radius: 60px 60px 60px 60px;
border: 2px solid #ffffff;
}

我想我需要Jquery或类似的东西才能解决问题，但遗憾的是我不知道如何解决问题。有什么建议？我认为不应该那么难。但我不知道如何在屏幕外放置一个div，然后在按下按钮后将其移动到屏幕上。

MC

Answer 1

您需要稍微更改CSS，以便首先移动clearfix。

.clearfix{
    position: absolute;
    left: -20%;
    top: 0px;
    height: 100%;
    width: 100%;
}

至于jQuery，它使用起来非常简单。

function toggleSidebar(){
    $('.in').animate({left: '0%'}, function(){
        $(this).addClass('out').removeClass('in');
    });

    $('.out').animate({left: '-20%'}, function(){
        $(this).addClass('in').removeClass('out');
    });
}

$('.moreB').on('click', toggleSidebar);

还有一件事是为clearfix添加一个名为in

的语义类

<div class="clearfix in">

Answer 2

您可以主要使用CSS执行此操作，并使用jQuery在包装元素上切换类以展开/折叠侧边栏。

http://jsfiddle.net/G7K6J/

<强> HTML

<div class="wrapper clearfix">
    <div class ="sideBar">

    </div>
    <div class="mainCon">
        <div class="moreB">
            <div class="buttonText">
                Learn More
            </div>
        </div>
    </div>
</div>

<强> CSS

.clearfix {
    clear:both;
    overflow:hidden;
}

.sideBar{
width: 0%;
height: 200px;
background-color: #FF0040;
float: left;
  -webkit-transition: width 300ms;
  -moz-transition: width 300ms;
  -o-transition: width 300ms;
  transition: width 300ms;
}

.mainCon{
height: 200px;
width: 100%;
float: left;
background-color: #F3F781;
  -webkit-transition: width 300ms;
  -moz-transition: width 300ms;
  -o-transition: width 300ms;
  transition: width 300ms;
}

.wrapper.expanded .sideBar {
 width:20%;   
}

.wrapper.expanded .mainCon {
 width:80%;
}

.moreB{
color: #ffffff;
width: 100px;
height: 50px;
margin:0 auto;
border-radius: 60px 60px 60px 60px;
-moz-border-radius: 60px 60px 60px 60px;
-webkit-border-radius: 60px 60px 60px 60px;
border: 2px solid #ffffff;
}

<强>的jQuery

$(".moreB").click(function(){
   $(".wrapper").toggleClass("expanded"); 
});

通过CSS \ JQuery在html页面上移动div

2 个答案: