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

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

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

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

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

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

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

👨‍💻 7 ساعت قبل کاربر ناشناس این تمرین رو مشاهده کرد

3 جواب

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>javascript7</title>
</head>
<style>
    .saidebar{
        width: 300px;
        height: 100%;
        position: fixed;
        background: #c9aed196;
        top: 0;
        left: -300px;
        transition: left 1s ease-out;       
    }
    .saidebar li a{
        text-decoration: none;
        color: black;        
    }
    .saidebar ul{
        width: 200px;
        list-style-type:circle;
        left: 0;
    }
</style>
<body>
    <section>
        <button id="open" style="color:#c403ff ;border-radius: 10px;background-color: rgba(110, 106, 106, 0.253);font-size: 20px;">open</button>
    </section>
    <section class="saidebar">
        <button id="close" style="color:#c403ff ;border-radius: 10px;background-color: rgba(110, 106, 106, 0.253);font-size: 20px;" >close</button>
        <ul>           
           <li><a href="#">main page</a></li>
           <li><a href="#">log_in</a></li>
           <li><a href="#">log_out</a></li>
           <li><a href="#">panel</a></li>          
        </ul>
    </section>

    <script>
        let side = document.querySelector(".saidebar")
        let open = document.querySelector("#open")
        let close = document.querySelector("#close")
        open.onclick = ()=>{
            side.style.left = 0
            open.style.display = "none"
        }
        close.onclick = ()=>{
            side.style.left = "-300px"

            setTimeout(() => {
                open.style.display = 'block'
            }, 800);            
        }
    </script>    
</body>
</html>
Hana88 دانلود JavaScript HTML & CSS 
<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>منوی جانبی</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            overflow-x: hidden; /* جلوگیری از اسکرول افقی */
        }

        .menu {
            position: fixed;
            top: 0;
            right: -300px; /* شروع از خارج صفحه */
            width: 250px;
            height: 100%;
            background-color: #333;
            color: white;
            transition: right 0.3s ease; /* انیمیشن ورود منو */
            padding: 20px;
            box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
        }

        .menu.open {
            right: 0; /* ورود منو به صفحه */
        }

        .menu button {
            background-color: red;
            color: white;
            border: none;
            padding: 10px 15px;
            cursor: pointer;
            border-radius: 5px;
        }

        .toggle-button {
            padding: 10px 20px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            position: absolute;
            top: 20px;
            left: 20px;
        }
    </style>
</head>
<body>
    <button class="toggle-button" onclick="toggleMenu()">نمایش منو</button>

    <div class="menu" id="menu">
        <h2>منوی جانبی</h2>
        <button onclick="toggleMenu()">بستن</button>
        <p>این یک منوی جانبی است.</p>
    </div>

    <script>
        function toggleMenu() {
            const menu = document.getElementById('menu');
            menu.classList.toggle('open'); // اضافه یا حذف کلاس open
        }
    </script>
</body>
</html>
Mma123 دانلود HTML & CSS 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
        }
        /* استایل بدنه کشو */
        #DRAWER {
            display: grid;
            grid-template-columns: 20px 150px;
            grid-template-rows: 30px 80px auto;
            height: 100vh;
            width: 170px;
            position: fixed;
            left: calc(100% - 20px);   
            transition: left 0.3s ease;
        }

        /* استایل دستگیره کشو */
        #DRAWER-handle {
            grid-column: 1 / 2;
            grid-row: 2 / 3;
            
            border-radius: 10px 0px 0px 10px;
            user-select: none;
            font-size: 40px;
            text-align: center;
            line-height: 2;
            color: #edeafc;
            background: #204def;
        }

        /* استایل دستگیره کشو وقتی موس روی آن قرار میگره */
        #DRAWER-handle:hover{
            color: #c6b747;
            cursor: pointer;
        }

        /* استایل داخل کشو */
        #DRAWER-inside {
            grid-column: 2 / 3;
            grid-row: 1 / 4;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            background: #204def;
        }

        /* استایل محتویات کشو */
        .Drawer-contents {
            width: 70%;
            height: 50px;
            background: #76424255;
        }

        /* انیمیشن برای باز شدن کشو */
        @keyframes openDrawer {
            0% { left: calc(100% - 20px); }
            80% { left: calc(100% - 170px); }
            100% { left: calc(100% - 160px); }
        }

        /* انیمیشن برای بسته شدن کشو */
        @keyframes closeDrawer {
            0% { left: calc(100% - 160px); }
            100% { left: calc(100% - 20px); }
        }

        /* انیمیشن برای محتویات کشو هنگام باز شدن */
        @keyframes Drawer-contents {
            0% { transform: translateX(0); }
            50% { transform: translateX(15px); }
            100% { transform: translateX(-10px); }
        }
    </style>
</head>
<body>
    <!-- بدنه کشو -->
    <section id="DRAWER">
        <!-- دستگیره کشو -->
        <div id="DRAWER-handle">❰</div>
        <!-- داخل کشو -->
        <div id="DRAWER-inside">
            <!-- محتویات کشو -->
            <div class="Drawer-contents"></div>
            <div class="Drawer-contents"></div>
            <div class="Drawer-contents"></div>
            <div class="Drawer-contents"></div>
            <div class="Drawer-contents"></div>
        </div>
    </section>

    <!-- افزودن تگ‌های صدا -->
    <audio id="openSound" src="drawer-open-98801.mp3"></audio>
    <audio id="closeSound" src="086183_dresser-drawer-closing-87326.mp3"></audio>

    <script>
        // گرفتن تگ کشو، دستگیره کشو، محتویات کشو و صداها
        const DRAWER = document.getElementById("DRAWER");
        const DRAWERhandle = document.getElementById("DRAWER-handle");
        const DRAWERcontents = document.querySelectorAll(".Drawer-contents");
        const openSound = document.getElementById("openSound");
        const closeSound = document.getElementById("closeSound");

        // اجرای دستوراتی بعد از کلیک کردن دستگیره کشو
        DRAWERhandle.onclick = () => {

            if (!DRAWER.classList.contains("open")) {
                
                //اجرای انیمیشن باز شدن کشو
                DRAWER.style.animation = "openDrawer 0.6s ease-out forwards";
                
                //اجرای انیمیشن محتویات داخل کشو
                DRAWERcontents.forEach(v => { 
                    v.style.animation = "none"; // حذف انیمیشن قبلی 
                    v.offsetHeight; // ترفند برای بازنشانی انیمیشن 
                    v.style.animation = "Drawer-contents 0.6s ease-out"; 
                });

                //تغیر نماد دستگیره کشو
                DRAWERhandle.innerHTML = "❱";

                // پخش صدای باز شدن
                openSound.play(); 

                //افزودن کلاس (باز) به کشو
                DRAWER.classList.add("open");
            } 
            
            else {
                
                //اجرای انیمیشن بستن کشو
                DRAWER.style.animation = "closeDrawer 0.5s";

                //تغییر نماد دستگیره کشو
                DRAWERhandle.innerHTML = "❰";
                
                // پخش صدای بسته شدن
                closeSound.play();

                //حذف کلاس (باز) از کشو
                DRAWER.classList.remove("open");
            }
        };
    </script>
</body>
</html>
Unun..ali..nunu دانلود JavaScript HTML & CSS
<< صفحه قبل 1 صفحه بعد >>

ارسال جواب

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

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

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

حساب کاربری

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

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

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

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

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