Чистый Javascript & CSS Resizable правая боковая панель - PullRequest
Новая
       9

Чистый Javascript & CSS Resizable правая боковая панель

0 голосов
/ 06 декабря 2018

У меня есть макет, который имеет правую складную боковую панель.Я не могу использовать jquery из-за конфликта с некоторыми другими js framework.

Я должен сделать это с чистым javascript и css

Пожалуйста, проверьте ссылку jsfiddle ниже

HTML: 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Örnek</title>
<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,800,700,400italic,600italic,700italic,800italic,300italic" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin="" /> -->


</head>
<body>
<div id="sidebar">
<button class="btn btn-primary" id="close" onclick="r()" style="position: absolute;
top: 50%;
left: -10px;
width: 20px;
padding: 0px;
height: 30px;"></button>
</div>
<div id="container" style=" height:100%; position:relatvie;">
<div style="postion:absolute; right:0px; top:100px;">
Please press blue button at right side. How can i make sidebar resizable to west direction
</div>
</div>

<script>
var opened=false;

function r() {
var element = document.getElementById("sidebar");
if (opened==false) {
element.classList.add("opened");
opened = true;
} else {
element.classList.remove("opened");
opened=false;
}


}


</script>

</body>
</html>

И CSS: 

html, body {
height: 100%;
}
#sidebar {
background: #222;
text-align: center;
color: #fff;
font-size: 3em;
font-weight: bold;
padding-top: 1em;
box-sizing: border-box;
width: 300px; height: 100%; 
position: fixed; top: 0px; 
right: -300px; 
transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); 
transition-duration: 0.2s; transform: translate3d(-6px, 0px, 0px); border-radius: 0px; z-index: 9999;
resize: horizontal;
opacity:0.9;
}

#sidebar.opened {
transition-duration: 0.2s; transform: translate3d(0px, 0px, 0px); border-radius: 0px; z-index: 9999;
right:  0px; 
}

button:focus {outline:0 !important;}

JSFIDDLE

Я хочу сделатьИзменение размера боковой панели с помощью мыши в западном направлении.Я не могу использовать JQuery.Я должен сделать это с чистым JS и CSS.

...