CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Znippy
Znippy

Reputation: 47

Move divs on a html page via CSS\JQuery

i want to recreate a simple one page web site.

This is a good example of what i want to have in the end:

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

I basically have too main divs one is the sidebar and the main container. By default i want that only the main container is visible. By clicking on the button i want that the sideBar moves in the screen like in the example above. 

<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>

the important css so far:

.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;
}

I guess i need Jquery or something like this to solve the problem but sadly i have no idea how. Any suggestions? I think it shouldnt be that hard. But i have no idea how i can place a div outside of the screen and then move it in the screen after pressing a button.

MC

Upvotes: 0

Views: 138

Answers (2)

Andrew
Andrew

Reputation: 536

You're gonna need to change up your CSS a little so the clearfix can be moved in the first place.

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

As for jQuery, it's pretty simple to use.

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);

One more thing to do is to add a semantic class to clearfix named in

<div class="clearfix in">

Upvotes: 1

SteamDev
SteamDev

Reputation: 4404

You can do this primarily with CSS, and use jQuery to toggle a class on the wrapping element to expand/collapse the sidebar.

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"); 
});

Upvotes: 0

Related Questions