If you're hover a li, a dropdown menu appears. If you take the pointer down to the ul that appears when you hover, I want the link still have a underline until you take the arrow away from the ul or link. This way you know which menu you hovered when the menu drops down.
Any idea how to do this?
#scroll-nav .links li {
list-style: none;
padding: 0;
margin: 0;
display: inline;
}
#scroll-nav .links li ul {
overflow: hidden;
max-height: 0;
-moz-transition-duration: 0.6s;
-webkit-transition-duration: 0.6s;
-o-transition-duration: 0.6s;
transition-duration: 0.6s;
-moz-transition-timing-function: ease-in-out;
-webkit-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
position:absolute;
top: 35px;
left: -25px;
padding: 0;
padding-top: 0px;
width: 100%;
background: #FFF;
z-index:-1111111111111111;
letter-spacing: 1px !important;
}
#scroll-nav .links li ul a {
letter-spacing: 1px !important;
}
#scroll-nav .links li:hover ul {
max-height: 1000px;
}
#scroll-nav .links a {
margin-right: 40px;
color: #383838;
letter-spacing: 2px;
}
Unfortunately there is no way to affect a parent element, or element placed before the current one, based on an elements hover state through CSS. You might consider an alternate HTML structure to allow an adjacent sibling selection based on the ul's hover state.
Without being able to see your current HTML structure it will be difficult to help any further. Would you mind posting your example to http://jsfiddle.net or a similar site?
#scroll-nav .links li:hover ul {
max-height: 1000px;
text-decoration: underline;
}
Related
I'm working with a template that uses Font Awesome for social media icons. Since one of the icons I need is not included in Font Awesome I found a CSS trick to overwrite a certain icon by a custom image. This works fine (fa-toggle-on can be replaced with any random icon):
.home i.fa.fa-toggle-on {
content:url(\http://www.url.com/image1.png);
margin-top: 10px;
}
However, when hovering this image I need to show a different PNG (different color). Let's say "image2.png". I've been puzzling with this for an hour or so and can't seem to fix it. Commands like ".home i.fa.fa-toggle-on a:hover" don't seem to do the trick. Any ideas? Everything will be highly appreciated!
The CSS for the "normal" Social Media icons with Font Awesome is as follows:
/**
* SOCIAL ICONS
*/
#social-icons {
padding: 0;
margin: 0;
}
#social-icons li {
display: inline;
float: left;
margin-right: 1px;
line-height: 32px;
}
#social-icons li a {
display: inline-block;
width: 40px;
height: 40px;
text-align: center;
margin: 20px 0 0 0;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
#social-icons li a:hover {
height: 80px;
margin-top: 0;
background: #fff;
}
#social-icons li a i:before {
position: relative;
top: 5px;
font-size: 18px;
color: #fff;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
#social-icons li a:hover i:before { top: 25px; }
Based on this line in the CSS
#social-icons li a:hover i:before
You need
#social-icons li a:hover i.fa.fa-toggle-on {
content:url(\http://www.url.com/image2.png);
}
any ide what is it? The white box between two menu item.(circled with red)
CSS:
#navigation {
list-style-type: none;
margin: 0;
padding: 0;
vertical-align: middle;
line-height: 50px;
}
#navigation a {
text-decoration: none;
display: inline-block;
padding-bottom: 15px;
color: #383838;
webkit-transition: color 0.4s;
-moz-transition: color 0.4s;
-ms-transition: color 0.4s;
-o-transition: color 0.4s;
transition: color 0.4s;
}
#navigation a:hover {
color: #6A98DD;
}
#navigation li {
display: inline-block;
padding-left: 9px;
padding-right: 10px;
color: #383838;
background: #EEE;
webkit-transition: color 0.4s;
-moz-transition: color 0.4s;
-ms-transition: color 0.4s;
-o-transition: color 0.4s;
transition: color 0.6s;
webkit-transition: background 0.4s;
-moz-transition: background 0.4s;
-ms-transition: background 0.4s;
-o-transition: background 0.4s;
transition: background 0.4s;
}
#navigation li:hover {
padding-left: 8px;
color: #6A98DD;
display: inline-block;
background: #EEE;
border-left: 1px solid #AAA;
}
It is because your li are set todisplay: inline-block; - inline elements are effectively treated like textual nodes, so if each li is on a newline in your HTML this is interpreted as a space.
There are a number of ways to prevent this- one is to set font-size:0; on your ul then font-size:14px; on your li
Alternatively, you can float:left your li and set overflow:hidden on your ul
Or, you can remove the newline in your HTML- putting all your li on a single line.
See here for some other techniques and information, and here
Inline block display mode is the culprit.
#navigation li {
display: inline-block;
...
}
Instead, you can make this way, with the above code, add this in the end:
#navigation {
overflow: hidden;
}
#navigation li {
float: left;
}
Float your li's left like so;
#navigation li {
float: left;
}
the solution is:
Set float left on elements. Or...
Set font-size: 0 on parent and reset font size on children font-size: 1.
That happens becouse of white space between elements. another solution is to use some syntax that prevents spaces, like so:
<div id="navigation">
<li>Item 01</li><li>
Item 02</li><li>
Item 03</li><li>
Item 04</li><li>
Item 05</li>
</div>
Here an example:
1) set float left on childern: http://jsfiddle.net/27t5ogsj/2/
2) font-size method (simply css): http://jsfiddle.net/27t5ogsj/
3) html pre-format method: http://jsfiddle.net/27t5ogsj/1/
Personally i like the second method becouse then i can center horizontally the menu with an simple text-align: center on parent! http://jsfiddle.net/27t5ogsj/3/
I'm having a bit of an issue with last child. I have a dropdown nav and need to make the last dropdown align differently than the rest since the text is getting cut off.
My CSS for a normal dropdown looks like so:
.mainnav ul > li > ul {
padding: 0;
position: absolute;
top: 43px;
left: -20px;
padding-top: 10px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
max-height: 0px;
overflow: hidden;
-webkit-transiton: all 0.4s;
-moz-transition: all 0.4s;
-ms-transition: all 0.4s;
-o-transition: all 0.4s;
-transition: all 0.4s;
}
and when I adjust for the last dropdown I tried to use:
.mainnav ul > li > ul:last-child{
padding: 0;
position: absolute;
top: 43px;
left: -120px;
padding-top: 10px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
max-height: 0px;
overflow: hidden;
-webkit-transiton: all 0.4s;
-moz-transition: all 0.4s;
-ms-transition: all 0.4s;
-o-transition: all 0.4s;
-transition: all 0.4s;
}
But when I put that in it effects all the dropdowns. You can see the test site here:
http://xeroproject.com/runa_tea/
I'm trying to adjust the IMPACT dropdown.
Thanks for any help.
.mainnav ul > li > ul:last-child selects all <ul> that's the last child of elements which match the selector.
For targeting the <ul> in last <li>
use
.mainnav ul > li:last-child > ul{
Instead of
.mainnav ul > li > ul:last-child{
I'm trying to center a button on an image with responsive property. I'm using boostrap 3. Currently I've used CSS margin-left and margin-right to center but of course this is not efficient especially when viewed on smaller viewports.
Here's my CSS
.gallery-list > li .gallery-thumbnail i{
top: 80px;
color: red;
opacity: 0;
position: absolute;
font-size: 50px;
display:block;
margin-left: 120px;
background-color: transparent;
transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
}
.gallery-list > li:hover .gallery-thumbnail i{
opacity: 1;
transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
}
Large screen display:
Small screen display:
So question is, how do I center the button irrespective of the device viewport?
That's b/c your margin is not responsible. It uses absolute values; prefer :
margin-left: auto;
margin-right: auto;
You can use bootstrap's helper class center-block
http://getbootstrap.com/css/#helper-classes-center
Or just add
margin-left:auto;
margin-right:auto;
Adding
margin-left: auto;
margin-right: auto;
will not resolve the issue as the element is positioned absolutely. Please try the code below:
.gallery-list > li .gallery-thumbnail {
position: relative;
display: block;
}
.gallery-list > li .gallery-thumbnail i {
position: absolute;
top: 50%;
margin-top: -25px; /* your icon height devided by 2 */
left: 50%;
margin-left: -21px; /* your icon width devided by 2 */
font-size: 50px;
color: red;
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.gallery-list > li:hover .gallery-thumbnail i{
opacity: 1;
}
I am trying to apply a delay before starting a CSS transition on mouse out event. My CSS code is below, please let me know how to apply time delay before CSS transition on mouse out starts.
I want to achieve that the menu stays stable for some time (e.g. for 3 seconds) after the user moves mouse pointer out of the menu.
.timnav li .dropdown {
width: auto;
min-width: 0px;
max-width: 230px;
height: 0;
position: absolute;
overflow: hidden;
z-index: 999;
background:rgba(255, 255, 255, 0.8);
}
.timnav li:hover .dropdown {
min-height: 60px;
max-height: 500px;
height: auto;
width: 100%;
padding: 0;
-webkit-transition: delay .5s ease-in-out;
-moz-transition: delay .5s ease-in-out;
-o-transition: delay .5s ease-in-out;
}
.timnav li .dropdown ul {
margin: 0;
margin-top:7px;
}
.timnav li .dropdown ul > li {
display: block;
width: 100%;
float: left;
text-align: left;
height: auto;
border-radius: none;
padding-bottom:2px;
}
.timnav li .dropdown .dropdown2{
display: none;
width: 100%;
float: left;
text-align: left;
height: auto;
border-radius: none;
}
.timnav li .dropdown ul > li:hover .dropdown2{
display: block;
width: 100%;
float: left;
text-align: left;
height: auto;
border-radius: none;
}
.timnav li .dropdown .dropdown2:hover {
display: block;
width: 100%;
float: left;
text-align: left;
height: auto;
border-radius: none;
}
.timnav li .dropdown .dropdown2 li a {
display: block;
padding-left:7px !important;
height:6 !important;
padding-top:8px;
background: url(../images/nav-bg.jpg) repeat; color:#fff;
}
.timnav li .dropdown ul > li a {
display: block;
line-height: 26px;
height: 22px;
padding: 10px;
background: url(../images/nav-crrent.jpg) repeat; color:#FFFFFF;
}
.timnav ul .dropdown ul li:first-child a {
border-radius: 0;
}
.timnav li .dropdown li a:hover {
background: url(../images/nav-bg.jpg) repeat; color:#000;
}
You can add a delay to a transition, the syntax is as follows:
transition: all 0.5s ease-in-out 3s;
So
transition: <property> <duration> <timing-function> <delay>;
The syntax is the same for all the prefixed versions also.
I have created a demo of this, because you need to do something a bit tricky in order to make the item appear with no delay, but delay before it goes.
http://jsfiddle.net/pgqM2/
The trick is to re-define the transition to add the 3s delay when there is no hover, but to have a 0s delay when there is a hover:
li ul {
opacity: 0;
transition: all 0.5s ease 3s;
}
li:hover ul {
opacity: 1;
transition: all 0.5s ease 0s;
}
There is a transition-delay property in CSS. Simply add this to your code, and you will get the desired effect.
transition-delay:3s;
For the purpose of shorthand transition properties, here is a picture that sums it up
So in your case it would look like this
div:hover {
-webkit-transition: .5s ease-in-out 3s;
-moz-transition: .5s ease-in-out 3s;
-o-transition: .5s ease-in-out 3s;
transition: .5s ease-in-out 3s;
color: red;
cursor: pointer;
}
<div>Hover me. There is a delay!</div>
Here is a fiddle to demonstrate
You cant use css transition when using display none, only solution with display none is js.
You can use the css3 property transition-delay to delay executing css. Click "Try it Yourself" to see an example.