How to make my Responsive Menu slide in?

Question

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/

 $(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>

Answer 1

First, you need to hide your menu.

Then you can use slideToggle() to achieve this result.

Or if you want to toggle a class, you can use max-height animation, from max-height:0 to 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>

Answer 2

You can use a transform property to translate the element, and toggle this property in the click event ....

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%);
}

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/

How to make my Responsive Menu slide in?

Question

2 answers

solution1
1 2018-03-19 13:09:53

solution2
1 ACCPTED 2018-03-19 13:12:05

How to make my Responsive Menu slide in?

Question

2 answers

solution1 1 2018-03-19 13:09:53

solution2 1 ACCPTED 2018-03-19 13:12:05

solution1
1 2018-03-19 13:09:53

solution2
1 ACCPTED 2018-03-19 13:12:05