How to make dropdwon slide in javascript?

QQ_cazo · September 13, 2021

                    <div class="topnav" id="myTopnav">
                    <a href="/posts/t/top"><div style="border: 2px black solid;border-radius: 25px;width: 40px;padding-left: 4px;padding-right: 4px;"> Top </div></a>
                    <a href="/posts/t/new"><div style="border: 2px black solid;border-radius: 25px;width: 47px;padding-left: 4px;padding-right: 4px;"> New </div></a>
                    <a href="/posts/t/rising"><div style="border: 2px black solid;border-radius: 25px;width: 61px;padding-left: 4px;padding-right: 4px;"> Rising </div></a>
                    <a href="/posts/t/recommended"><div style="border: 2px black solid;border-radius: 25px;width: 135px;padding-left: 4px;padding-right: 4px;"> Recommended</div></a>
                    <a href="javascript:void(0);" class="icon" id="filter-nav-btn">
                        <i class="fa fa-bars"><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M24 21h-24v-2h24v2zm0-4.024h-24v-2h24v2zm0-3.976h-24v-2h24v2zm0-4h-24v-2h24v2zm0-6v2h-24v-2h24z"/></svg></i>
                    </a>
                    </div>
                    <script>
                    document.getElementById('filter-nav-btn').addEventListener("click", function() {
                    var x = document.getElementById("myTopnav");
                    if (x.className === "topnav") {
                        x.className += " responsive";
                    } else {
                        x.className = "topnav";
                    }
                    });
                    </script>
                    <style>
                    .topnav {
                    overflow: hidden;
                    background-color: rgba(0, 0, 0, 0.03);
                    color: black;
                    
                    }

                    .topnav a {
                    float: left;
                    display: block;
                    color: black;
                    text-align: center;
                    padding: 14px 16px;
                    text-decoration: none;
                    font-size: 17px;
                    border: none;
                    }

                    .topnav a:hover {
                    background-color: #ddd;
                    color: black;
                    }
                    .topnav .icon {
                    display: none;
                    }

                    @media screen and (max-width: 767px) {
                    .topnav a:not(:first-child) {display: none;}
                    .topnav a.icon {
                        float: right;
                        display: block;
                    }
                    }

                    @media screen and (max-width: 767px) {
                    .topnav.responsive {
                    position: relative;
                    border-bottom: 1px black solid;
                     }
                    .topnav.responsive .icon {
                        position: absolute;
                        right: 0;
                        top: 0;
                    }
                    .topnav.responsive a {
                        float: none;
                        display: block;
                        text-align: left;
                        border: 1px solid rgb(0 0 0 / 13%);
                    }
                    }
                    </style>

I tried using "transition" and it wont work, can someone help me?