CODEWITHSUNDEEP
javascripthtmlcss
user6335248
user6335248

Reputation:

Transition effect - Trying to create the simplest slideout nav

Thanks in advance for your support... I am trying to make a simple slide out navigation

So without any experience in javascript and after 2 days trying to find a SIMPLE solution for a slideout nav I was only able to come across some scripts that were to big… some were 20kb or more or two complicated to implement.

I believe that simplicity is the ultimate sophistication and I knew there should be a better way so after many hours trying... I was able to come up with this solution witch I got from different sources.

<script>
var slider = document.querySelector('.slider');
var overlay = document.querySelector('.overlay');

function openSlide() {
if (slider.classList.contains('closed')) {
  slider.classList.remove('closed');
  slider.classList.add('open');
  overlay.classList.remove('no-display');
} else {
  slider.classList.remove('open');
  slider.classList.add('closed');
  overlay.classList.add('no-display');
}
}

function closeSlide() {
slider.classList.remove('open');
slider.classList.add('closed');
overlay.classList.add('no-display');
}

</script>

My questions are...

How can I improve my code? (without making it to complicated to understand- at least for me)

Is there a way to use a transition effect in the Visibility Property in .overlay from "none" to "block" ?

You can see see an example here...

https://jsfiddle.net/8na6t0dg/2/

Thank you for the help.

Upvotes: 0

Views: 82

Answers (3)

JonSG
JonSG

Reputation: 13067

I've tried to make this as simple as I could for you. This strategy uses css transforms to show and hide the slideout.

// --------------------------
// Initialize the slideout and return a function that when called
// toggles the slideout
// --------------------------
var toggleSlideShow = (function(slideOutId) {
  var mySlideOut = document.getElementById(slideOutId);

  // --------------------------
  // utility to toggle the required classes to animate the slideout
  // --------------------------
  var _toggle = function() {
    mySlideOut.querySelector(".mainOverlay").classList.toggle("slideOutShow");
    mySlideOut.querySelector(".slideOutContainer").classList.toggle("slideOutShow");
  };
  // --------------------------

  // --------------------------
  // add handler to close slideout on overlay click
  // --------------------------
  mySlideOut.querySelector(".mainOverlay").addEventListener("click", function() {
    if (this.classList.contains("slideOutShow")) { _toggle(); }
  });
  // --------------------------

  return _toggle;

})("slideOut1");
// --------------------------


// --------------------------
// add handler to toggle slideout on button click
// --------------------------
document.getElementById("slideToggler").addEventListener("click", function() {
  toggleSlideShow();
});
// --------------------------
.mainContainer {
  margin: 1em;
  background-image: url("https://s-media-cache-ak0.pinimg.com/736x/05/84/44/058444b369252478964babaf2361fb15.jpg");
  background-size: cover;

  /* important styles */
  position: relative;
  overflow: hidden;
}

.mainOverlay {
  min-height: 500px;
  background-color: #000;

  /* important styles */
  opacity: 0;
  transition: opacity .5s ease;
}

.slideOutContainer {
  position: absolute;
  top: 1em;
  width: 200px;
  min-height: 50px;
  background-color: aliceblue;
  transition: transform .5s ease;
  transform: translateX(-200px);
}

.slideOutContainer.slideOutShow { transform: translateX(0px); }
.mainOverlay.slideOutShow { opacity: 0.5; }
<button id="slideToggler">toggle</button>

<div id="slideOut1" class="mainContainer">
  <div class="mainOverlay"></div>
  <div class="slideOutContainer">
    <div style="text-align: center;">contents of slide</div>
  </div>
</div>

Upvotes: 0

sospedra
sospedra

Reputation: 14724

For me, the best approach for the slideout nav menu is to place it off the screen. Like this: enter image description here

These are the things that you need to keep in mind:

  1. Place the sidemenu off the screen
  2. Use absolute position (or fixed, depending on your requirements)
  3. transition the left css property.
  4. Use javascript only for toggle the class or css rule that change the left property.

Here's a very simple demo: http://codepen.io/sospedra/pen/ezNWgW

Upvotes: 0

Ardeshir Valipoor
Ardeshir Valipoor

Reputation: 106

If you had only toggle slide button then you could just use this code:

var slider = document.querySelector('.slider');
var overlay = document.querySelector('.overlay');
var opened = false;

function toggleSlide() {
if (!opened) {
    slider.classList.remove('closed');
    slider.classList.add('open');
    overlay.classList.remove('no-display');
  } else {
    slider.classList.remove('open');
    slider.classList.add('closed');
    overlay.classList.add('no-display');
  }
  opened = !opened;
}

And there is no way to use transition on this property. Changing the opacity immediately after a timeout is a good solution:

overlay.classList.add('no-display');
setTimeout(function(){
   overlay.style.opacity = '1';
},0);

Upvotes: 0

Related Questions