[英]How to make my Responsive Menu slide in?
我感覺這里缺少很多信息，單擊右上角的圓圈如何使菜單向左滑動？ 任何幫助，將不勝感激。
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>
首先，您需要隱藏菜單。
然后，您可以使用slideToggle()獲得此結果。
或者，如果您要切換課程，則可以使用max-height動畫，范圍從max-height:0到max-height:100vh
見下文
$(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>
您可以使用transform屬性來轉換元素，並在click事件中切換該屬性...。
https://jsfiddle.net/RACCH/eu3sht2m/
$(document).ready(function() {
$('.nav-icon').on('click', function(e) {
e.preventDefault();
$('.menu').toggleClass('slide-left');
});
});
的CSS
.slide-left{
transform: translateX(-100%);
}
您甚至可以在各個方向上進行翻譯。
.slide-left{
transform: translateX(100%);
}
.slide-left{
transform: translateY(-100%);
}
.slide-left{
transform: translateY(100%);
}
要從關閉位置打開它，請將默認狀態設置為初始...
.menu {
....
transform: translateX(-100%);
}
.slide-left{
transform: translateX(0%);
}
如何制作響應式菜單，寬度調整后變成滑出式菜單
[英]How to make a responsive menu, which on width adjustment turns into a slide out menu
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.