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

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

0

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

Admin آسان 218/ دانلود 413 بازدید

با استفاده از 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
<< صفحه قبل 1 صفحه بعد >>

ارسال جواب

# کداتو توی این بخش بنویس
# فرقی نمیکنه چه زبان برنامه نویسی باشه، همرو پشتیبانی میکنیم :)
# البته قبلش این سه خط رو پاک کن
  • تو جوابت میتونی از تصویر، کد، لینک به سایر صفحات و... استفاده کنی
  • لطفا جواب های تکراری ارسال نکن
  • جواب های ارسالی، پس از بررسی کوتاهی، ویرایش میشن و در سایت نمایش داده میشن
  • ارسال جواب حق مادی یا معنوی برای ارسال کننده ایجاد نمیکند و تمام حقوق برای سایت کدبزن محفوظ است

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

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

حساب کاربری

برای استفاده از این بخش باید وارد حساب کاربریت بشی

ورود/ثبت نام
×

نمیتونم این تمرین رو حل کنم 😞

اگه متوجه تمرین نمیشی یا به هر دلیلی نمیتونی حلش کنی، کاملا طبیعیه، اشکالی نداره؛ ناراحت نشو 😊
سعی کن تمرینات آسون تر رو ببینی و جواب های مختلفی که دیگران ارسال کرده اند رو بررسی کنی و یواش یواش به سراغ تمرینات سخت تر بری. همچنین ممکنه جوابت درست باشه ولی با سایر جواب ها متفاوت باشه
اگه برنامه نویسی رو هنوز شروع نکردی یا خوب یاد نگرفتی، میتونی از طریق لینک زیر یاد بگیری

یادگیری برنامه نویسی
بستن