Jump to content

ben03

Recommended Posts

Hi there,

  I am trying to build an expanding sidebar menu that is absolute positioned to the left of the screen and spans top to bottom.

I don't want to be using fixed position, as the sidebar would have elements that would be hidden beneath the fold on mobile landscape that wouldn't be accessible. So it needs to scroll with the page content.

However when using absolute positioning, the container finishes wherever the bottom of the browser is, and is simply cut off there, which looks bad if the rest of the screen content requires scrolling.

What I am using:

.expanded-menu, .collapsed-menu {
    position: absolute;
    overflow: hidden;
    background-color:$dark-blue;
    top: 0px;
    left: 0px;
    bottom: 0px;
    z-index: 5;
    @include transition (all 0.5s ease-in-out);
}

.collapsed-menu {
    width: 50px;
}

.expanded-menu {
    width: 170px;
}

Am not sure if this is asking the impossible, or whether the answer is staring me in the face and I've looked too long at it. Help appreciated here :)

Thanks

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...