Jump to content

Java for responsive top menu


logicalone

Recommended Posts

I am using the W3S responsive top menu but the transition to open the mobile menu is not smooth.

 

I'm good with css but my skills with JS are lacking. Can someone please advise the code to make the transition slide open?

 

This is the current JS:

 

<script>

 

function myFunction() {

 

var x = document.getElementByld("myTopnav");

 

if (x.className === "topnav") {

 

x.className += "responsive";

 

} else {

 

x.className = "topnav";

 

}

 

}

 

</script>

 

 

Any help gratefully received. Thanks

Link to comment
Share on other sites

The preference is to use css3 such as

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />
        <title>Document Title</title>
        <style>
            body {margin:0;}

            ul.topnav {
                list-style-type: none;
                margin: 0;
                padding: 0;
                overflow: hidden;
                position: relative;
                background-color: #333;
            }

            ul.topnav li {float: left;}

            ul.topnav li a {
                display: inline-block;
                color: #f2f2f2;
                text-align: center;
                padding: 14px 16px;
                text-decoration: none;
                transition: 0.3s;
                font-size: 17px;
            }

            ul.topnav li a:hover {background-color: #555;}
            .topnav li:first-child ~ li {max-height:none; overflow: hidden;}
            ul.topnav li.icon {display: none;}

            @keyframes example {
                from {max-height: 0; opacity: .75;}
                to {max-height: 100vh; opacity:1; }
            }


            @media screen and (max-width:680px) {
                ul.topnav {background: none;}
                ul.topnav li:not(:first-child) {display: none; }
                ul.topnav li.icon {display: block;}
                ul.topnav li {background-color: #333;}
                ul.topnav.responsive {position: relative;}
                ul.topnav li.icon {
                    position: absolute;
                    right: 0;
                    top: 0;

                }
                ul.topnav.responsive li, ul.topnav li:first-child {
                    float: none;
                    display: block;
                }
                ul.topnav.responsive li a {
                    display: block;
                    text-align: left;
                }

                .topnav.responsive li:first-child ~ li:not(:last-child) {


                    animation-name: example;
                    animation-duration: 1s;
                }


            }
        </style>
    </head>
    <body>

        <ul class="topnav" id="myTopnav">
            <li><a class="active" href="#home">Home</a></li>
            <li><a href="#news">News</a></li>
            <li><a href="#contact">Contact</a></li>
            <li><a href="#about">About</a></li>
            <li class="icon">
                <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a>
            </li>
        </ul>

        <div style="padding-left:16px">
            <h2>Responsive Topnav Example</h2>
            <p>Resize the browser window to see how it works.</p>
        </div>

        <script>
            function myFunction() {
                var x = document.getElementById("myTopnav");
                if (x.className === "topnav") {
                    x.className += " responsive";
                } else {
                    x.className = "topnav";
                }
            }
        </script>

    </body>
</html>
  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...