How to make a resposive bottom-up slider, that also works as a nav-bar

[cthornval]

0

Right now I am working on creating bottom-up slider, very much like this one https://tatianabilbao.com (actually precisely like this one), that upon loading the page has static height and display project description, when a project is hovered, but however without changing.

But when a project is clicked, I wish for the nav-bar (currently a div), to slide up, to take up 75% of the screens height, then finally when the user click outside of the open slider, it once again shrinks to "normal".

Finally I also wish to make the slider/nav-bar responsive, so that it's appropriate for smartphones etc.

Right now, my slider is simply a div, with columns, and where information is displayed with a toggle-effect. When the word "About" is hovered, the div expands, but without transition-time or animation-effect, which I have tried to tweek. First I thought to create a new toggle effect upon clicking a project, so that the div would expand/slide upwards. But thinking of all of things I'd like it to do, that seems like a short-sighted solution.

I have tried finding the code for this kind of slider, but I find it really hard. So maybe someone knew of something, or have done it before

https://codepen.io/cthornval/pen/dyYJJKy

[avan]

Hey @cthornval

I am still a little confused on what you are trying to do. Do you mind explaining it in even simpler terms?

[cthornval]

Hey Avan

Thanks for responding. I’ve continued to liddle around with the code. I wish to create a bottom nav-bar, with a slide-up effect like the one on this website https://tatianabilbao.com - when an item on the page is hovered, a project description is displayed in the nav-bar and when it is clicked i slides up.

At this point in time I have managed to create the hover effect, that and the click/slide up effect. However I have a hard time combining them in the same code.

At this point, in my html-sheet the nav-bar is a div <div class="slider”>, styled in a css grid, with four columns. In the html sheet each column is indicated with a div class <div class="targetDiv" style="display: none;">
So at this point when “About” is clicked, the nav-bar slides up and displays a curriculum vitae, set in four coulmns.

Howvever, when I try to include and over the on-hover divs in the slider “section” and connect them to an external javascript file, the slider effect freezes.

So at this point in time I need a way to display content in the nav-bar when it is not “activated” thorugh click/slide up - bascially a way of combining both codes. I am maybe suspecting some javascript code, but I haven’t been able to detect exactly which one.

I am going to post the code for both the “hover”-code and the “slide-up” code

This is for the Slide-up function

https://codepen.io/cthornval/pen/zYvWOJg

[cthornval]

And this is for the onhover-function
https://codepen.io/cthornval/pen/LYpdYPR

[avan]

Hey @cthornval

I am sorry but I am afraid it's still confusing. Both snippets show a bottom-up slider . If you still need help I would recommend trying a screen recoding and then uploading it. It would have to be short though since the file limit is 50 MB I think. That way you can show me instead of trying to describe it. Just an idea.