I have the following CSS and want to slow the displayLnone attribute when it goes off hover but the transitions don't seem to be working.
CSS:
.dropdown .dropdown-menu
{
position: absolute;
top: 38px;
left: -15px;
display: none;
margin: 0;
list-style: none;
width:200px;
border:1px solid #759931;
padding: 0;
background: #fff;
border-radius: 5px;
-moz-border-radius: 5px;
z-index:10000;
-webkit-transition: all 5000ms ease;
-moz-transition: all 5000ms ease;
-ms-transition: all 5000ms ease;
-o-transition: all 5000ms ease;
transition: all 5000ms ease;
}
.dropdown:hover .dropdown-menu
{
display: block;
}
A JSFiddle would be helpful.
display cannot be transitioned or animated. Use opacity or transform: scale() according to your likings. Here's an example using opacity:
.dropdown .dropdown-menu {
position: absolute;
top: 38px;
left: -15px;
opacity: 0;
margin: 0;
list-style: none;
width: 200px;
border: 1px solid #759931;
padding: 0;
background: #fff;
border-radius: 5px;
-moz-border-radius: 5px;
z-index: 10000;
-webkit-transition: all 5000ms ease;
-moz-transition: all 5000ms ease;
-ms-transition: all 5000ms ease;
-o-transition: all 5000ms ease;
transition: all 5000ms ease;
}
.dropdown:hover .dropdown-menu {
opacity: 1;
}
/* demo styles */
.dropdown {
background-color: #f0f0f0;
position: relative;
height: 30px;
width: 200px;
}
<div class="dropdown">Hover me
<div class="dropdown-menu">My beautiful menu</div>
</div>
.dropdown {
padding: 5px;
background: tomato;
position: relative;
}
.dropdown .dropdown-menu {
position: absolute;
transition: all 500ms ease-in-out;
opacity: 0;
visibility: hidden;
background: white;
border: 1px solid peru;
padding: 10px;
}
.dropdown:hover .dropdown-menu {
opacity: 1;
visibility: visible;
}
<div class="dropdown">
Hover
<div class="dropdown-menu">Menu</div>
</div>
Key bits are opacity: 0 and visibility: hidden, and then opacity: 1 and visibility: visible on hover. That will create the transition/fade-in look you're going for.
transition and animate only work on certain properties (see: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties ). You have to use height/width, opacity, etc.
It should also be noted, if using height or width, the keyword auto cannot be transitioned to or from.
Edit:
li>ul.height {
max-height: 0;
overflow: hidden;
}
li:hover>ul.height {
max-height: 200px;
}
li>ul.opacity {
opacity: 0;
}
li:hover>ul.opacity {
opacity: 1;
}
/* Basic Stuff */
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
div>ul>li {
display: inline-block;
position: relative;
padding: .5em;
}
li>ul {
position: absolute;
left: 0;
transition: all ease 2s;
}
a {
display: block;
padding: .5em;
}
<div>
<ul>
<li>Sublist Height
<ul class="height">
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
<li><a>Item 3</a></li>
</ul>
</li>
<li>Sublist Opacity
<ul class="opacity">
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
<li><a>Item 3</a></li>
</ul>
</li>
</ul>
</div>
The display property is not animatable. You can read the list of animatable properties (which translates to: properties that can be used transitions/animations) right here: CSS Animatable
Related
Is there any way with css or JavaScript to set an animation border when it is clicked or active in wordpress?
I want to make this effect on a ul lists.I'm using a filter product and i can't put a button inside li elements.
.btn{
border:none;
color: #FFFFFF29;
position: relative;
display: inline-block;
overflow: hidden;
padding: 0.5rem 0;
font-size:65px;
transition: .3s;
transition-delay: 0.5s;
}
.btn::before{
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 1px;
width: 100%;
background-color: #fff;
transform: translateX(-105%);
transition: transform 0.5s ease-in-out;
transition-delay: 0.5s;
}
.btn:focus::before{
transform: translateX(0);
}
.btn:focus{
transition:.3s;
color:#fff;
transition-delay: 0.5s;
outline: none;
background-color: transparent;
}
.btn:not(hover){
color: #FFFFFF29 ;
background-color: #1a1a1a;
}
ul {
background-color:#1a1a1a;
list-style-type: none;
}
<ul>
<li><button class="btn" >Digital Marketing</button></li>
<li><button class="btn" >Sviluppo</button></li>
</ul>
Elementor Class Add into a tag
.btn:not(hover){
color: var(--e-global-color-secondary) !important;
background-color: #1a1a1a;
}
Here is my code and the javascript. I've tried deleting the width off the original class .sidebar but it doesn't work. The nav-links come in smooth but the .sidebar background snaps into place. It doesn't smoothly transition with the rest of the elements but when the browser resizes the transitions take place. It's just that when I click on the event action it snaps into place.
var toggler = document.getElementsByClassName('toggler')[0]
var sideBar = document.getElementsByClassName('sidebar')[0]
toggler.addEventListener('click', function openSideBar() {
sideBar.classList.toggle('open')
});
.menu {
height: 100vh;
width: 100%;
background: #eeefcf;
}
h1{
display: flex;
justify-content: center;
align-items: center;
}
.menu-toggler{
position: absolute;
top: 0;
left: 0;
height: 50px;
width: 50px;
background: purple;
z-index: 1;
transition: ease-in .4s;
}
.toggler {
position: absolute;
top: 0;
left: 0;
width: 30px;
height: 30px;
cursor: pointer;
z-index: 2;
opacity: 0;
transition: all ease-in .9s;
}
.sidebar {
position: absolute;
top: 0;
left: 0;
height: 100vh;
width: -200px;
background: rgb(45, 125, 218);
transition: ease 0.9s;
}
.nav-links {
position: absolute;
top: 100px;
left: -70px;
display: flex;
flex-direction: column;
transition: ease-in .4s;
}
.nav-link {
margin: 15px 0px;
}
.nav-link a {
color: white;
text-decoration: none;
}
.open {
width: 250px;
transition: ease 2s all;
}
.open .nav-links {
left: 70px;
transition: ease-in all .5s;
}
<div class="menu">
<h1>Move It over</h1>
<div class="menu-toggler">
<input type="checkbox" class="toggler">
</div>
<aside class="sidebar">
<ul class="nav-links">
<li class="nav-link">Home</li>
<li class="nav-link">About</li>
<li class="nav-link">Services</li>
<li class="nav-link">Contact</li>
</ul>
</div>
</aside>
You have set the width of .sidebar to -200px, which is an invalid value.
If you set it to 0px it will animate.
How to central align navbar from here
I tried:
.dropdownmenu li {
**float: center;**
position: relative;
width:auto;
**text-align: center;**
also with
div#nav{
text-align: center;
}
div#nav ul{
display: inline-block;
}
disclaimer: I have no experience in css. If it's obvios please close the question with reference.
The common way to horizontally center block-level elements is using margin: 0 auto;:
.dropdownmenu {
margin: 0 auto;
}
But this requires a specific width. In your case, it would be better to define a container element and set text-align: center;. I would recommend to not using floats here! Just make your <li> elements display: inline-block;.
Here is a working example (watch in fullscreen):
.container {
text-align: center;
}
.dropdownmenu ul,
.dropdownmenu li {
margin: 0;
padding: 0;
}
.dropdownmenu ul {
background: gray;
list-style: none;
}
.dropdownmenu li {
display: inline-block;
position: relative;
width: auto;
}
.dropdownmenu a {
background: #30A6E6;
color: #FFFFFF;
display: block;
font: bold 12px/20px sans-serif;
padding: 10px 15px;
text-align: center;
text-decoration: none;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
.dropdownmenu li:hover a {
background: #000000;
}
#submenu {
left: 0;
opacity: 0;
position: absolute;
top: 35px;
visibility: hidden;
z-index: 1;
}
li:hover ul#submenu {
opacity: 1;
top: 40px;
/* adjust this as per top nav padding top & bottom comes */
visibility: visible;
}
#submenu li {
float: none;
width: 100%;
}
#submenu a:hover {
background: #DF4B05;
}
#submenu a {
background-color: #000000;
}
<div class="container">
<nav class="dropdownmenu">
<ul>
<li>Home</li>
<li>About Me</li>
<li>Articles on HTML5 & CSS3
<ul id="submenu">
<li>Difference between SVG vs. Canvas</li>
<li>New features in HTML5</li>
<li>Creating links to sections within a webpage</li>
</ul>
</li>
<li>News</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
Adjust css like below
.dropdownmenu {text-align:center}
.dropdownmenu ul {
background: gray;
list-style: none;
width: auto; display:inline-block
}
Update your CSS:
body {
text-align: center;
}
.dropdownmenu {
display: inline-block;
margin: 0 auto;
}
or
.dropdownmenu {
text-align: center;
}
.dropdownmenu ul {
display: inline-block;
width: auto;
margin: 0 auto;
}
.container {
text-align: center;
}
.dropdownmenu ul,
.dropdownmenu li {
margin: 0;
padding: 0;
}
.dropdownmenu ul {
background: gray;
list-style: none;
text-align:center;
}
.dropdownmenu li {
display: inline-block;
position: relative;
width: auto;
}
.dropdownmenu a {
background: #30A6E6;
color: #FFFFFF;
display: block;
font: bold 12px/20px sans-serif;
padding: 10px 15px;
text-align: center;
text-decoration: none;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
.dropdownmenu li:hover a {
background: #000000;
}
#submenu {
left: 0;
opacity: 0;
position: absolute;
top: 35px;
visibility: hidden;
z-index: 1;
}
li:hover ul#submenu {
opacity: 1;
top: 40px;
/* adjust this as per top nav padding top & bottom comes */
visibility: visible;
}
#submenu li {
float: none;
width: 100%;
}
#submenu a:hover {
background: #DF4B05;
}
#submenu a {
background-color: #000000;
}
<div class="container">
<nav class="dropdownmenu">
<ul>
<li>Home</li>
<li>About Me</li>
<li>Articles on HTML5 & CSS3
<ul id="submenu">
<li>Difference between SVG vs. Canvas</li>
<li>New features in HTML5</li>
<li>Creating links to sections within a webpage</li>
</ul>
</li>
<li>News</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
I'm building a hamburger menu for a mobile website using only html and css. You can view the code here on codepen.io.
<html>
<body>
<nav>
<button class="hamburger"><span></span></button>
<div class="close"></div>
<ul class="menu">
<li>Page1</li>
<li>Page2</li>
<li>Page3</li>
<li>Page4</li>
<li>Google</li>
</ul>
</nav>
</body>
</html>
As you can see from line 106 in the css part
.hamburger:focus ~ .menu {
visibility: visible;
}
the menu is visible when the button is in focus. The Problem is that as soon as you click on a menu item, the button gets out of focus and the menu disappears before the click can be processed.
I already tried to write rules for the focussed menu, but it did not help.
Please let me know if you need any additional information.
Thank you in advance for your effort.
add transition visibility on your menu class. see the updated class below.
.menu {
position: absolute;
margin: 0;
padding: 10px;
width: auto;
height: auto;
visibility: hidden;
list-style: none;
background-color: #333;
transition: visibility 0.5s;
}
.menu a {
color: #87BF58;
display: block;
text-decoration: none;
}
.hamburger {
display: block;
position: relative;
overflow: hidden;
margin: 0;
padding: 0;
height: 3rem;
width: 3rem;
z-index: 500;
text-indent: 0;
appearance: none;
box-shadow: none;
border-radius: 0;
border: none;
cursor: pointer;
transition: background 0.3s;
background-color: yellowgreen;
}
.hamburger:focus {
outline: none;
background-color: green;
}
.hamburger span {
display: block;
position: absolute;
top: 45%;
left: 25%;
right: 25%;
height: 10%;
background: white;
transition: background 0s 0.3s;
}
.hamburger span::before,
.hamburger span::after {
position: absolute;
display: block;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
content: "";
transition-duration: 0.3s, 0.3s;
transition-delay: 0.3s, 0s;
}
.hamburger span::before {
top: -210%;
transition-property: top, transform;
}
.hamburger span::after {
bottom: -210%;
transition-property: bottom, transform;
}
.hamburger:focus span {
background: none;
}
.hamburger:focus span::before {
top: 0;
transform: rotate(45deg);
}
.hamburger:focus span::after {
bottom: 0;
transform: rotate(-45deg);
}
.hamburger:focus span::before,
.hamburger:focus span::after {
transition-delay: 0s, 0.3s;
}
.close {
position: absolute;
height: 3rem;
width: 3rem;
margin-top: -3rem;
z-index: 501;
background-color: transparent;
cursor: pointer;
visibility: hidden;
}
.hamburger:focus ~ .menu {
visibility: visible;
}
.hamburger:focus ~ .close {
visibility: visible;
}
<nav>
<button class="hamburger"><span></span></button>
<div class="close"></div>
<ul class="menu">
<li>Page1</li>
<li>Page2</li>
<li>Page3</li>
<li>Page4</li>
<li>Google</li>
</ul>
</nav>
I have a hoverable CSS-only tooltip that works well in most instances, but I want to add a scrollbar when it exceeds a max-height. If I add max-height: 50px; overflow-y: auto, my pseudo elements :before and :after will disappear due to the overflow property.
See: http://jsfiddle.net/accelerate/24xwru1n/
Is there a way to add a scrollbar to my tooltip while maintaining my pseudo elements? Or will I have to live without my pseudo elements to make it work?
I'm afraid you have to add a wrapper when you want a scroll in hover and apply to this the css as in tooltip-text:
HTML
<div class="tooltip tooltip-scroll">Hover over me for scrollbar
<div class="wrapper">
<span class="tooltip-text">Hello there<br/>abc<br/>def<br/>ghi<br/>jkl<br/></span>
</div>
</div>
.wrapper{
position:relative;
}
.tooltip {
transform: none;
margin: 50px;
}
.tooltip:hover > .tooltip-text, .tooltip:hover > .wrapper {
pointer-events: auto;
opacity: 1.0;
}
.tooltip > .tooltip-text, .tooltip >.wrapper {
display: block;
position: absolute;
z-index: 6000;
overflow: visible;
padding: 5px 8px;
margin-top: 10px;
line-height: 16px;
border-radius: 4px;
text-align: left;
color: #fff;
background: #000;
pointer-events: none;
opacity: 0.0;
-o-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
/* Arrow */
.tooltip > .tooltip-text:before, .tooltip > .wrapper:before {
display: inline;
top: -5px;
content: "";
position: absolute;
border: solid;
border-color: rgba(0, 0, 0, 1) transparent;
border-width: 0 .5em .5em .5em;
z-index: 6000;
left: 20px;
}
/* Invisible area so you can hover over tooltip */
.tooltip > .tooltip-text:after, .tooltip > .wrapper:after {
top: -20px;
content: " ";
display: block;
height: 20px;
position: absolute;
width: 60px;
left: 20px;
}
.wrapper > .tooltip-text {
overflow-y: auto;
max-height: 40px;
display: block;
}
<div class="tooltip">Hover over me for no scrollbar<span class="tooltip-text">Hello there<p/>abc<br/>def<br/>ghi<br/>jkl<br/></span></div>
<p/><p/><p/>
<div class="tooltip tooltip-scroll">Hover over me for scrollbar
<div class="wrapper">
<span class="tooltip-text">Hello there<br/>abc<br/>def<br/>ghi<br/>jkl<br/></span>
</div>
</div>