logicalone Posted November 5, 2016 Share Posted November 5, 2016 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 More sharing options...
dsonesuk Posted November 6, 2016 Share Posted November 6, 2016 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> 1 Link to comment Share on other sites More sharing options...
logicalone Posted November 6, 2016 Author Share Posted November 6, 2016 (edited) Thank you very much However, the transition to open the menu is still very abrupt. I would like it to slide open more slowly and smoothly. Edited November 6, 2016 by logicalone Link to comment Share on other sites More sharing options...
dsonesuk Posted November 6, 2016 Share Posted November 6, 2016 (edited) Well do you have some sort of infliction that prevents you adjusting this to slow it down more animation-duration: 1s; Edited November 6, 2016 by dsonesuk Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now