Navigation

    ask avan logo
    • Register
    • Login
    • Search
    • Categories
    • Unsolved
    • Solved

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

    Javascript + jQuery
    2
    5
    25
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • C
      cthornval last edited by avan

      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

      Reply Quote 0
        1 Reply Last reply

      • avan
        avan last edited by

        Hey @cthornval

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

        Reply Quote 0
          1 Reply Last reply

        • C
          cthornval last edited by 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

          Reply Quote 0
            1 Reply Last reply

          • C
            cthornval last edited by

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

            Reply Quote 0
              1 Reply Last reply

            • avan
              avan last edited by

              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.

              Reply Quote 0
                1 Reply Last reply

              • First post
                Last post