LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code


main
CSS
#menu {
  float: left;
  background-color: pink;
  width: 200px;
  height: 300px;
}

#main {
  background-color: BurlyWood;
  margin-left: 200px;
  height: 300px;
}

#sidebar {
  background-color: IndianRed;
  width: 350px;
  float: left;
  height: 300px;
}

#split-bar {
  background-color: black;
  height: 100%;
  float: right;
  width: 6px;
  cursor: col-resize;
}
JS
var min = 300;
var max = 3600;
var mainmin = 200;

$('#split-bar').mousedown(function (e) {
    e.preventDefault();
    $(document).mousemove(function (e) {
        e.preventDefault();
        var x = e.pageX - $('#sidebar').offset().left;
        if (x > min && x < max && e.pageX < ($(window).width() - mainmin)) {  
          $('#sidebar').css("width", x);
          $('#main').css("margin-left", x);
        }
    })
});
$(document).mouseup(function (e) {
    $(document).unbind('mousemove');
});
Host Instantly Drag and Drop Website Builder

 

Term
Wed, 11/29/2017 - 11:20

Related Codes

Pen ID
Pen ID
Pen ID