CODEWITHSUNDEEP
javascriptjqueryhtmlcss
psajtik
psajtik

Reputation: 45

How to make menu slide from Viewport to the Header

I am learning (just began) jQuery and now I want to make a menu like on this site

I mean, I want the menu to slide down out of the viewport to the header, just like in template in the link.

I tried to look at jQuery API documentation, some videos on YT about menus etc, but I did not find anything relevant.

Can anyone please learn me, how to do this?

Thank you very much

PS: I just have this: 

@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700');
* {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Source Sans Pro', sans-serif;
  box-sizing: border-box;
  background-color: #4E4F53;
  font-weight: 400;
}

.container {
  max-width: 980px;
  margin: auto;
}

header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #2d2d2d;
  padding: 20px 0;
}

.logo {
  float: left;
}

ul {
  position: relative;
  float: right;
  margin: 5px;
  display: flex;
  flex-direction: row;
}

ul.active {}

ul li {
  list-style: none;
}

ul li a {
  color: #FFF;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0 1.25em;
  display: block;
  font-size: 1em;
}

.menu-toggle {
  margin: 0 1em;
  color: #fff;
  font-size: 1.5em;
  float: right;
  cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>RISE</title>

  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

</head>

<body>
  <header>
    <div class="container">
      <div class="logo">
        <img src="img/logo.png" alt="logo">
      </div>
      <div class="menu-toggle">
        <i class="fas fa-bars"></i>
      </div>
      <ul class="menu">
        <li><a href="#" class="">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
  </header>
  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $(".menu-toggle").click(function() {
        $(".menu").toggle();
      });
    });
  </script>
</body>

</html>

Upvotes: 1

Views: 48

Answers (2)

Luke Shinn
Luke Shinn

Reputation: 346

Use translateY(); css class and jQuery to toggle classes.

This code snippet should get you where you need to be! It will need a bit of editing to fit your needs.

I've added a div called .offsite-canvas that houses your "offscreen" container. When you press the menu toggle button, jQuery toggles a class that puts the offscreen container in view for the user.

$( ".menu-toggle" ).click(function() {
    $(".offsite-canvas").toggleClass("open");
});
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700');
* {
  margin: 0;
  padding: 0;
}

.offsite-canvas {
position: relative;
transform: translateY(-400px);
transition: all .5s;
z-index: 100;
}

.offsite-canvas.open {
position: relative;
transform: translateY(0);
}

body {
  font-family: 'Source Sans Pro', sans-serif;
  box-sizing: border-box;
  background-color: #4E4F53;
  font-weight: 400;
}

.container {
  max-width: 980px;
  margin: auto;
}

header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #2d2d2d;
  padding: 20px 0;
}

.logo {
  float: left;
}

ul {
  position: relative;
  float: right;
  margin: 5px;
  display: flex;
  flex-direction: row;
}

ul.offcanvas {
display: flex;
float: none;
z-index: 100;
}

ul.active {}

ul li {
  list-style: none;
}

ul li a {
  color: #FFF;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0 1.25em;
  display: block;
  font-size: 1em;
}

.menu-toggle {
  margin: 0 1em;
  color: #fff;
  font-size: 1.5em;
  float: right;
  cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>RISE</title>

  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

</head>

<body>

<div class="offsite-canvas">
      <ul class="offcanvas">
        <li><a href="#" class="">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
</div>

  <header>
    <div class="container">
      <div class="logo">
        <img src="img/logo.png" alt="logo">
      </div>
      <div class="menu-toggle">
        <i class="fas fa-bars"></i>
      </div>
      <ul class="menu">
        <li><a href="#" class="">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
  </header>
  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $(".menu-toggle").click(function() {
        $(".menu").toggle();
      });
    });
  </script>
</body>

</html>

Upvotes: 1

M.A.Williams
M.A.Williams

Reputation: 243

I would suggest if you want to make a nav menu that comes onto the screen when a button is clicked, create the menus as normal, and then place it off the screen on either the left or the right by using translateX() in css.

From that point on, when the button is clicked, Toggle a class that would translate the menu one the x axis so that it is visible.

Upvotes: 0

Related Questions