I created a navigation that has a horizontal submenu. For some reason when I rollover over submenu the top nav is moving.
http://jsfiddle.net/pgorski/2kBru/ - Sub menu is located on the product link.
I search the site but could not find the answer.
Add border: 1px solid transparent; to your links
DEMO
It's because of your border set to your a tag. Remember that each border will produce 1px more over the original tag you used. So the tab when you hover your mouse on will be bigger than the original tab. Try removing the border and test it.
Related
Is it possible to disable button moving after clicking on it ?
button
{
background:none;
border:0px;
}
I want button to seem like navigation bar item and need to disable animation during clicking the button.
The animation of a button is caused by the border or outline of your button so if you specify a constant border and remove the outline, then no animation will occur.
button {
outline: none;
border: solid 1px #c5c5c5;
}
You may need to add !important to override click styles
I also was looking to solve this issue and found that it was the padding that was making the button "animate". I had buttons with no background though so you may have to implement #user3481932's answer of adjusting the border and outline styles as well.
I have given a right-border (1px solid #000) to menu1 here and a left-border to menu2.
The problem is that that way the dropdown menu takes on the attributes of the main menu and has only a right border.
How can I
1) have no border at all on the dropdown menu?
2) have the dropdown menu with borders? (top, left, right and bottom)
Here is the menu: http://jsbin.com/tifuhute/30/
You can use jQuery to change the border functionality. I would suggest you to use the addclass function and removeclass function in jQuery.
Learn how to use them below:
http://www.w3schools.com/JQuery/html_addclass.asp
http://www.w3schools.com/jquery/html_removeclass.asp
1: Since it appears the links are the ones with the border, you can add this css rule to the menu1 so that the links in the dropdown menus do not have the border:
.menu1 ul a{
border: none;
}
2: I'm not sure what you want. If you want the whole dropdown menu with borders, you can add this css rule, for example:
.menu1 ul{
border: 1px black solid;
}
I tried these css rules and they appear to be working fine
I've created this hexagonal navigation to fit within a website.
http://www.flickr.com/photos/14577801#N00/11202239254/
I'm wanting to know what would be the best way to go about creating the structure of the navigation in html and css. Where the links are within the white hexagons, I would like hovering over these links to change the white background to a colour. I've tried to do this with using background images, but haven't quite got there. The surrounding coloured hexagons I've been using as a whole background image for the navigation.
I found this on the web: http://jtauber.github.io/articles/css-hexagon.html , which I think could be great to use, but I thought there must be a way to use background images.
Thanks, Tim.
The color of an element (in this case, a hexagon) can be changed on hover with css. If we add this to the style properties in your css-hexagon tutorial:
.hex:hover {
background-color: blue;
}
.hex:hover:before {
border-bottom: 30px solid blue;
}
.hex:hover:after {
border-top: 30px solid blue;
}
The hexagon will change color when the cursor hovers over it, which you can see in this jsfiddle.
You can find good documentation of the CSS :hover pseudo-class here: https://developer.mozilla.org/en-US/docs/Web/CSS/:hover
I have a blog which is hosted at blogger.google.com.Recently i encountered a problem with the dropdown menu called "Categories". The children elements(sub menu items) auto disappear just when i move my cursor over them. I have tried the other answers to similar questions like this but they were not of great help in my case. I just want the dropdown elements to remain at their places when i move my mouse over them so that i can select them.
Can anyone please check the problem?
My website link is http://www.techtreck.in
Try to go to the Categories tab and you will see what exactly i am saying.
Many thanx in advance..
..hope to get a reply soon !!
There is a hidden gap between you main menu and sub menu.Inspecting you css with firebug, I found this in your code :
#top li ul {
background: none repeat scroll 0 0 #111111;
margin-top: 20px;
padding: 5px 0 3px;
width: 187px;
}
Now margin-top: 20px; is too far from main menu. So change it to:
#top li ul {
background: none repeat scroll 0 0 #111111;
margin-top: 14px;
padding: 5px 0 3px;
width: 187px;
}
And it will work fine.
If you move your mouse quick enough it works :P
But it looks like it is due to the gap between the categories and the actual drop down, when you move your mouse down, it goes in the gap so it no longer triggers the onmouseover event, hiding the drop down.
You should move the position of the dropdown up higher, so that it is perfectly align with the categories button.
The gap between the main menu and the submenu is indeed what causes the problem. #kakarott solutions is also what i would do, it is by far the easiest solution. If however the gap is there by design, you could still achieve the desired result by playing with your css. Something like this should do the trick:
remove the background color of the sub ul to make it transparent
change the margins of the sub ul into paddings
change the margins of the sub li into padding as well
set the background color that was on the sub ul on the sub li
add the padding that was on the sub ul to the corresponding padding of the sub li
(I did not test this, but it should do the trick i think, if i did not forget anything)
What this does is make the nested ul transparent and overlapping the parent li. This way the hover state remains triggered when you move the mouse onto the submenu. Visualy there should be no changes.
I am working on a navigation which can be seen here: http://jsfiddle.net/ybvF4/
I'm sure it is against policy to ask two questions in one but my fear is that if I do the solutions may not work together.
The two things I'd like to achieve are:
when the drop down menu is hovered I'd like the title line items ("sui generis" and "reclaimed wood") to have a green background, as they do now, but that fills up to the height of the solid outline that surrounds the navigation.
When hovered I'd like the text in the title list item elements to be white, without losing the effect of the current gray color hover state of the sub line items in the list.
I hope I have made this clear it's pretty tricky to describe in text, please see the jsfiddle link
thanks for any help
when the drop down menu is hovered I'd like the title line items ("sui
generis" and "reclaimed wood") to have a green background, as they do
now, but that fills up to the height of the solid outline that
surrounds the navigation.
Remove this:
nav .navigation {
padding-bottom: 5px;
padding-top: 5px;
}
Then, on .navigation li a, add display: block to allow the padding: 5px; to work as expected.
http://jsfiddle.net/thirtydot/ybvF4/1/
When hovered I'd like the text in the title list item elements to be
white, without losing the effect of the current gray color hover state
of the sub line items in the list.
Add this:
.navigation > li:hover > a {
color: #fff;
}
http://jsfiddle.net/thirtydot/ybvF4/3/
Of course, then the menu items that don't have a submenu have a white background and white text on hover. I assume that's intentional due to the last rule in your CSS.