CODEWITHSUNDEEP
javascriptjqueryhtmlcss
KirbStarRulz
KirbStarRulz

Reputation: 83

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/

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

Upvotes: 0

Views: 39

Answers (2)

Renzo Calla
Renzo Calla

Reputation: 7706

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/

Upvotes: 1

Mihai T
Mihai T

Reputation: 17697

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>

Upvotes: 1

Related Questions