I'm trying to make my navigation transition the width from 0% to 20% when you click the 'hamburger' icon. It works when I open the navigation, but not when I close it.
Here is some of the CSS
.nav-toggle.active + nav {
width: 20%;
transition: all 500ms ease-in-out;
visibility:visible;
}
nav {
height: 2em;
width: 0%;
line-height: 2em;
position: absolute;
left: 5%;
top: 4.5%;
background: rgba(144, 198, 149, 1);
border-radius: 5px;
text-align: center;
visibility: hidden;
}
I've also tried the same thing without the 'visibility' property.
Here is the http://codepen.io/anon/pen/wawRYX with the hamburger icon, for more of a visual.
nav only transitioned when it had the class .active, when you removed the class, you removed the transition. <nav> must have a transition in its style:
nav {
height: 2em;
width: 0%;
line-height: 2em;
position: absolute;
left: 5%;
top: 4.5%;
background: rgba(144, 198, 149, 1);
border-radius: 5px;
text-align: center;
visibility: hidden;
transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-webkit-transition: all 500ms ease-in-out;
}
JSFiddle Demo
The reason why it was only transitioning when .active class was applied was because you only had the transition applied to the nav and nav bar when .active was applied. Add the transition property to both nav and the nav bar so that the transition will happen with and without the .active class.
Here is an updated codepen.
Related
I made a div with 2 elements inside: an image and an another div (about). The image is hiding the about div.
Is that possible to make elements which are in the about div clickable when the image disappear with a hover property ?
Thanks in advance !
Also, here's my code but the elements aren't clickable
#logo {
opacity: 1;
visibility: visible;
margin-top: 12.5px;
-webkit-transition: opacity 600ms, visibility 600ms;
-o-transition: opacity 600ms, visibility 600ms;
-moz-transition: opacity 600ms, visibility 600ms;
transition: opacity 600ms, visibility 600ms;
}
.blue_border:hover #logo {
opacity: 0;
visibility: hidden;
}
.blue_border {
width: 625px;
height: 625px;
background-image: url("./border.png");
background-repeat: no-repeat;
background-position: 50%;
}
#about {
z-index: -1;
position: relative;
margin-top: -605px;
width: 600px;
height: 600px;
border-radius: 100%;
background-color: #25B8EE;
}
<div class="blue_border">
<img id="logo" src="./logo.png" />
<!-- Img is "on" the about div" -->
<div id="about">
I want to be clicked :-(
</div>
<div class="la-ball-scale-multiple">
<div></div>
<div></div>
<div></div>
</div>
</div>
I don't think I understand it completely, but you cannot click under another element but you can use CSS display: none attr or you do this in a fake way. You can listen to the top element for this and check other conditions on javascript.
As mentioned in the comments, you may can use the pointer-events: none on the overlay to cause it to not receive click events, and allow them to pass through.
function whoWasClicked(e) {
console.log(`${e.target.id} was clicked!`);
};
document.querySelector('#lowerElement').addEventListener('click', whoWasClicked);
document.querySelector('#upperElement').addEventListener('click', whoWasClicked);
#lowerElement {
background-color: rgb(128, 128, 128);
min-width: 25vw;
height: 100px;
text-align: center;
position: absolute;
top: 37vh;
left: 37vw;
z-index: 1;
}
#upperElement {
min-width: 25vw;
height: 100px;
text-align: center;
line-height: 50px;
position: absolute;
top: 37vh;
left: 37vw;
z-index: 2;
pointer-events: none;
}
<div id="lowerElement">Click Me</div>
<div id="upperElement">Overlay</div>
With my current code, I think the z-index: -1; in #about is the problem: #blue_border is an image background and it's upper my "about" div... So I'm trying to find a way to replace that background.
Edit:
Okay. I figured out that the element with z-index: -1; will never be clickable the way I want to.
So I decided to reverse everything: the logo has now the property z-index: -1; and the about div (which is upper now) is hidden until the hover trigger. I also changed my background image by a border.
My code now :
/*Under #about and visible*/
#logo {
z-index: -1;
}
.blue_border {
width: 600px;
height: 600px;
border: 15px solid #71d1f4;
border-radius: 100%;
/*background-image: url("./border.png");
background-repeat: no-repeat;*/
background-position: 50%;
}
/*Hidden first*/
#about {
opacity: 0;
visibility: hidden;
position: relative;
margin-top: -605px;
width: 600px;
height: 600px;
border-radius: 100%;
background-color: #25B8EE;
-webkit-transition: opacity 600ms, visibility 600ms;
-o-transition: opacity 600ms, visibility 600ms;
-moz-transition: opacity 600ms, visibility 600ms;
transition: opacity 600ms, visibility 600ms;
}
/*Unhidden on hover*/
.blue_border:hover #about
{
opacity: 1;
visibility: visible;
}
I didn't changed my html
Thanks anyway guys. It was my very first question and I'm glad that some of you already answered me !
I am using react-router-dom node package in my react project to implement routing.
After setting up the router links,I used following custom CSS to hide the link underline by default:
let styles = theme => ({
TextLink: {
position: 'relative',
color: 'white',
textDecoration: 'none',
'&:hover':{
color: 'white',
},
});
using this I was able to hide.
My objective is to make a link that will display underline on hovering with transition effect(Link underline grows from center to both ends).
Modified CSS or Code samples with any additional node packages would be helpful.
The following example is done in pure css.
Basically links in reactjs are a tags, hence u can use the following css
#import url("https://fonts.googleapis.com/css?family=Montserrat:500");
body {
font-family: 'Montserrat', sans-serif;
}
ol,
ul {
list-style: none;
}
li {
display: inline-block;
padding: 20px 0 20px;
}
a {
text-decoration: none;
position: relative;
display: block;
padding: 16px 0;
margin: 0 12px;
font-size: 1.2rem;
text-transform: uppercase;
transition: color 0.1s, background-color 0.1s;
color: #000;
}
a:hover {
color: #4dd0e1;
}
a:focus, a:active {
color: #00bcd4;
}
a::before {
content: '';
display: block;
position: absolute;
top: 100%;
height: 3px;
width: 100%;
background-color: #00bcd4;
-webkit-transform-origin: center top;
transform-origin: center top;
-webkit-transform: scale(0, 1);
transform: scale(0, 1);
transition: color 0.1s, -webkit-transform 0.2s ease-out;
transition: color 0.1s, transform 0.2s ease-out;
transition: color 0.1s, transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
}
a:active::before {
background-color: #00bcd4;
}
a:hover::before,
a:focus::before {
-webkit-transform-origin: center top;
transform-origin: center top;
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
<nav>
<ul>
<li class="">home</li>
<li class="">career</li>
<li class="">projects</li>
<li class="">about us</li>
<li class="">contact us</li>
</ul>
</nav>
If you give the <a> a a display declaration of inline-block, you can then apply to it an ::after pseudo-element. The pseudo-element can be made to behave as a dynamic alternative to the conventional underline.
You can initially position the pseudo-element in the centre (using position: absolute; left: 50%;) and render it invisible by giving it a width of 0.
When the <a> is hovered over, you can update the position of the pseudo-element to left: 0; and give it a width of 100%.
If these two values are animated simultaneously, the pseudo-element will appear to grow outwards from the centre until it becomes a full-width underline.
Working Example:
a {
position: relative;
display: inline-block;
font-size: 16px;
line-height: 24px;
height: 24px;
color: rgb(0, 0, 191);
text-decoration: none;
}
a::after {
content: '';
position: absolute;
display: block;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
border-bottom: 2px solid rgb(255, 0, 0);
}
a, a::after {
transition: all 0.6s linear;
}
a:hover {
color: rgb(255, 0, 0);
}
a:hover::after {
left: 0;
width: 100%;
}
Hover Me
I'm trying to hide the sidebar to a negative right (-205px) so I can get an effect where the content wrapper and sidebar move at the same time.
The problem is that the sidebar is still being shown on the right? I though I could hide it sending it "outside" the web page. I can't simply use display block none and block on the sidebar because it will not make a smooth animation
var rightSidebarOpen = false;
$('#toggle-right-sidebar').click(function () {
if(rightSidebarOpen) {
$('#sidebar-right').css('right', '-205px');
$('.content-wrapper').css('margin-right', "0");
$('.full-page-wrapper').css('margin-right', "0");
}
else {
$('#sidebar-right').css('right', '0');
$('.content-wrapper').css('margin-right', "205px");
$('.full-page-wrapper').css('margin-right', "205px");
}
rightSidebarOpen = !rightSidebarOpen;
});
.content-wrapper {
background: #fff;
min-height: 100vh;
padding: 1rem 1.5rem 4rem;
transition: all .7s ease;
position: relative;
background: black;
}
#sidebar-right {
background: #fafafa;
border-left: 1px solid #e5e5e5;
width: 200px;
height: 100%;
position: absolute;
top: 0;
right: -205px;
overflow-x: hidden;
transition: left 1s ease;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidebar-right" class="visible">
<ul class="sidebarList">
<li>
</li>
</ul>
</div>
<div class="content-wrapper">
<button id="toggle-right-sidebar">CLICK ME</button>
</div>
add overflow-x:hidden to your outer container
You need to transition the right CSS property on the sidebar, because that's the one you're changing.
#sidebar-right {
transition: right 1s ease;
}
Adding correct type of transition with equal time for both #sidebar-right and .content-wrapper would solve your issue. Try this code.
.content-wrapper {
background: #fff;
min-height: 100vh;
padding: 1rem 1.5rem 4rem;
transition: all .7s ease;
position: relative;
background: black;
}
#sidebar-right {
background: #fafafa;
border-left: 1px solid #e5e5e5;
width: 200px;
height: 100%;
position: absolute;
top: 0;
right: -205px;
overflow-x: hidden;
background: red;
transition: all 0.7s ease;
}
#sidebar-right {
transition: all 1s ease;
}
'all' enable to use transition on all property
I am trying to do some transition/transform effect as you can see on this site, where the navigation switches halfway the page and kinda transfers into the other one.
I've created a jsfiddle, with two navs, the .mobilenav is the one that should be changed upon scrolling, and the .desktopnav is the one which slides out as you can see. But now I was wondering how I can make recreate that transition. (The changing nav is done in JQuery with a if, else statement and ($(window).scrollTop() > 500)
I've simulated that nav pretty close in my fiddle, with some simplifications of course: https://jsfiddle.net/pttsky/0anpeLj0/
There are couple of key concepts:
There is actually only one nav to which we add .full class to indicate state change.
There is a container of nav, actual nav and its child li elements
Each of above listed has own CSS transitions and animations that change their positioning, opacity and backgrounds.
Talking deeper on changing nav from collapsed to full-width like on that site.
The container block slightly pulling upwards the nav. It becomes non-transparent, which gives an illusion that border-radius disappeared from the nav, but actually if we'd animated border-radius, that would be ugly.
.nav-container {
display: block;
position: fixed;
width: 100%;
z-index: 2;
top: 0;
padding: 25px 25px 15px;
-webkit-transition: .8s;
transition: .8s;
}
.full {
background: #fff;
padding-top: 15px;
}
The child elements, except MENU link, have max-width: 0 by default. When menu is hovered, or when it is in full-width state, elements have max-width: 200px, and MENU has reversed behaviour:
.nav-main .item {
display: block;
float: left;
max-width: 0;
opacity: 0;
-webkit-transition: .8s;
transition: .8s;
/* limit width */
overflow: hidden;
line-height: 3em;
}
.nav-main .toggle {
max-width: 200px;
opacity: 1;
-webkit-transition: .6s .4s;
transition: .6s .4s;
}
.full .nav-main .item {
max-width: 200px;
opacity: 1;
}
.full .nav-main .item + .item {
margin-left: 12vw;
}
.full .nav-main .toggle {
max-width: 0;
opacity: 0;
-webkit-transition: .1s;
transition: .1s;
}
When changing state, all items of nav seems like fade out then fade in. I've added the appropriate animation to the whole nav:
/* nav full-width */
#keyframes blink {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0;
}
}
.full .nav-main {
animation: blink .8s;
}
Alternatively to Device's answer, you could also use css transitions on one nav to get the same effect, instead of using two navs.
By switching the class on the nav you can trigger the transition and place the navigation in its correct place.
JS:
$(document).ready(function() {
var nav = $('.desktopnav');
$(window).scroll(function() {
var scrolltop = $(window).scrollTop();
if (scrolltop > 500 && !nav.hasClass('scrolled')) {
nav.addClass('scrolled');
}
else if (scrolltop <= 500 && nav.hasClass('scrolled')) {
nav.removeClass('scrolled');
}
});
});
CSS:
.desktopnav {
/* ... snipped, unchanged ... */
transition: all 0.2s ease-out;
}
.desktopnav>ul {
transition: all 0.2s ease-out;
}
.desktopnav>ul>.dropdown {
/* ... snipped, unchanged ... */
transition: all 0.2s ease-out;
}
/* ... snipped unchanged styles for the unscrolled menu ... */
.desktopnav.scrolled {
top: 0px;
right: auto;
left: 0px;
width: 100%;
}
.desktopnav.scrolled>ul {
margin-top:0px;
background: #fff;
}
.desktopnav.scrolled>ul>.dropdown {
border-radius: 0px;
}
.desktopnav.scrolled>ul>.dropdown .dropdown-content {
max-width: 1000px;
float: none;
display: inline-block;
vertical-align: middle;
margin-left: 19px;
}
https://jsfiddle.net/q80k0y7v/1/
I want to create a background gradient line that moves from down to up, back and forth when hovered inside an element, which means its separate.
What is the best way to do this? I've thought about making it hidden or none when not hovered and then making it appear and move when hovering but the problem is that it will mess up the height space in a navbar when it moves.
try this
html
Hover me
css
.elem{
display: block;
position: relative;
font-size: 20px;
font-weight: bold;
padding-left: 15px;
}
.elem:before{
content: "";
width: 8px;
position: absolute;
left: 0;
bottom: 0;
height: 0px;
background:linear-gradient(141deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);
-webkit-transition: all ease-in-out .5s; /* Safari */
-webkit-transition-timing-function:all ease-in-out .5s; /* Safari */
transition:all ease-in-out .5s;
}
.elem:hover:before{
height: 100%;
}