I found an issue with .sub_menu code left:-; and transform:translateX(-%);,So I changed position to relative and re-positioned with the two codes above, It seemed to work but now the two sub menus i have are no longer Side-By-Side. What they do is separate by a few centimeters top:, Not sure what made this happen, Any help would be appreciated,Thanks
JSFiddle sub menu pops up when you hover over Gallery
.sub_menu {
display: none;
position:relative;
top:-60%;
left:-350%;
transform:translateX(-40%);
width: auto;
}
.sub_menu > li {
display:inline-block;
}
.sub_menu li a {
background:-webkit-linear-gradient(#77047e,#FF00FF);
background:-o-linear-gradient(#77047e,#FF00FF);
background:-moz-linear-gradient(#77047e,#FF00FF);
background:linear-gradient(#77047e,#FF00FF);
}
.sub_menu li a:hover {
background:#FF00FF;
top:1em;
}
From what I understand at taking a quick look is the sub.menus are odd. They currently have the style position: absolute, and that would make them all align in the same exact place. As you can see you are doing that here:
.sub_menu {
display:none;
position:absolute;
top:-37%;
left:-47%;
transform:translateX(-20%);
width:auto;
white-space:nowrap;
}
So instead a fix would most likely be using position: relative, and then aligning them from there. Also when working with a sub menu, it would help to have an ID on each element to align it correctly (Especially when aligning them vertically and horizontally).
Related
I'm looking to make a horizontal drop down menu much like the main menu from HowStuffWorks: http://home.howstuffworks.com/community-living
Notice how the submenu covers the full width of the horizontal main menu bar, rather than dropping down in vertical lists. And how the currently selected main menu item and sub menu items are highlighted. I would like those features, with the added bonus of showing the other sub menu lists when hovering over the other main menu items, please look at examples below:
Basically I want to combine the effect of showing different submenu lists as you hover over the links as in this one:
http://jsfiddle.net/SKNYC/
And also having the currently selected menu highlighted in a different colour, as in this one:
http://jsfiddle.net/pRT6S/
.full-width {
width: 100%;
}
.normal-width {
width: 1024px;
margin: 0 auto 0 auto;
}
.main-menu > li {
float:left;
list-style-type:none;
padding-right:30px;
}
.sub-menu {
display:none;
}
.sub-menu li {
float:left;
padding-right:30px;
}
.sub-menu li:hover ul {
float:left;
padding-right:30px;
background-color:green;
}
.main-menu li.active {
background-color:blue;
}
.main-menu > li.active .sub-menu {
display:block;
position:absolute;
left:0;
right:0;
background-color:blue;
}
Note that I'm very new to CSS/HTML, it would be nice to get some direction as to how to proceed. :)
The first jfiddle is modified from this code:
https://gist.github.com/jgoyon/3993263
The second and third jfiddle comes from someone's code in this thread:
CSS full-page-width horizontal menu and horizontal submenu
EDIT:
Another code that I spotted that is very similar to my solution is this one:
http://jsfiddle.net/U65eT/
but I'm not sure why when the hover over item1 and item2 doesn't work?
EDIT:
Current revision
http://jsfiddle.net/pRT6S/4/
It is almost correct, just has the problem of not showing the submenu when hovering over item1
How's this? Check the comments I made.
http://jsfiddle.net/pRT6S/3/
The main problem was needing to modify .main-menu, not .sub-menu, as seen below:
/*Not doing this right*/
.main-menu li:hover ul { /* This needs to be .main-menu, not .sub-menu! */
display: block;
/* float:left; */
position: absolute; /* better than float in this case */
padding-right:30px;
background-color:green;
left: 0; /* make sure everything hangs on the left */
}
Update: You can use the code you originally provided (that I wrongfully commented out), but modify it a bit my adding absolute positioning and z-indexes:
http://jsfiddle.net/pRT6S/5/
Here is my current jsfiddle for the navigation bar.
http://jsfiddle.net/EPh6j/28/
Please stretch the bar so it is a single line otherwise you will get mixed results.
The problem only occurs in ie9 as far as I know. What happens is when you hover over one of the main links the drop down comes down. However, as soon as the drop down passes the bottom of the main menu it turns invisible. What is even more confusing is that the ul border for the submenu shows but not the elements.
Here is an example of what I mean:
Notice how it is visible and then disappears past the bottom.
http://i.imgur.com/jXsoE.png
I did the above when I was trying to figure out my problem to start. In the jsfiddle, it moves all the way down as it should and is thus completely blank.
I'm completely stumped on getting this one to work.
My CSS:
.menu li li {
float:none;
position: relative;
}
.menu li ul {
left:0;
position:absolute;
top:0;
visibility:hidden;
}
.menu li:hover > ul {
top:100%;
visibility:visible ;
}
Suggestions?
I suspected a z-index issue, so I stripped them all from your fiddle. Seems to have fixed it.
BTW, "sponsorships". ;-)
I am trying to make a navigation bar with <nav> in HTML5 with a simple text and 3 links. This is pretty basic, but the text of my links gets mixed up and I don't know why.
↪ See my code at JSFiddle
You need to float your LI, not your UL. No need for position:absolute. If you want to move the menu to the right, you can float it as well, or use margin:left. Just be sure to clear your floats after.
See my tutorial: I Love Lists
it was because of the position:absolute and position:relative parts in your css.
Try this :
nav {
width:100%;
height:181px;
display: block;
background: url('http://i.imgur.com/JrTUv.png') top no-repeat;
margin-top:30px;
}
nav ul {
float:right;
list-style:none;
}
nav ul li {
display:inline-block;
}
In this question, I am not going to ask "How" to horizontally center an unordered list, because there are about eleventy thousand resources already on the internet for that.
Instead, I'd liked to ask the "WHY" part of it.
More precisely, why do we do this
ul {
position:relative;
left:50%;
}
ul > li {
position:relative;
right: 50%;
}
instead of this:
ul {
position:relative;
left:25%;
}
When both seem to do the trick.
Any thoughts?
The reason is, because the first method centers the ul in every case - indepentend on how many child li it has.
The second solution places the ul 25% to the right which will work in a very special case, when the widht of the li is just right to occupy 50% of the total width but breaks in any other case.
using left on the parent and right on the child is a very common practice to center a child with dynamic dimensions(width) which is the case when dealing with dynamic content.
In some cases, text-align:center; works too, but fails when you have to use absolute positioning.
See an example fiddle here.
I am not using any of these solutions. Check this http://jsfiddle.net/yz7jF/ .
Write like this:
ul {
display:inline-block;
*display:inline;/*For IE7*/
*zoom:1;/*For IE7*/
}
li{
float:left;
text-align:left;
}
.anyParent{
text-align:center;
}
I am trying to make a horizontal navigation menu , My menu items (li) elements are in shape of circle here is the demo , my question is the text of the link is appearing on top , how do I make it to appear on center , will that be possible , please let me know that , any suggestions are welcome.
Thanks
Only block items can use margins and padding. Anchor tags are inline elements. You need to force them to be block elements in your CSS:
#menu ul li a
{
text-decoration:none;
display:block;
padding:30px 0 0 0;
}
And if text flows over 2 lines, you can use this to keep it in the middle:
#menu ul li a
{
display:table-cell;
vertical-align:middle;
height:85px;
width:35px;
}
And the answer to your second question:
#menu ul li:hover
{
background:red;
}
To answer your second question posted in response to Diodeus:
If you want to use pure css3 hover effect, you'll want to do something similar to this by using the :hover selector:
#menu ul li a:hover {
background-color: #000000;
}
For nice effects, use the CSS3 transition property which you can see here:
http://www.w3schools.com/css3/css3_transitions.asp
Rather than messing with vertical align, set the line-height equal to the height/width of the circle.
Your issue with the red background not taking was that the specificity of the selector it was declared in: li:hover was not high enough to overcome the original bg color declaration in #menu ul li.
See here: http://jsfiddle.net/Az8cG/11/ for both fixes.
I just played with your fiddle. What i did is just made "li" display:inline-block & changed li:hover to #menu li:hover.
#menu ul li
{
float:left;
display:inline-block;
padding:40px 30px;
background-color:slategray;
margin:0 20px 0 0;
height:17px;
-webkit-border-radius:50px;
}
#menu li:hover
{
-webkit-box-shadow:0 0 50px 12px #69CDF5;
background:#cb2326;
}
Please check the fiddle here: http://jsfiddle.net/Az8cG/15/