0

I am working on a web page with a navigation bar along the top, consisting of an <ul> element holding inline <li> elements. I'd like to designate two of these list items to "slide out" when clicked, revealing additional list items.

Right now, I'm doing this by including the additional items as <li> elements which are hidden at page load. A click event bound to the two list items toggles the visibility of those additional elements. This solution works fine, but I'd like to make things pop a little more and have these additional list items slide in and out of the list horizontally, like a drawer.

I read into the transition CSS property, but it seems like they're tied to specific CSS properties - which would mean that a sliding animation would require a change in position, which I'm technically not doing right now. Is that correct, or is there a trick I can use to get that sliding animation?

Thank you!

Argus9
  • 1,863
  • 4
  • 26
  • 40
  • 3
    Any code to work with ? Maybe CSS ? What is wrong exactly ? – Pogrindis Apr 25 '16 at 16:01
  • 1
    You can't `transition` the CSS `display` property. You'll need to use javascript/jquery. – Scott Apr 25 '16 at 16:06
  • Sounds like you'll need to change the position or margin of your li. – tsg Apr 25 '16 at 16:08
  • You might want to look into `overflow` and `transform: translate` to accomplish this. The `translate` is much better than the position or margin animation, and it doesn't _technically_ move your element, just _visually_. – somethinghere Apr 25 '16 at 16:08
  • Thanks - I think jQuery's toggle() or show()/hide() functions should give me what I need. – Argus9 Apr 25 '16 at 16:43

1 Answers1

1

You could animate those li items through CSS when they have a certain class, which you would add to the element after the buttons were clicked, like this:

CSS:

/* default behavior */
li li {
  position: relative;
  left: -10px;
  opacity: 0;

  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

/* slide out */
li.active {
  opacity: 1;
  left: 0;
}

JS:

$(document).ready(function(){
    $(".button").on("click", function(e){
        $(e.target).find("li").toggleClass("active");
    })
});

Demo https://jsfiddle.net/0vy8emam/7/

Ozrix
  • 3,489
  • 2
  • 17
  • 27