Been battling with getting my Submenu to show on hover, it works but as soon as I slide off the parent element '.dropdown-toggle', the Submenu disappears.
Been trying for hours to fix this, look at the code below and see if you can solve the issue please.
Much appreciated
.dropdown-menu {
position: absolute;
top: 40px;
border: none;
padding: 0;
border-radius: 0;
width: 200px;
background: #e8e8e8;
visibility:hidden;
opacity:0;
filter:alpha(opacity=0);
-webkit-transition:700ms ease;
-moz-transition:700ms ease;
-o-transition:700ms ease;
transition:700ms ease;
}
.dropdown-toggle:hover + .dropdown-menu, .dropdown-menu {
display: block;
visibility:visible;
opacity:1;
filter:alpha(opacity=100);
}
Just a few changes can solve this:
dropdown-toggle changed to dropdown-menu.(Parent changed)
.dropdown-menu {
position: absolute;
top: 33px; /* reduced the gap so that it wont dissapear while hovering on submenu*/
border: none;
padding: 0;
border-radius: 0;
width: 200px;
background: #e8e8e8;
visibility:hidden;
opacity:0;
filter:alpha(opacity=0);
-webkit-transition:700ms ease;
-moz-transition:700ms ease;
-o-transition:700ms ease;
transition:700ms ease;
}
.dropdown:hover .dropdown-menu {
display: block;
visibility:visible;
opacity:1;
filter:alpha(opacity=100);
}
You may try this CSS:
.dropdown-menu {
position: absolute;
border: none;
padding: 0;
border-radius: 0;
width: 200px;
background: #e8e8e8;
visibility: hidden;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: 700ms ease;
-moz-transition: 700ms ease;
-o-transition: 700ms ease;
transition: 700ms ease;
margin-top: -5px;
padding-top: 5px;
}
.dropdown-toggle {
position: relative;
display: inline-block;
}
.dropdown-toggle:hover .dropdown-menu {
display: block;
visibility: visible;
opacity: 1;
filter: alpha(opacity=100);
}
HTML:
<div class="dropdown-toggle">
<a>Hover me</a>
<ul class="dropdown-menu">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>
Demo: http://jsfiddle.net/lotusgodkk/GCu2D/2204/
Thanks for your all your answers. This was the working solution below.
.dropdown-menu {
position: absolute;
top: 40px;
border: none;
padding: 0;
border-radius: 0;
width: 200px;
background: #e8e8e8;
visibility:hidden;
opacity:0;
filter:alpha(opacity=0);
-webkit-transition:700ms ease;
-moz-transition:700ms ease;
-o-transition:700ms ease;
transition:700ms ease;
}
.dropdown:hover .dropdown-menu, .dropdown-menu {
display: block;
visibility:visible;
opacity:1;
filter:alpha(opacity=100);
}
Related
I have this code when on text hover, image pops, but can's succeed with setting transition to it. When I hover the image pops instantly without any transition.
.link #img {
position: absolute;
top: -450%;
left: 25%;
display: none;
}
.link:hover #img {
display: block;
}
#img {
width: 160px;
transition: 0.2s linear;
}
Photography<img src="content/images/a.png" id="img">
try with this code
use visibility or opacity and remove top:-450% from css
.link #img {
position: absolute;
left: 25%;
visibility: hidden;
opacity: 0;
}
.link:hover #img {
visibility: visible;
opacity: 1;
}
#img {
width: 160px;
transition: 0.5s linear;
}
<a href="#" class="link">Photography<img src="https://static.pexels.com/photos/34950/pexels-photo.jpg"
id="img"></a>
Use opacity or visibility instead of display.
.link #img {
position:absolute;
top:0;
left:150px;
opacity:0;
}
.link:hover #img {
opacity:1;
}
#img {
width:160px;
transition: 0.5s linear;
}
<a href="#" class="link">Photography<img src="https://dummyimage.com/200x200/000/fff"
id="img"></a
I am a little bit edit the code. Here is working version. Check it please.
Just for your knowledge - property display can't be affected by transition, because it has only two states: displayed and not displayed and no states in between, so transition is not working for this purpose.
Doog luck :)
#img {
position: absolute;
visibility: hidden;
opacity: 0;
width: 160px;
transition: all .3s ease;
}
.link:hover #img {
visibility: visible;
opacity: 1;
}
Photography<img src="https://lh4.googleusercontent.com/-OowXWkgMSHI/AAAAAAAAAAI/AAAAAAAAANE/rOf2DCA2AXo/photo.jpg" id="img">
I am having a problem getting a underline bar to animate under a text link. You can see a working example here: http://tobiasahlin.com/blog/css-trick-animating-link-underlines/
The animation works fine in all browsers except for Safari 5.1.7. What am I doing wrong? Here is my code snippet:
EDIT: Sorry about that, I added the html and more of the CSS rules. I hope that helps.
.infiniteNav{
width: 100%;
height: 56px;
background-color: #9e0707;
background: linear-gradient(#c71e1e, #800909);
background: -webkit-linear-gradient(#c71e1e, #800909);
position: absolute;
top: 271px;
z-index: -2;
}
nav{
width: 955px;
height: 56px;
float: left;
text-align: center;
display: block;
background-color: #9e0707;
background: linear-gradient( #c71e1e, #800909);
background: -webkit-linear-gradient(#c71e1e, #800909);
}
nav a{
position: relative;
font-size: 25px;
font-family: arial;
color: #e0e0e0;
text-decoration: none;
font-weight: bold;
margin: 0px 15px;
line-height: 55px;
}
/********************************************************************************************************
This is the animated underline bar. *
********************************************************************************************************/
nav a:before{
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #e0e0e0;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
/*-webkit-transition: all 0.3s ease-in-out 0s;*/
-webkit-transition-property: all;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease-in-out;
-webkit-transition-delay: 0s;
transition: all 0.3s ease-in-out 0s;
}
nav a:hover:before{
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
color: #e0e0e0;
}
nav a:active{
color: #e0e0e0;
}
<nav>
Home
Shop
Sales
Catalog
Events
Contact
About us
Partners
</nav>
I'm trying to make a two column responsive layout using bootstrap.
In the left column I want to place my content with the width of 100%/2, and in the right, a fixed sidebar with the width of 100%/3.
this is the css I used to my sidebar but in the fiddle I attached the sidebar is in left side and I want it to be in right side.
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
Fiddle :
https://jsfiddle.net/une5nhf4/
How can I modify this to correspond to my needs ?
I modified your CSS:
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-right: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
right: 250px;
width: 0;
height: 100%;
margin-right: -250px;
overflow-y: auto;
background: #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -250px;
}
/* Sidebar Styles */
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #fff;
background: rgba(255,255,255,0.2);
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
#media(min-width:768px) {
#wrapper {
padding-right: 250px;
}
#wrapper.toggled {
padding-right: 0;
}
#sidebar-wrapper {
width: 250px;
}
#wrapper.toggled #sidebar-wrapper {
width: 0;
}
#page-content-wrapper {
padding: 20px;
position: relative;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: 0;
}
}
DEMO
I am making a bootstrap wordpress theme and I have a problem about adding pure smooth drop-down menu effect for primary menu like this example such as it does not seem to work properly after clicked "M logo" to open drop-down menu. You can check out my theme on this link for more detail
Here are my CSS classes at the moment:
.navbar-nav>li>.dropdown-menu {
margin: -1px 0 0 45%;
border-top-right-radius: 0;
border-top-left-radius: 0;
}
.dropdown-menu {
/* background: url(img/submenu.png) no-repeat scroll right/ 91% 100%; */
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 153px;
padding: 1px 0;
margin: 2px 0 0 0;
list-style: none;
font-size: 14px;
text-align: center;
background-color: #5c4d4a;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,0.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,0.175);
box-shadow: 0 6px 12px rgba(0,0,0,0.175);
background-clip: padding-box;
}
.dropdown-menu li a {
display: block;
background: url(img/submenu.png) no-repeat scroll right/ 104% 108%;
padding: 10px 20px;
clear: both;
font-weight: normal;
line-height: 1.428571;
color: #fff;
white-space: nowrap;
}
.dropdown-menu li a:hover,
.dropdown-menu li a:focus {
background: url(img/submenu.png) no-repeat scroll right/ 104% 108%;
color: #ccc;
text-decoration: none;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff357ebd', GradientType=0);
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
.dropdown-menu ul {
list-style: none;
}
The salient features required are:
.dropdown-menu {
opacity: 0;
position: absolute;
top: 35px;
visibility: hidden;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
nav li:hover .dropdown-menu {
opacity: 1;
top: 50px;
visibility: visible;
}
The float:left is a furfy, it is over-ridden by position:absolute;
Good Day, I'm trying to create a slidedown menu using some JS and CSS but it's not working. Here's the fiddle link:
ul.show-child{
height: auto;
display: block;
-webkit-transition: height 1s ease;
-moz-transition: ease-in 2s none;
-ms-transition: ease-in 2s none;
-o-transition: ease-in 2s none;
transition: ease-in 2s none;
}
https://jsfiddle.net/gkrja9jy/
What I want to do, is to add some cool animation when I show the hidden div. By the way, I just copied the transition effect from this site
There is a pure CSS solution. I corrected your example. Make sure that you write correct HTML code. Here is the new code and a fiddle:
HTML code:
<ul class="custom-sidebar">
<li>
Accountancy
</li>
<li>
Grade School
<ul>
<li>Goals and Objectives</li>
<li>Clubs and Orgs</li>
<li>Photo Gallery</li>
<li>Summer Tutorial</li>
</ul>
</li>
</ul>
CSS code:
li ul {
display: block;
height: 0px;
overflow: hidden;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
li:hover ul {
height: 100px;
display: block;
}
.custom-sidebar a,.custom-sidebar a:visited {
color: #0f5882;
display: block;
font-weight: bold;
height: 25px;
margin-left: -23px;
padding-left: 23px;
vertical-align: middle;
width: 100% !important;
}
.custom-sidebar li {
list-style: outside none none;
padding-left: 17px;
}
.custom-sidebar li a {
background-color: #ebecec;
border-left: 6px solid #116b9e;
padding-top: 2px;
margin-bottom: 8px;
}
https://jsfiddle.net/u6yrL0a0/2/
It is usually best to avoid JavaScript if it is not needed.
yo can use jquery to create the animation like this:
var jq=jQuery.noConflict();
jq(document).ready(function(){
jq('.menu-div').hover(function(){
if(jq(this).children(":first").hasClass('has-child')){
var thisx = jq(this).children(":first");
thisx.next('ul').slideDown(1000);
}
});
});
jq(document).ready(function(){
jq('.menu-div').mouseleave(function(){
if(jq(this).children(":first").hasClass('has-child')){
var thisx = jq(this).children(":first");
thisx.next('ul').slideUp(1000);
}
});
});
and the css will be like this :
ul.hide-child{
display: none;
overflow: hidden;
}
ul li ul{
-webkit-transition: all 1s;
-moz-transition: all 1s ;
transition: all 1s;
display:none;
height:auto;
}
.custom-sidebar .post-link,.post-link:visited{
color: #0f5882;
display: block;
font-weight: bold;
height: 25px;
margin-left: 0px;
padding-left: 23px;
vertical-align: middle;
width: 100% !important;
}
.custom-sidebar li{
background-color: #ebecec;
border-left: 6px solid #116b9e;
list-style: outside none none;
margin-bottom: 0px;
padding-left: 17px;
padding-top: 2px;
}
https://jsfiddle.net/gkrja9jy/5/