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

تمرین آسان

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

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

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

reply 6

<!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

H

جواب شماره 104

تبدیل کد

نظرتو راجب این جواب بنویس...

<!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

M

جواب شماره 406

تبدیل کد

نظرتو راجب این جواب بنویس...

<!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

U

جواب شماره 2506

تبدیل کد

نظرتو راجب این جواب بنویس...

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Menu Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        #menu {
            position: fixed;
            top: 0;
            right: -300px;
            width: 300px;
            height: 100%;
            background-color: #333;
            color: white;
            transition: right 0.3s;
        }
        #menu.open {
            right: 0;
        }
        #toggleBtn {
            margin: 20px;
            padding: 10px 20px;
            cursor: pointer;
        }
    </style>
</head>
<body>

    <button id="toggleBtn">باز کردن منو</button>
    <div id="menu">
        <button id="closeBtn">بستن منو</button>
        <p>گزینه 1</p>
        <p>گزینه 2</p>
    </div>

    <script>
        const toggleBtn = document.getElementById('toggleBtn');
        const menu = document.getElementById('menu');
        const closeBtn = document.getElementById('closeBtn');

        toggleBtn.onclick = function() {
            menu.classList.toggle('open');
        };

        closeBtn.onclick = function() {
            menu.classList.remove('open');
        };
    </script>

</body>
</html>

Ai

A

جواب شماره 5068

تبدیل کد

نظرتو راجب این جواب بنویس...

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Practice</title>

    <style>         
        #side {
            width: 300px;
            height: 100%;
            background-color: gold;
            position: fixed;
            right: -300px;
            top: 0px;
            transition: right 1s ;
        }
        #side ul {
            list-style-type: none;
        }
        #side ul li {
            padding-top: 60px;
            cursor: pointer;
        }
    </style>
</head>
<body>

   <button onclick="openMenu()">menu</button>
    <section id="side">
        <button onclick="closeMenu()">close</button>
        <ul>
            <li>صفحه اصلی</li>
            <li>صفحه فرعی</li>
            <li>صفحه میانبر</li>
            <li>صفحه جالب</li>
            <li>صفحه جالبتر</li>
        </ul>
    </section>

  <script>
    let menu = document.getElementById("side")
    let openMenu = ()=>{
        menu.style.right = "0px"
    }
    let closeMenu = ()=> {
        menu.style.right = "-300px"
    }
  </script>

</body>
</html>

Programmer

P

جواب شماره 4814

تبدیل کد

نظرتو راجب این جواب بنویس...

<!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>
        .slidbar{
            height: 100%;
            width: 300px;
            background-color: aquamarine;
            position: fixed;
            top: 0;
            right:-300px;
        }

        .slidbar li{
            margin: 13px;
            padding: 5px;
            background-color: rgb(65, 173, 137);
        }

        #close{
            right: 0;
        }

    </style>
</head>
<body>
    <button onclick="openToggle()">open toggle meno</button>
<section class=" slidbar">
    <div>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <button id="close" onclick="closeToggle()">close meno</button>
    </div>
</section>
<script>
    let open=document.querySelector('.slidbar')
    let openToggle=()=>{
        open.style.right=0
    }

    let closeToggle=()=>{
        open.style.right='-300px'
    }

Maryam.n

M

جواب شماره 3582

تبدیل کد

نظرتو راجب این جواب بنویس...

reply ارسال جواب

قبل از ارسال جواب ویدیو زیر رو ببین تا کار کردن با markdown رو یاد بگیری
لطفا جواب های تکراری ارسال نکن
در متن جواب اطلاعات شخصی شامل ایمیل و شماره موبایل و آی دی و... ننویس
سعی کن داخل کدت از کلمات فارسی یا فینگلیش (فارسی با حروف انگلیسی) استفاده نکنی و کدت تماما انگلیسی باشه
لطفا داخل جواب از ایموجی یا کاراکترهای خاص استفاده نکن
ارسال جواب حق مادی یا معنوی برای ارسال کننده ایجاد نمیکند و تمام حقوق برای سایت کدبزن محفوظ است

راهنمای ارسال جواب 👇

بستن