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.
Related
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
I have created a small tooltip test using a div with an input and p. However, when I try and increase the opacity so that the tooltip effectively fades in and out, something seems to go wrong. I've tried this on Firefox & Chrome so far and can't figure out what the problem is.
FIDDLE:
http://jsfiddle.net/2vsts8fv/
That's because of the display: none property, which applies immediately.
As an alternative, you can use visibility to hide your item, which also plays along well with transitions:
p.tip {
display: inline;
visibility: hidden;
transition: opacity 1s, visibility 1s;
}
div.tooltip:hover > p.tip {
visibility: visible;
opacity: 1;
}
JSFiddle
That is because you are using display: none. Try visibility: hidden and give a better position through CSS.
I have read a couple of tutorials online, but I can't seem to get a cross-browser working example together.
HTML:
<div ng-include="show ? 'views/registration/form_activation.html' : null" ng-animate class="drop-down"></div>
CSS:
/* ANIMATIONS */
.drop-down {
-webkit-transition: all linear 1s;
-moz-transition: all linear 1s;
-ms-transition: all linear 1s;
-o-transition: all linear 1s;
transition: all linear 1s;
line-height: 100%;
}
.drop-down.ng-enter,
.drop-down.ng-leave-active {
opacity: 0;
max-height: 0px;
}
.drop-down.ng-enter-active,
.drop-down.ng-leave {
opacity: 1;
max-height: 100%;
}
What I would like to accomplish is that when the template is loaded with ng-include, it fades in from 0 to 100 opacity, and that it simultaneously opens like a dropdown (starting from 0, to full height that it needs). And vice versa when the form gets hidden.
The opacity already works, but changing the height does not, the div instantly appears with full height. Can some help me build the CSS with a cross-browser solution?
you have to define max-height in px in .drop-down class to make it work.
you can put any high value to max-height in px as you are anyways not defining the height.
also define overflow: hidden in .drop-down so that content is hidden on transition of height.
worked for me.
example demo here :- http://plnkr.co/edit/rXQQHTogKzAG91xw3JUx?p=preview
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;
I have to make a responsive website and as i shrink the browser to a specified size, i want the logo on the left to move to the right so that it is in the centre.
Here's an example of the transition i want to achieve. It is under "2.Animating your transitions" box1
I know that the transition starts on hover but is it possible to activate it when the browser is resized? or any alternative methods at all?
You can do this by using a mixture of CSS3 transitions and the #media queries.
div
{
height: 100px;
width: 200px;
position: relative;
background-color: #eee;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#media all and (min-width: 400px) {
div
{
background-color: #fc3;
left: 100px;
}
}
What this does is sets up the transitions on the element with relative position but obviously does not fire them (as there's no :hover or other selector) and declares a change in position (left: 100px;) when the browser is more than 400px wide. Use max-width for a "more than" value.
Obviously you need to change the values to what you need, but this is how it should be done.
http://jsfiddle.net/AvhvD/
Here is how i would do:
1: .logo { display block, width: xxx; margin 0 auto; transition: margin ... }
2: #media (...) {
.logo {
margin-left: 0;
}
}
I was thinking that you could make a conditional statement in JavaScript and Jquery that would test the following to be true: If the browser window is resized and the size of the browser window is between a range, add a css class. If not remove the css class.
With this new class created, maybe you can make an animation using CSS3. I am not too familiar if this would work, but you could always just revert back to JQuery.
Furthermore, I don't know if transitions can be applied inside of media queries. If so, I am a big proponent and would highly recommend using them.
Hope I could help.