-1

Hi I haven't wrote my own custom Java script before so I need some help.

I have a div with the class "bt-menu" and then a navigation menu in nav tags.

I need a script that slides the contents of the nav in from the left when the div is clicked. And then the nav to slide back into the left when the div or anywhere else on the screen is pressed.

Hope someone can help, thanks

Andeb-autos
  • 47
  • 5

1 Answers1

1

There's no need for fancy jQuery or even JavaScript here, the CSS adjacent sibling selector and tabindex can do this for us:

div{
  background-color:red;
}
nav{
  position:absolute;
  left:-100%;
  transition:left 0.2s ease-in-out;
}
div:focus + nav{
  left:0;
}
<div tabindex="0">
  <p>Click in this div</p>
</div>
<nav>
  <a>Page1</a>
  <a>Page2</a>
  <a>Page3</a>
  <a>Page4</a>
  <a>Page5</a>
</nav>

However this relies on div being defined before nav in the code.

jaunt
  • 4,978
  • 4
  • 33
  • 54
  • This didn't work, take a look at my new question for the code I currently have :D http://stackoverflow.com/questions/32936516/how-do-i-make-nav-slide-in-on-click-of-div – Andeb-autos Oct 04 '15 at 17:53