How to make a resposive bottom-up slider, that also works as a nav-bar
-
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
-
Hey @cthornval
I am still a little confused on what you are trying to do. Do you mind explaining it in even simpler terms?
-
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
-
And this is for the onhover-function
https://codepen.io/cthornval/pen/LYpdYPR
-
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.
