如何使“响应菜单”滑入？
[英]How to make my Responsive Menu slide in?
问题描述
I feel like I'm missing quite a bit of information here, how do I get my menu to slide left upon clicking the circle top right? 
我感觉这里缺少很多信息，单击右上角的圆圈如何使菜单向左滑动？ Any help would be appreciated. 任何帮助，将不胜感激。
https://jsfiddle.net/gehzbpyr/3/ https://jsfiddle.net/gehzbpyr/3/
$(document).ready(function() { $('.nav-icon').on('click', function(e) { e.preventDefault(); $('.menu').toggleClass('slide-down'); }); });
html, body { padding: 0; margin: 0; overflow: hidden; width: 100%; } .navigation { background-color: rgba(255, 255, 255, 0); height: 100%; } .top-navigation { border: 1px solid black; width: 100%; height: auto; background-color: #fff !important; } .menu { background-color: #ff5f49; height: 100vh; /* display: none; */ margin-top: 60px; top: 0; left: 0; } .menu li { list-style: none; } .menu li a { text-decoration: none; color: #efefef; display: block; text-align: center; font-family: 'Changa One'; font-size: 7em; } .menu li a:hover { color: #353c42; transition: color 0.4s; } #logo { width: 200px; margin-top: 15px; position: absolute; } .nav-icon { margin: 10px 20px 10px 0; float: right; } @media (max-width: 802px) { .menu li a { font-size: 4em; } }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>KreativeZ | Reinventing the Digital Agency | Taking you to the stars!</title> <link rel="stylesheet" href="css/main.css"> <link href="https://fonts.googleapis.com/css?family=Changa+One|Nanum+Gothic" rel="stylesheet"> </head> <body> <nav class="navigation"> <div class="top-navigation"> <a href="#" class="nav-icon"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="35px" height="35px" viewBox="0 0 105.1 106" style="enable-background:new 0 0 105.1 106;" xml:space="preserve"> <style type="text/css"> .st0{fill:#FF5F49;stroke:#353C42;stroke-width:3;stroke-miterlimit:10;} </style> <circle class="st0" cx="55" cy="53.9" r="36.2"/> </svg> </a> <img src="img/KreativeZ_Final_Logo.png" alt="Logo" id="logo"> </div> <ul class="menu"> <li><a href="">Home</a></li> <li><a href="">Work</a></li> <li><a href="">Services</a></li> <li><a href="">Contact</a></li> </ul> </nav>
2 个解决方案
解决方案1
1 2018-03-19 13:09:53
First, you need to hide your menu. 首先，您需要隐藏菜单。
Then you can use slideToggle() to achieve this result. 然后，您可以使用slideToggle()获得此结果。
Or if you want to toggle a class, you can use max-height animation, from max-height:0 to max-height:100vh 或者，如果您要切换课程，则可以使用max-height动画，范围从max-height:0到max-height:100vh
See below 见下文
$(document).ready(function() { $('.nav-icon').on('click', function(e) { e.preventDefault(); $('.menu').slideToggle() }); });
html, body { padding: 0; margin: 0; overflow: hidden; width: 100%; } .navigation { background-color: rgba(255, 255, 255, 0); height: 100%; } .top-navigation { border: 1px solid black; width: 100%; height: auto; background-color: #fff !important; } .menu { background-color: #ff5f49; height: 100vh; display: none; margin-top: 60px; top: 0; left: 0; } .menu li { list-style: none; } .menu li a { text-decoration: none; color: #efefef; display: block; text-align: center; font-family: 'Changa One'; font-size: 7em; } .menu li a:hover { color: #353c42; transition: color 0.4s; } #logo { width: 200px; margin-top: 15px; position: absolute; } .nav-icon { margin: 10px 20px 10px 0; float: right; position:Absolute; right:0; top:0 } @media (max-width: 802px) { .menu li a { font-size: 4em; } }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <nav class="navigation"> <div class="top-navigation"> <a href="#" class="nav-icon"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="35px" height="35px" viewBox="0 0 105.1 106" style="enable-background:new 0 0 105.1 106;" xml:space="preserve"> <style type="text/css"> .st0{fill:#FF5F49;stroke:#353C42;stroke-width:3;stroke-miterlimit:10;} </style> <circle class="st0" cx="55" cy="53.9" r="36.2"/> </svg> </a> <img src="img/KreativeZ_Final_Logo.png" alt="Logo" id="logo"> </div> <ul class="menu"> <li><a href="">Home</a></li> <li><a href="">Work</a></li> <li><a href="">Services</a></li> <li><a href="">Contact</a></li> </ul> </nav>
解决方案2
1 已采纳 2018-03-19 13:12:05
You can use a transform property to translate the element, and toggle this property in the click event .... 您可以使用transform属性来转换元素，并在click事件中切换该属性...。
https://jsfiddle.net/RACCH/eu3sht2m/ https://jsfiddle.net/RACCH/eu3sht2m/
$(document).ready(function() {
$('.nav-icon').on('click', function(e) {
e.preventDefault();
$('.menu').toggleClass('slide-left');
});
});
CSS 的CSS
.slide-left{
transform: translateX(-100%);
}
you can even translate in every direction you want.... 您甚至可以在各个方向上进行翻译。
.slide-left{
transform: translateX(100%);
}
.slide-left{
transform: translateY(-100%);
}
.slide-left{
transform: translateY(100%);
}
To open it from a closed position set the default state as initial... 要从关闭位置打开它，请将默认状态设置为初始...
.menu {
....
transform: translateX(-100%);
}
.slide-left{
transform: translateX(0%);
}
https://jsfiddle.net/RACCH/1yxswomh/1/ https://jsfiddle.net/RACCH/1yxswomh/1/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.