تمرین برنامه نویسی؛ با کدبزن!

منبع جامع سوالات و تمرینات برنامه نویسی

0

ایجاد منوی متحرک

Admin آسان 218/ 222 بازدید

با استفاده از html و css و جاوااسکریپت یک صفحه شامل منویی طراحی کنید که ویژگی های زیر را داشته باشد

یک دکمه طراحی کنید که با کلیک روی آن منویی با ارتفاع 100% از سمت راست از خارج صفحه وارد صفحه شود

در داخل منو گزینه ای برای (بستن) منو قرار دهید

1 جواب

نمیتونم این تمرین رو حل کنم!
0
<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>closemenu</title>
    <style>
        button#openMenu {
  padding: 10px;
  background-color: #3498db;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 3vw;
}
#menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 200px;
  height: 100%;
  background-color: #333;
  color: white;
  padding: 20px;
  transition: right 0.5s;
}
    </style>
</head>
<body>
    <button id="openMenu" type="button">نمایش منو</button>
    <div id="menu" class="">
      <ul>
        <li><a href="#">گزینه 1</a></li>
        <li><a href="#">گزینه 2</a></li>
        <li><a href="#">گزینه 3</a></li>
        <button id="closeMenu" type="button">بستن منو</button>
    </ul>
    </div>
    <script>
        document.getElementById('openMenu').addEventListener('click', function() {
            document.getElementById('menu').style.right = '0';
        });
        
        document.getElementById('closeMenu').addEventListener('click', function() {
            document.getElementById('menu').style.right = '-100%';
        });
    </script>
</body>
</html>
Abolfazlify دانلود HTML CSS

ارسال جواب

// کداتو توی این بخش بنویس
// فرقی نمیکنه چه زبان برنامه نویسی باشه، همرو پشتیبانی میکنیم :)
// البته قبلش این سه خط رو پاک کن


  • تو جوابت میتونی از تصویر، کد، لینک به سایر صفحات و... استفاده کنی
  • لطفا جواب های تکراری ارسال نکنید
  • جواب های ارسالی، پس از بررسی کوتاهی، ویرایش میشن و در سایت نمایش داده میشن

تمرینات مرتبط

تشخیص با استفاده از هوش مصنوعی
×
×
بستن