قم بانشاء 3 ملفات كالتالي:
1- index.html
2- style.css
3- index.js
ضع في ملف index.html التالي:
<html>
<head>
<meta charset="utf-8">
<title>Send Msg</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button onclick="slide_func();">+</button>
<div id="slide">
<img src="https://www.usermuse.com/img/avatar-male2.png" width="120px">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script src="index.js"></script>
</body>
</html>
ضع في ملف style.css التالي:
body {
background: white;
padding: 0px;
margin: 0px;
}
div#slide {
background: linear-gradient(78deg, #519e03 0, #9dff3a 100%);
box-shadow: -8px -5px 20px 0 #58a608;
transition: all 600ms;
position: fixed;
padding-top: 70px;
height: 100vh;
text-align: center;
width: 250px;
right: -250px;
top: 0;
}
button {
background: #f6fffd;
position: absolute;
transition: all 350ms;
border-radius: 50%;
cursor: pointer; font-size: 27px;
color: #70c9bc; z-index: 9999;
height: 40px; width: 40px;
outline: 0; border: 0;
right: 16px; top: 14px;
}
button:hover{ transform: scale(1.3); }
div#slide ul {
list-style: none;
padding: 0;
margin: 0;
}
div#slide ul li {
background: #f0fffd;
padding: 21px 1px;
width: 95%;
margin: 6px 5px;
}
ضع في ملف index.js التالي:
var slideStatus = true;
function slide_func(){
if (slideStatus == true) {
document.getElementById("slide").style.right = "0px";
slideStatus = false;
} else {
document.getElementById("slide").style.right = "-250px";
slideStatus = true;
}
}
في امان الله
التصنيف:
برمجة مواقع