Slide in and out navigation

[Legacys7]

Good evening. Is it possible to do a slide in and out nav bar that resides on the top? I want to have this feature work where my photography content will sit, where the bar moves out of site, when the viewer views the work.

[Moderator edit: the related site is MICHAEL GUYDON PHOTOGRAPHY​]

[BenPleysier]

Is this what you are looking for https://www.jasny.net/bootstrap/examples/navmenu-reveal/?

[Legacys7]

Yes. But the nav bar at the top achieving the same function. Is that possible?

[osgood_]

Yes.

At the beginning of your page you have an empty 'container' div which is serving no purpose so use it to insert an icon to open the top menu. I've just used some text and given the div a new class of 'show-nav': (you can use a font-awesome icon or the Bootstrap hamburger icon)

<div class="show-nav">MENU</div>

Add these css selectors to your css styles:

.show-nav {

text-align: right;

padding: 20px 60px;

}

.navbar {

transform: translateX(100%);

transition: all 600ms ease;

}

.slide_nav {

transform: translateX(0);

}

Then add the jQuery below AFTER the link to:

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

  <script src="http://michaelguydonphotography.com/js/jquery-3.2.1.min.js"></script>

<script>

$(document).ready(function(){

$('.show-nav').css('cursor' , 'pointer').click(function(){

$('.navbar').addClass('slide_nav');

});

});

</script>

[Legacys7]

Thanks for the reply, suggestion and finding that error. The nav bar function is going to be on the portfolio page, where the nav moves out of the way to put my images in full view. I'll get rid of the div on the home page.

[osgood_]

Legacys7  wrote

Thanks for the reply, suggestion and finding that error. The nav bar function is going to be on the portfolio page, where the nav moves out of the way to put my images in full view. I'll get rid of the div on the home page.

If you want the navigation to slide out again on the click of an icon you will have to include an icon in the navbar container for the particular pages where you need the slide in slide out effect.

So for instance if you gave that icon a class of 'close-nav' you would add that to the jQuery script:

<script>

$(document).ready(function(){

$('.show-nav').css('cursor' , 'pointer').click(function(){

$('.navbar').addClass('slide_nav');

});

$('.close-nav').css('cursor' , 'pointer').click(function(){

$('.navbar').removeClass('slide_nav');

});

});

</script>