[英]How do I add a smooth slide from left to right effect with CSS and Javascript on my side nav?
我正在尝试制作 CSS 和 JavaScript 侧导航。 这是我到目前为止的代码：
var nav = document.getElementById('nav'); function show(){ nav.style.display = "block"; }
.side-nav{ background-color:black; height:100%; width:250px; position: absolute; display:none; } #myLink{ color:gray; text-decoration: none; display:block; margin-left:15px; margin-bottom:10px; font-size:25px; transition: .5s; font-family: 'Marck Script', cursive; margin-top:10px; } #myLink:hover{ color:white; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="style.css" rel="stylesheet" type="text/css" /> <link href="https://fonts.googleapis.com/css2?family=Marck+Script&display=swap" rel="stylesheet"> </head> <body> <div class = "side-nav" id = "nav"> <div id = "myLinks"> <a href = "#" id = "myLink">Home</a> <a href = "#" id = "myLink">Contact</a> <a href = "#" id = "myLink">Blog</a> <a href = "#" id = "myLink">Products</a> </div> </div> <a href = "#" onclick = "show();">Show nav</a> <script src="script.js"></script> </body> </html>
如何使用侧面导航实现从左到右的平滑滑动？ 我还需要使用 JavaScript 吗？ 或者有什么方法可以只用 CSS 来做到这一点？ 提前致谢！！！
你想要这样吗？
var nav = document.getElementById('nav'); function show(){ nav.classList.toggle("active"); }
.side-nav{ background-color:black; height:100%; width:250px; position: absolute; display:none; } #myLink{ color:gray; text-decoration: none; display:block; margin-left:15px; margin-bottom:10px; font-size:25px; transition: .5s; font-family: 'Marck Script', cursive; margin-top:10px; } #myLink:hover{ color:white; } .side-nav.active{ display:block; animation:animate 1s linear forwards; } @keyframes animate{ from{ opacity:0; width:0; } to{ width:250px; opacity:1; } }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="style.css" rel="stylesheet" type="text/css" /> <link href="https://fonts.googleapis.com/css2?family=Marck+Script&display=swap" rel="stylesheet"> </head> <body> <div class = "side-nav" id = "nav"> <div id = "myLinks"> <a href = "#" id = "myLink">Home</a> <a href = "#" id = "myLink">Contact</a> <a href = "#" id = "myLink">Blog</a> <a href = "#" id = "myLink">Products</a> </div> </div> <a href = "#" onclick = "show();">Show nav</a> <script src="script.js"></script> </body> </html>
如果你想使用 jQuery，你需要这样的东西。 我还添加了关闭按钮。
$( '.show-nav' ).click( function() { $( '#nav' ).animate( {width: 'toggle'} ); } );
.side-nav{ background-color:black; height:100%; width:250px; position: absolute; display: none; } #myLink{ color:gray; text-decoration: none; display:block; margin-left:15px; margin-bottom:10px; font-size:25px; transition: .5s; font-family: 'Marck Script', cursive; margin-top:10px; } #myLink:hover{ color:white; } #nav .show-nav { position: absolute; top: 0; right: 0; padding: 10px; color: white; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="style.css" rel="stylesheet" type="text/css" /> <link href="https://fonts.googleapis.com/css2?family=Marck+Script&display=swap" rel="stylesheet"> </head> <body> <div class = "side-nav" id = "nav"> <div id = "myLinks"> <a href = "#" id = "myLink">Home</a> <a href = "#" id = "myLink">Contact</a> <a href = "#" id = "myLink">Blog</a> <a href = "#" id = "myLink">Products</a> <a class="show-nav" href = "#">Close</a> </div> </div> <a class="show-nav" href = "#">Show nav</a> <script src="script.js"></script> </body> </html>
如何使要滑动的图像从左侧0,0位置向右端移动到右侧？
[英]How do i make the image to slide move to the right from left 0,0 position to the end right side?
如何使用HTML5 / CSS3或JavaScript添加滑入效果和发光效果？
[英]How do I add a slide-in effect and a glowing effect using HTML5/CSS3 or JavaScript?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.