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

Javascript + jQuery
Log in to reply
  • C

    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



    refresh page if you can't see the codepen above

    0
  • 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?

    0
  • C

    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



    refresh page if you can't see the codepen above

    0
  • C

    And this is for the onhover-function


    refresh page if you can't see the codepen above

    0
  • 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.

    0