I have made a little navigation, upon hovering above the home I want to let it slowly slide out to the left using a transition: 0.4s; but it doesn't want to do anything, I've applied it to every element just to show that it doesn't work no matter what.
Anyone knows how to fix this? Maybe it's because of the position: fixed; ?
I have made a jsfiddle, keep in mind that it's only a snippet of my site, and has no esthetic style.
Thanks in advance!
You cannot make a transition on the display property.
You can't put a transition on the display property.
Here is a jsFiddle that uses the transition on max-width to allow a transition to happen.
.desktopnav > ul > .dropdown > .dropdown-content {
float: left;
transition: max-width 0.4s;
overflow: hidden;
max-width: 0px;
}
.desktopnav >ul > .dropdown:hover .dropdown-content {
display: block;
max-width: 500px;
}
you will need to had more css to hide undesired visual effect and force the list item to stay aligned on top.
Your use of ul/li is a bit off, li should only be children of ul elements, not section elements, and ul should only have li elements as children.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
This is a list of properties that can be animated. Display is not one of those. That's why you aren't seeing a transition.
You cannot animate the display property. If you want to accomplish a "slide to left" effect, you have to animate the max-width property.
I've forked your fiddle to illustrate this: https://jsfiddle.net/w811wvfp/1/
Basically what I did was:
.desktopnav > ul > .dropdown {
...
white-space: nowrap;
}
.desktopnav > ul > .dropdown > .dropdown-content {
...
max-width: 0;
white-space: nowrap;
overflow: hidden;
}
.desktopnav > ul > .dropdown:hover .dropdown-content {
max-width: 1000px;
}
Related
I was trying the examples from w3schools: http://www.w3schools.com/css/tryit.asp?filename=trycss3_transition1 but I doing the same in my CSS and it does not work.
CSS:
nav > ul > li{
display: inline-block;
padding: 0px;
margin: 0px;
transition: width 2s;
}
nav > ul > li:hover{
width: 20%;
}
hover works without problems, but does not the transition... this should be easy
The browser typically cannot transition an element's property without having both a start and end value. Give it an initial width.
nav > ul > li {
width: 100px;
You'll notice that if you remove the initial width from the example you gave the transition ceases to function.
You need to define the initial/start width of the element before you apply transition
Demo
nav > ul > li {
display: inline-block;
padding: 0px;
margin: 0px;
transition: width 2s;
background: #f00;
width: 0; /* Add this */
}
nav > ul > li:hover {
width: 20%;
}
Some tips :
Don't use px if the value is 0 so unit doesn't matter.
I hope you know that you are using inline-block so white-space will occur
Don't use too specific selectors if not required, assign a class to the parent element to uniquely identify the element. So instead of writing nav > ul > li you can write .some-class-nav > li. Also you can get rid of > if you are sure that your li items won't have child li
My problem is that I've got a div at the top of my site that has a dropdown menu with a float to the left, the thing is that under that div where I want to have a header whenever I hover over the menu the header floats to the left as well.
I tried to do a clear div after the top div then on css use clear:both; but it didn't really help
Here's the JSfiddle:
http://jsfiddle.net/Safushi/XRNP5/
ul {
font-size: 16px;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
padding: 5px 15px 5px 15px;
background: #464646;
white-space: nowrap;
}
ul li a:hover {
background: #565656;
}
is some of the code for the menu (had to paste some code to be able to paste JSfiddle link).
It will be fixed by adding a
position: absolute;
to the ul that contains the submenu.
The child ul element needs to be absolutely positioned if you don't want it to effect the other elements.
Example Here
#top li > ul {
position:absolute;
width:100%;
}
And as Adrift mentions, you may also want to give the ul a width of 100%.
You got the layer of HTML file right,but the property "position" wrong.
Demo
Once a tag's settled position:absolute; ,it will only be positioned referring to its containing block.So you need to set #menu{postion:relative;} to let its parent-tag be the containing block.In fact,now the submenu is totally deleted from the normal flow,so it won't affect the styles of other tags.
Moreover,I highly recommend you to resist to use descendant selectors,which not only let your browser slower,and your code maintenance much more complex as well.
I have a simple html code that has some data but the li has image background and on hover i want to show the data from span.
HTML CODE:
<ul class="container">
<li class="icons_27"><span class="data_27">DATA 27 - TORONTO</span></li>
<li class="icons_28"><span class="data_28">DATA 28 - NEW YORK</span></li>
</ul>
CSS:
.container li span {
display: none;
}
.container li span:hover {
display: block;
}
My question is how can i show the span data on hover ?
you need to style the hover on li
.container li:hover span {
display: block;
}
but this will work only if your li is visible even when the inner span has display: none
(otherwise your li have no a visible area in which you can hover).
You may solve this potential issue defining, for example, a width or an height to your list-items.
Or — instead of giving display: none to the inner span — you may use a different style, e.g.
.container li span {
visibility: hidden; /* or also opacity : 0; */
}
.container li:hover span {
visibility: visible; /* or also opacity : 1; */
}
Note: the opacity approach (instead of display or visibility) would also give you the opportunity to make a graceful appearing/disappearing effect using a CSS3 transition
If you want the span to display when the li is hovered, put the :hover selector on the li instead:
.container li span {
display: none;
}
.container li:hover span {
display: block;
}
Demo at http://jsfiddle.net/D3QNr/
I have a list of items of which only the first is visible and on list hover shows all items with side effect of changing the position of surrounding content. How to evade this unwanted effect?
Here is an example list:
http://jsfiddle.net/dsbonev/z8Sjy/
All examples that I checked for styling menus have a two-level structure (parent -> children). On parent hover children are shown. But I don't have a parent to hover onto nor I want to promote one of the children as a parent by moving it out of the list and thus breaking the semantic of the markup.
Figured it out! This is what I wanted:
http://jsfiddle.net/z8Sjy/
I accept comments with shortcomings or improvements of this method.
HTML
<div class="list-wrapper">
<ul class="items">
<li>stackoverflow</li>
<li>superuser</li>
<li>serverfault</li>
</ul>
</div>
CSS
.list-wrapper, .items {
display: inline-block;
}
.list-wrapper {
position: relative;
background-color: blue;
height: 1em;
}
.items {
position: absolute;
background-color: red;
}
.items > li:not(:first-child) {
display: none;
}
.items:hover > li:not(:first-child) {
display: block;
}
You could position the list absolutely and then add padding to the paragraph to compensate.
http://jsfiddle.net/z8Sjy/2/
Instead of using display: none & display: block use visibility: hidden & visibility: visible. That way they take up the space in the HTML document, but are not shown:
Working example: http://jsfiddle.net/z8Sjy/3/
Edit
The following CSS would be more cross-browser compatable for showing / hiding "not first-child" elements as the selector :not is actually CSS3.
.items > li:first-child ~ li {
display: none;
}
.items:hover > li:first-child ~ li {
display: block;
}
i cant post all of my code, so please check the url.
http://www.bierhauschina.com/shekou/kulinarium/
here is css:
http://www.bierhauschina.com/menu/menu_style.css
The problem is a css menu. my menu shows all lists of menu under the first menu. i don't know where is problem, but it is exactly in css. where.. i can't got it.
Add position: relative to .nav li in your CSS.
Add position: relative; to .nav .select, .nav .current, making it like this:
.nav .select, .nav .current {
margin: 0;
padding: 0;
list-style: none;
display: table-cell;
white-space: nowrap;
position: relative;
}
This style:
.nav .select *:hover .select_sub, .nav .current .show
Sets position to absolute. Set it to relative. Also you are loading menu_style.css twice, remove the second reference.