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"...
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.
Here is the entire code for my menu. I'm not posting it here again for clarity.
Some code explanation:
id="onlink" means the link is clicked. The page is active.
What I want is when MENU is onlink, its entire submenu (here both: submenu and submenu2) should become visible too (note we have not clicked any particular submenu).
Is it possible to establish such dependency in pure css?
So far the submenu only pops up on menu hover and disappears after it.
I think you are looking to get the submenus to be hovered as well even after the MENU is not ONLINK. Here is a solution. Hope this is what you are looking for. I used the opacity css property.
#menu li ul.sub-menu {
opacity: 0;
position:absolute;
}
#menu li ul.sub-menu a {
border: none;
background: none;
display: block;
}
#menu li:hover .sub-menu {
opacity:1;
width: 150px;
text-align: center;
}
here is a fiddle http://jsfiddle.net/Y8pnm/2/
Just expand your selector to include every .sub-menu which is after #onlink using the General sibling selector (~).
#menu li:hover .sub-menu,
#menu #onlink ~ .sub-menu {
display:block;
width: 150px;
text-align: center;
}
jsFiddle Demo
You could make MENU and it's submenu share the same class and then use
.class:hover {
// Your CSS code
}
For a website I need to make a css/html menu like this:
As you can see there some yellow borders to the left and also to the right of the menu links that fill up the availabe width. Also there is a background image underneath the menu with a gradient in it.
Does somebody has any idee on how to achive this menu style?
Code so far:
<div id="submenu">
<ul>
<li class="selected">
Wirtschaft<div></div>
<ul>
<li>Kurzeinführung Wirtschaft</li>
<li>Wirtschaftstheorie</li>
<li>Arbeitsmarkt</li>
<li class="selected">Geld- und Konjunktur</li>
<li>Staatsfinanzen</li>
<li>Wirtschaft: alle Beiträge</li>
</ul>
</li>
</ul>
</div>
#submenu {
width: 225px;
}
#submenu ul {
list-style-type: none;
}
#submenu ul li a {
border-left: 6px solid transparent;
padding-left: 4px;
display: block;
margin-bottom: 15px;
color: #222624;
font-size: 17px;
}
#submenu ul li a:hover,
#submenu ul li.selected > a {
border-left: 6px solid #CAB106;
}
#submenu ul li ul li a {
margin-bottom: 7px;
font-size: 14px;
}
EDIT: the gradient in the picture actually resides in the body and i think it can not be done with pure css so it has to be a background image.
EDIT2: the solution provided by PeterVR works great! unfortunately i am stuck with another list with the same style but without the blocks ending complete when the ul ends. any idea on how to achive this with the code provided by PeterVR?
something like this perhaps: http://jsfiddle.net/AXze7/1/
I changed a few thing in your css:
- set the main ul to overflow hidden
- removed the display block from your <a> tags
- set the <a> tags to position relative, for the following to work:
#submenu ul li a:hover:after,
#submenu ul li.selected > a:after {
background: #CAB106;
content: ' ';
display: block;
height: 100%;
width: 225px;
margin-left: 4px;
position: absolute;
left: 100%;
top: 0;
}
This adds the green blocks after the anchor tags.
EDIT:
I updated my fiddle for your second case: http://jsfiddle.net/AXze7/2/
A short overview of what changed:
I removed the overflow:hidden from the ul, and put it on the li
I tweaked the styling and played with the pixels to make it look a bit more like your screenshot. Comparing this with the previous example should help you understand how to achieve what.
I added an extra pseudo-class :before for the arrow icon that appears to change on hover/select.
The code looks like this:
#submenu ul li a:before,
#submenu ul li.selected > a:before {
background: #fcc; /* put your black arrow image here */
content: ' ';
display: block;
height: 12px;
width: 12px;
margin-left: 2px;
position: absolute;
left: -18px;
top: 2px;
}
#submenu ul li a:hover:before,
#submenu ul li.selected > a:before {
background: red; /* put your colored arraw image here */
}
check this demo in js fiddle.make an image one pixel height with the grenadine shown on the picture , and replace #eee with that image.
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.