I'm creating a wordpress site with a child theme of twenty fourteen.
I wanted to fade in transitions and found this:
ease in transition of submenu
The answer works but:
For level 2 menus (a submenu under submenu), the items fly in from left to right, rather than just 'appearing out of thin air' - how do I fix this?
The transition has affected the mobile display version - how do i stop this?
Thanks for your time and help.
I figured it out myself as the sub-menu was at -999em in parent theme:
/* Smooth transition of menus */
.primary-navigation ul li:hover > ul, .primary-navigation ul li.focus > ul {
opacity:1;
}
.primary-navigation ul ul{
transition: 1s;
opacity:0;
}
/* Submenus to slide out of submenus */
.primary-navigation ul ul ul{
top: 0px;
left: 150px;
}
/* Mobile nav menu to always show and not require hover */
#media (max-width: 782px) {
.primary-navigation ul ul{
transition: 1s;
opacity:1;
}
}
Related
unfortunately I have a little problem with a CSS class I implemented on my website. The menu on the page is displayed by the CSS code. Unfortunately I can't manage to disable scrolling while the menu is open. I already tried using "position: fixed !important;" and "overflow". Somehow, it did not work.
Here is the CSS code:
<style>
/*****************************************/
/*********| FULLSCREEN MENU CSS |*********/
/*****************************************/
/* Move the hamburger to the right of the header */
.de-burger-menu .et_pb_menu__wrap {
justify-content: flex-end !important;
}
/* Hide the desktop menu */
.de-burger-menu .et_pb_menu__wrap .et_pb_menu__menu {
display: none !important;
}
/* Force the mobile version of the menu */
.de-burger-menu .et_pb_menu__wrap .et_mobile_nav_menu {
display: block !important;
align-items: center !important;
}
/* Fullscreen Menu Style when Opened*/
.de-burger-menu .opened #mobile_menu1 {
width: 100vw !important; /* Make it span the full width of the viewport */
position: fixed !important;
top: 0em !important;
left: 0vw !important;
height: 100vh !important; /* Make it span the full height of the viewport */
display: flex !important;
justify-content: center !important;
flex-direction: column !important;
transition: visibility 0.3s, opacity 0.3s ease-in-out; /* Animate the menu to fade in */
padding: 0 !important;
background-color: #ffffff!important; /* Fullscreen menu background color */
}
/* Show fullscreen menu */
.de-burger-menu .opened #mobile_menu1 {
opacity: 1 !important; /* Make it visible by setting opacity to 1 */
visibility: visible !important; /* Show the menu */
}
/* Hide and fade out the Menu when closed */
.de-burger-menu .closed #mobile_menu1 {
opacity: 0 !important; /* Make it invisible by setting opacity to 0 */
visibility: hidden !important; /* Hide the menu */
transition: visibility 0.3s, opacity 0.3s, left 1s, ease-in-out !important; /* Animate the menu to fade out */
}
/* Remove Bullets next to LI Elements */
.de-burger-menu #mobile_menu1 li {
list-style: none !important;
text-align: center !important;
width: 100%
}
/* Make sure that the menu is above other elements */
.de-burger-menu .et_pb_menu__wrap span.mobile_menu_bar {
z-index: 999999 !important;
}
/* Set the close icon for when the menu is open */
.de-burger-menu .et_pb_menu__wrap .opened .mobile_menu_bar:before {
color: #562f2f !important; /* Icon color */
content: "\4d" !important; /* Divi font icon to use for the close icon */
left: -40px; /* Close icon position. You might need to play with this to make it look right */
}
/* Keep hamburger icon in fixed position on mobile */
.de-burger-menu .opened .mobile_menu_bar {
position: fixed !important;
}
/* Remove mobile menu border */
.de-burger-menu .et_mobile_menu {
border-top: none;
}
/* Make sure the menu items do not show a background */
.de-burger-menu .et_mobile_menu .menu-item-has-children>a {
background-color: transparent;
}
/* Remove the hover background from the menu items and add hover animation */
.et_mobile_menu li a:hover {
background-color: transparent;
opacity: 1;
transition: transform 0.3s ease-in-out !important; /* Animated the menu item when hovered */
transform: scale(1.15); /* Enlarge the hovered menu item by 15% when hovered */
}
/* Remove menu item bottom borders */
.de-burger-menu .et_mobile_menu li a {
border-bottom: none;
}
</style>
The website is: https://aureus-frankfurt.de/
I hope someone knows a solution.
Kind regards
Hi Welcome to the community:
You can target the mobile opened class with :has and make the body overflow:hidden
body:has(.mobile_nav.opened) {
overflow: hidden
}
I want to make the dropdown menu fade in/out slightly. I tried to add opacity and hover, but I could not figure it out.
nav ul li:hover > .midbox {
opacity:1;
transition: all 0.5s ease;
}
I than set opacity:0 on .midbox with the same transition applied.
Below is a fiddle with an example.
https://jsfiddle.net/skf5v0Lw/
Am I supposed to use the other element hover state to affect the state of the dropdown?
CSS transition does not work on display property. Use visibility instead. Also it should be set on the dropdown UL rather than the inner element.
/* Hide Dropdowns by Default
* and giving it a position of absolute */
nav ul ul {
/* display: none; */
position: absolute;
width: 800px;
top: 60px;
opacity: 0;
visibility: hidden;
transition: all 0.5s ease;
}
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
/* display:block; */
opacity: 1;
visibility: visible;
}
https://jsfiddle.net/skf5v0Lw/5/
Not sure if this helps, but you could check out dropotron, it allows for a bunch of settings like fade in dropdown, hover delay, and that sort of thing.
https://github.com/n33/jquery.dropotron
I am a new HTML/CSS guy, and I want to learn HTML and CSS. Now I saw this wonderful website; when you hover over the about us tab in the menu there is an animation on the submenu. That's the animation that I tried re-creating.
Here's what I have tried: JS Fiddle.
Now, it all works fine, below is the CSS that actually does the trick:
.menu > li a:hover ~ .sub-menu{
display: block;
-webkit-animation-name: smallanim;
-o-animation-name: smallanim;
animation-name: smallanim;
-webkit-animation-duration: .5s;
-o-animation-duration: .5s;
animation-duration: .5s;
}
#keyframes smallanim {
0% {
transform:translateY(20px);
}
100% {
transform:translateY(0px);
}
}
It's .menu > li a:hover ~ .sub-menu this selection that basically does the trick. But is this the right way to do it? If you hover on the main menu the submenu appears, but then when you try hovering on the sub-menu, the menu disappears. Do I need to use jQuery?
You need to do
.menu > li:hover a ~ .sub-menu
instead of
.menu > li a:hover ~ .sub-menu
This question already has answers here:
Transitions on the CSS display property
(37 answers)
Closed 8 years ago.
I can't get transition to work on a website i'm working on. The nav menu hides and shows correctly, but it just appears instantly without tranistion. The CSS is this:
.nav ul li ul li {
display:none;
visibility:hidden;
transition: all 0.5s ease;
}
.nav ul li:hover > ul
{
transition: all 0.5s ease 0s;
display:block;
visibility:visible;
}
and the HTML is
<div class="nav">
<ul>
<li>test</li>
<li>test
<ul class="sub-menu">
<li>test</li>
</ul>
</li>
</ul>
</div>
I have tested it in chrome, ffx, ie.
I actually got most of this code off another answer on this site, so i'm not sure what my problem is here.
I should have mentioned, I have tried opacity from other answers, but in a drop down menu, it won't work as the menu stays there.
The transition from display: none to display: block does not behave like you expect.
Work with opacity instead.
jsFiddle Demo
Try This CSS this will work fine
.nav ul li > ul {
opacity:0;
overflow:hidden;
transition: all 0.5s ease;
}
.nav ul li:hover > ul
{
transition: all 0.5s ease 0s;
height:auto;
opacity:1;
}
Demo Here
display property does not work with transitions.
what itay suggested is valid,and you can play with other properties as well (position ?)
to make the desired effect.
Well, I'm completely at a loss. I'm designing a website with 4 social icons on the top right hand side. When one hovers over the icons, they increase from .7 to 1.0 opacity, and a line of text appears underneath. This is best demonstrated by an example (the images are broken, but no matter):
http://jsfiddle.net/7hZYj/
It's a rather simple effect which I've achieved through the use of CSS3 and lists:
#pageHeader .social ul ul {
position: absolute;
top: 30px;
right:0;
width:160px;
text-align: right;
opacity: 0.0;
-moz-transition:ease .6s; /* Firefox 4 */
-webkit-transition:ease .6s; /* Safari and Chrome */
-o-transition:ease .6s; /* Opera */
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
}
#pageHeader .social ul li:hover ul {
opacity: 1.0;
}
The problem is that if one hovers right below the images, the text shows up anyway. For instance, if you hover right below the image furthest to the right, the "join the e-list" line shows up. I only want it to reach 1.0 opacity when the image is hovered over...which is what I thought I specified in the CSS above.
What am I doing wrong?
opacity leaves the element there and since it's a child of the li, when you hover over the invisible element, you're hovering over the li.
#pageHeader .social ul ul {
position: absolute;
top: 30px;
right:0;
width:160px;
text-align: right;
opacity: 0.0;
-moz-transition:ease .6s; /* Firefox 4 */
-webkit-transition:ease .6s; /* Safari and Chrome */
-o-transition:ease .6s; /* Opera */
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
left: -9999px;
}
#pageHeader .social ul li:hover ul {
opacity: 1.0;
left: auto;
}
Adding left:-9999px; seems to fix the issue. You can adjust the transition if you don't want it to automatically go back to the left when you are no longer hovering, as seen in this fiddle