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
Related
I want to make a dropdown menu with CSS. I know a little bit how to make it but the HTML structure is different.
My structure is like that:
So in the end I would like to have it work like that:
-When you hover over menu1, the first submenupanel should dropdown with its submenulink.
the CSS of submenu_panel is looking like that:
.submenu_panel {
width: 100%;
height: 100%;
background: gray;
height:0px;
overflow: hidden;
transition: all 0.2s ease-in-out;
}
Can anyone help me to make my dropdown menu?
This is a short version of it in jsfiddle
https://jsfiddle.net/4bjk8opa/
Will this work with you.
Fiddle
ul > li {display: block; float: left; margin-right: 10px; position: relative; background: Red; padding: 0.5em; line-height: 1em}
ul ul {display: none; width: 150px; position:absolute; top: 2em; left: 0}
ul ul > li {float: none;}
ul > li:hover > ul,
ul > a:hover + ul {display: block}
You'll either have to change your HTML structure or use JavaScript to achieve this. You're also declaring height twice for your .submenu_panel.
Steevan's Fiddle shows how you'd have to change your structure to make it work with pure CSS.
To make it work with jQuery, add an ID to the link you want to show #pn1Submenu when hovered, in this case I've used "target":
JS:
$('#target').on('click', function() {
$('#pn1Submenu').show();
});
HTML:
<a href="/" id="target" class="menu_link"...
I set up my .nav class for my nav menu but when I use it it seems to cause problems and when I remove .nav and leave just ul li it fixes it but that also has a margin problem.
the problem is on the bottom I commented /Problem/
http://jsbin.com/fupewijame/1/
You must remove .nav
.nav ul li{
width: 100%;
}
and change it to
ul li{
width: 100%;
}
that kinda fixes it but you can see a margin error. I also must use .nav class as I don't want it global. Please help I can't see the bug
I'm not entirely sure what you'd like it to look like with 100% width. If you give a little more information I can help further.
However, I noticed a few things that might be confusing your CSS.
1) The height is showing as "0" due to a float being applied to the list items. When you apply float to your items they are removed from the normal flow of the document.
To solve, try first removing this:
.nav li {
float: left;
}
2) Most browsers add default padding and/or margin to ol and ul
I recommend you reset, and then try to style.
RESET:
ul {
margin: 0;
padding: 0;
}
TARGET RE-STYLE:
.nav {
margin: /* your style here */;
padding: /* your style here */;
}
instead of :
.nav ul li{
width: 100%;
}
use:
.nav li{
width: 100%;
margin-bottom: 0;
}
if you don't want to have a margin
.nav{
margin: 0;
padding: 0;
}
This
.nav ul li{
width: 100%;
}
is saying :
an element with class .nav
with a descendant of type ul
with a descendant of type li
Since .nav is a class of your ul, and not of an ancestor of your ul, you should use
ul.nav li {
width: 100%;
}
that instead means :
an element of type ul with class .nav
with a descendant of type li
EDIT: for the margin problem, you should probably use position: relative; instead of position: absolute;, that should not be used if not completely aware of how it works
So I have been building this css navigation bar, I have a few problems hope someone can help
. This is how it is Navigation bar . But on setting the float property of the ".cssmenu ul li" to left the whole green background vanishes Navigation with float enabled . Why does this happen? Also I have used the :before pseudo class to create the underline extension effect but that doesn't seem to stretch to the whole width even I have set the width : 100% on hover.
Thanks in advance.
since "Links to jsfiddle.net must be accompanied by code "
.cssmenu{
width : auto;
background : #27ae60;
}
.cssmenu ul{
list-style: none;
margin: 0;
padding: 0;
line-height: 1;
display: block;
zoom: 1;
}
.cssmenu ul li{
display: block;
padding: 0;
}
things mess up on enabling the float property in .cssmenu ul li .
Parent elements of floated elements do not expand to their children's size. Think of this like the children were position: absolute.
To force the parent element to encompass all of its floated children, add overflow: hidden to the parent. In your case, you would add this to .cssmenu:
.cssmenu {
overflow: hidden;
}
JSFiddle
As for the underlining, setting the width of the :before element to 100% makes the underline the same width as the a element. This is the width of the text.
Instead, you should add the :before element to the li element:
.cssmenu ul li:before {
...
}
.cssmenu ul li:hover:before {
...
}
Now 100% width means the width of the li element, which is the "full" width of a menu item.
Note: You'll also have to change some metrics of the :before element such as top, left, etc.
JSFiddle
Use
.cssmenu {
overflow: hidden;
}
Demo here
Are you trying to inline the navigation elements? Wondering what you're trying to accomplish, that may help us better answer your question. I'm a little unclear, but here goes nothing!
Here's my shot:
http://jsfiddle.net/jasonbelmonti/CYR7V/
Is this what you're looking to achieve?
This is the css I used:
#import url(http://fonts.googleapis.com/css?family=Open+Sans:700);
.cssmenu{
width : auto;
background : #27ae60;
overflow: hidden;
}
.cssmenu ul{
list-style: none;
margin: 0;
padding: 0;
width: 100%;
line-height: 1;
display: block;
zoom: 1;
}
.cssmenu ul li{
display: inline-block;
width: 33%;
padding-top: 15px;
padding-bottom: 17px;
}
.cssmenu ul li a{
display : block;
position : relative;
font-family: "Open Sans";
color : #fff;
text-decoration: none;
padding : 0 px;
text-transform: uppercase;
transition : all .3s;
font-size :14px;
}
.cssmenu ul li a span
{
padding-left: 15px;
}
.cssmenu ul li a:before{
content : ' ';
display : block;
height :3px;
width : 0px;
background : #2c3e50;
position : relative;
top : 30px;
left : -25px;
transition : all .3s;
}
.cssmenu ul li a:hover:before{
width : 100%;
left: 0;
}
.cssmenu ul li a:hover{
color : #34495e;
}
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 this HTML code:
<nav id="menu">
<ul>
<li>
Item1
Item1
</li>
<li>
Item2
Item2
</li>
</ul>
</nav>
Demo page
As you can notice, it's a menu with 2 links for each item. The menu is horizontal, and the aim is to hide the "alt" link when the item is not hovered and to show it when it is hovered.
Each <li> element is therefore a box with a specific height (34px) and each link has a height of 34px as well, so that the "alt" link is below the main link, and is hidden.
When the item is hovered, a negative top margin of 34px is applied to the main link, making the "alt" one appear.
But when "hovering out" the top margin of 0 is not really applied back by Google Chrome as you can notice on the demo page I made. Just hover several times on the links and you will notice that elements are not put back to their correct positions.
How can I solve that? I need to keep 2 links (main and "alt") for more complex reasons, the demo being simplified.
For your information, here is the CSS:
nav#menu {
background-color: #e9e9e9;
}
nav#menu > ul {
margin: 0;
height: 39px;
display: block;
list-style-type: none;
}
nav#menu > ul > li {
display: inline-block;
height: 34px;
overflow: hidden;
width: 200px;
}
nav#menu > ul > li > a {
display: block;
height: 34px;
line-height: 34px;
}
nav#menu > ul > li > a:first-child {
margin-top: 0;
}
nav#menu > ul > li:hover > a:first-child {
margin-top: -34px;
}
nav#menu > ul > li > a.alt {
color: white;
background-color: #8d8d8d;
}
Sorry for all the comments. I was trying to get it to work and just thinking out loud. Here is the solution you are looking for...
You need to change two of the styles.
/* add the overflow: hidden; to the end of this tag set */
nav#menu > ul { .... overflow: hidden; }
/* replace the inline-block with float:left;*/
nav#menu > ul > li { float:left; height: 34px; overflow: hidden; width: 200px; }
Here is the working link jsFiddle