I have created a simple slide out menu from the left of a page by simply applying a CSS Transition to a div. The div has the following CSS class:
#slidingBox {
position: absolute;
width: 400px;
height: 100%;
background-color: #d9dada;
top: 0px;
left: 0px;
margin-left: -390px;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
overflow-y: scroll;
}
#slidingBox:hover {
margin-left: 0px;
}
and it works okay. I have 10px of the menu on the side that when I hover over it the whole panel becomes viewable. However, as soon as I move my mouse off the DIV it scutters back into hidding... Fair enough, thats how this hover over transition works I guess. I would however like to put a little pin button in the corner I can click which will then keep the menu visible. Also, the menu currently appears 'over' the page on screen - when 'pinned' I would also like the page underneath to resize so it is all viewable next to the pinned menu.
I could sit and play around with it for a bit but time is off the escence and if someone could point me in the right direction would be a great help!
I understand there are many different/better ways of doing what I have already done here so any other pointers would be a great help.
You could use jQuery to detect when the pin button is clicked and remove a class from #slidingBox to keep it expanded:
$('#pin-menu-button').click(function() {
$('#slidingBox').toggleClass('no-pin');
});
The .no-pin class is what gives the sidebar menu the negative left margin.
To make the pinned menu and content display side-by-side you could use flexbox styling. Make sure you set display:flex; for the container around the sidebar and main content area.
Here is a fiddle
Related
CSS transition property is only working in one direction on <details> tag -- when opening. No transition when closing. I've tested on Chrome & Firefox.
To add, on Chrome, the opening transition only works once.
details
position: relative
ul
position: absolute
bottom: 100%
left: 0
height: 300px
display: flex
flex-direction: column
transition: transform 0.3s ease-in-out
transform-origin: bottom
transform: scaleY(0)
&[open]
ul
transform: scaleY(1)
The details tag works by instantly showing and hiding its contents. When you close it, the contents immediately disappear so no transition is witnessed.
I have a problem regarding CSS3's transitioning. As seen in the snippet of my CSS file below, I have made a footer slide up whenever it is toggled active (I do this using jQuery).
Whenever it becomes active, it pushes the content of the website upwards until it finishes its transition, at which point the content slides back down. It looks like the page expands, but this should not happen because of the position attribute. Why is this happening?
Thanks in advance for any help.
.footer {
height: 130px;
width: 100%;
position: absolute;
bottom: -130px;
background-color: #333;
transition: bottom 250ms ease-out;
}
.footer-active {
bottom: 0;
}
I found a solution to the problem. It seems whenever the element moves, the window will automatically scroll to the element's position. I fixed the problem by inserting overflow: hidden into the html's and body's CSS rule.
Steps to show this issue.
Go to this page of the website;
http://chartwell.com/careers/your-career-at-chartwell
shrink your browser window down to mobile size. Close the menu with the icon. The animation finishes then the nav items appear again.
I have been having a lot of issues trying to fix this issue using the CSS here that I found in another answer;
.navbar-collapse.collapsing {
-webkit-transition: height 0.01s;
-moz-transition: height 0.01s;
-ms-transition: height 0.01s;
-o-transition: height 0.01s;
transition: height 0.01s;
}
But I can’t seem to figure out how to get it to go away.
Is there a way to make it go off screen after the animation?
My JS skills are not great.
You have a problem in "skin.css". Just open it and comment out or remove (display: block) in the following code, as shown below:
.container > .navbar-header, .container > .navbar-collapse {
/* display: block; */
width: 100%;
float: none;
}
add this
.navbar-collapse.collapsing .navbar-nav {
display:none;
}
to your css
I figured out a hack-y fix that I will be using for the time being. Going to close this for now.
Using css animation I have an object that moves from the left to the right of the screen. However I've noticed that the animation is actually continuing after it has exited the right of the screen, which causes Chrome horizontal scroll bars to appear.
If you scroll right, it just shows the animated object no longer moving and a white background screen.
How do I kill the animation as soon as it leaves the view able screen?
The actual animation can be seen here. http://crea8tion.com/ChristmasMessage/index.html
The CSS code for the object is
.santa {
width: 1000px;
position: absolute;
top: -14%;
left: -55%;
-webkit-animation: santa-move 1s 1s ease-out forwards;
-webkit-animation-delay:5s;animation-delay:5s;
-webkit-animation-duration: 25s;
}
#-webkit-keyframes santa-move {
100% { left: 100%;}
}
There is a simple way to remove this extra scrollbar.
You can add a simple overlay: hidden to the parent div. In your case:
.columns {
overflow: hidden;
}
In this case, the santa animation didn't anymore add the horizontal scrollbar.
I am trying to create a menu that fades in/out when a button is clicked, and I am trying to do the animation using CSS transitions.
Here is a sample of what I want to achieve
#menu{
background: red;
display: block;
overflow: hidden;
position: absolute;
width: 182px;
top: 1em;
padding: 0;
height: auto;
opacity: 0;
/* The menu must not be clickable/cover the UI once hidden */
left: -100000px;
/*
The left property must change after the
opacity is zero and before it starts to
increase
*/
transition: opacity 0.25s 0.1s, left 0s; /* ??? */
-webkit-transition: opacity 0.25s 0.1, left 0s; /* Safari */
}
#menu.open{
opacity: 1;
left: auto;
}
http://jsfiddle.net/AzKAk/5/
Of course that only works half way, when the menu appears it DOES fade in, but when it has to fade out, this must happen after the element has its proper position.
Is it possible to do such thing using only CSS3?
I am assuming your intention is to have the menu appear/disappear in-place without any movement.
To do that you actually have to use a combination of two properties: opacity, and display.
The change in opacity will make the menu disappear, but once it reaches opacity:0 it will be invisible but still exist and receive user interaction.
So, you have to make sure that after the opacity transition is done, you have to change the display to none.
You can do this using the transitionend event (webkitTransitionEnd on Chome/Safari).
Your code would look something like this: http://jsfiddle.net/daniran/GfbVV/
I'm using jQuery in the example, but you can just as easily register the listeners directly using ontransitionend property;