قائمة جانبية باستخدام JAVASCRIPT



rsas book


قم بانشاء 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;
   }
}

في امان الله

موقعنا يستخدم ملفات تعريف الارتباط, لتحسين تجربة المستخدم عرض التفاصيل

حسنًا