How do I make contents of nav appear when a div is clicked?

Question

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

Could you post your HTML code you have? – divy3993 Oct 04 '15 at 16:36 — divy3993, Oct 04 '15 at 16:36

score 1 · Answer 1 · answered Oct 04 '15 at 16:26

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.

answered Oct 04 '15 at 16:26

jaunt

4,900
4
31
52

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

score 0 · Answer 2 · answered Oct 04 '15 at 16:36

0

You can use jquery plugin, try search on google here's the keyword :

jQuery side menu Plugins

Or check this link : Lightweight Sliding Sidebar Menu Plugin with jQuery - Tuxedo Menu

answered Oct 04 '15 at 16:36

muzazu

108
6

How do I make contents of nav appear when a div is clicked?

2 Answers2