Responsive Slide Navigation with CSS only

Checkbox state detection + media queries + CSS animation – JavaScript = Slide Nav. On desktop it looks like normal horizontal navigation, but on mobile devices it is transformed into a sliding navigation like in the Facebook mobile app.

• 

• 

• 

Toggle full screen

Close modal window

Previous

Next

Check out the Live Demo.

Download Slide Nav.

Room for improvement: automatic width, gestures.