Highlighted

Slide in and out navigation

Participant ,
Nov 22, 2018

Copy link to clipboard

Copied

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​]

Views

525

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Slide in and out navigation

Participant ,
Nov 22, 2018

Copy link to clipboard

Copied

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​]

Views

526

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Nov 22, 2018 0
Adobe Community Professional ,
Nov 22, 2018

Copy link to clipboard

Copied

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


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 22, 2018 0
Participant ,
Nov 23, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 23, 2018 0
LEGEND ,
Nov 23, 2018

Copy link to clipboard

Copied

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 23, 2018 0
Participant ,
Nov 23, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 23, 2018 0
osgood_ LATEST
LEGEND ,
Nov 23, 2018

Copy link to clipboard

Copied

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 23, 2018 1