0

I'm trying to make a page slide out from outside of the screen by using a css3 transition. I'm able to get the page on the screen but I cannot get it to slide out when I click on the respective button(s).

The transition in my css file:

#about {
  background: #262626;
  opacity: 0.75;
  filter: alpha(opacity=75);
  width: 100%;
  height: 364px;
  position: -99999px left;
}

#about:target {
  position: +99999px left;
  width: 10%;
  height: 10%;
}

The button(s) in my html file: (Just working on the About me page at the moment)

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav navbar-right">
    <li class="hidden">
      <a href="#page-top"></a>
    </li>
    <li class="page-scroll">
      <a href="#portfolio">Home</a>
    </li>
    <li class="page-scroll">
      <a href="#about">About me</a>
    </li>
    <li class="page-scroll">
      <a href="#media">Media</a>
    </li>
  </ul>
</div>
Cohars
  • 3,822
  • 1
  • 29
  • 50
Demetrius Berkeley
  • 5
  • 3
  • Please add some of your code in the question. Also, consider opening a [JS fiddle](https://jsfiddle.net) with the relevant parts of your code. – Cohars Mar 13 '16 at 17:57
  • Please click on the link it will show you everything i'm working with. – Demetrius Berkeley Mar 13 '16 at 17:58
  • We can't work with picture. – Cohars Mar 13 '16 at 17:59
  • If you want people to spend time helping you. Please take time to ask a good question, so it will be easier to give you a good and helpful answer. – Cohars Mar 13 '16 at 18:00
  • I doesn't seem fixed to me. You really should add the code as text in the question. I maybe add some code concerning the transition. – Cohars Mar 13 '16 at 18:13
  • Sorry about that I'm pretty new around here. I changed it once more, this should help hopefully. – Demetrius Berkeley Mar 13 '16 at 18:15
  • Yes I can see that you are new, don't worry, with time you will understand what is a good question and how to get a good and helpful answer quickly. Right now, I don't think it can be achieved with only CSS. Still, i'm not 100% certain to understand the question. – Cohars Mar 13 '16 at 18:25

1 Answers1

0

Have you seen this post? It seems to be the same question, plus, it has a working demo.

And it works with only CSS with transform and transition.

Cohars
  • 3,822
  • 1
  • 29
  • 50