Navbar remove spacing - CSS or JavaScript? - javascript

So I have this navbar I'm making; I have a Jsfiddle to demonstrate. If you hover over an element, the sublist appears, but if you look carefully, its left edge is just 1 pixel in front of the navbar element that summoned it.
Is there any CSS rule I can add to get rid of this i.e. move the sublist back a pixel? I know it is possible to achieve this with JS (get every navbar element, calculate its distance from the left, take its sublist and give it a left value of one less than that of the element), but for now I'd like to avoid it for now.
I'd prefer a CSS solution if possible, but of course it it isn't, please tell me and, if you can, provide a JS alternative.

jus add margin-left: -1px; to your #nav li:hover ul to push it 1 pixel to the left.
see it working here.

Negative margins to the rescue
http://jsfiddle.net/pZy8V/4/
#nav li:hover ul {
display: block;
position: absolute;
margin: 0 0 0 -1px; /* margin: 0; */
list-style: none;
padding: 0;
}
#nav li:hover li {
float: none;
}

If you remove all of your borders the problem goes away. So the answer may lie in redesigning your HTML/CSS border usage
See this revided JSFiddle
If you just want a quick and dirty fix you can add the following to your original CSS
#nav li {
float: left;
position:relative;
left:-1px;
}

Related

dropdown menu doesn't stay still after mouse hover

I am using the veggie theme on Wordpress and have added subcategories to the primary menu, which appear as a dropdown list with mouse hover. However, with mouse out the dropdown disappears. Any ideas on how I can fix it?
The website is http://iceyog.gr/ and the menu element is "FROZEN YOGURT"
Thanks!
there is a few px of space above the ul element (dropdown).
In the style.css file on line 2207 there is this code:
.main-navigation ul ul {
background: white;
float: left;
margin-left: -0.875em;
padding: 0 0.875em;
position: absolute;
top: 1.75em; // (Remove this line to fix the issue)
left: -999em;
text-align: left;
width: 180px;
z-index: 99999;
}
I think it's because the hover event is set on the a element instead of the li element.
Since the ul child group is in the li element, when you hover the li you can still see the dropdown when you hover it instead of hover the a element which is not hover when you hover the dropdown child menu.
Here's a basic example to explain my thoughts

how do I remove margin-top only for first second level sub menu of every main menu

I need help in margin problem. I am using a accordion menu like this: http://jsfiddle.net/knovice/ppdp1w04/2/
and there is margin-top for every second level sub menu e.g if you click Design then its sub menus are having margin-top.
I am trying to remove margin-top of only first second level sub menu. That should gets apply to every first second level sub menu of my accordion menu.
I tried this below code but its not working.
#dhtmlgoodies_slidedown_menu > .slMenuItem_depth2 > :first-child { margin-top: 0 ;}
How should I do that?
Many thanks in advance.
NOTE: I am using external js which adds the classes on load. (pointed out by Banana in the comment section)
I did manage to make it work as:
.slideMenuDiv2 > ul > li:first-child a {
margin-top: 0 !important;
}
EDIT:
Or, to run away from !important directive, you need to drop dhtmlgoodies_slidedown_menu bit from your dhtmlgoodies_slidedown_menu .slMenuItem_depth2 selector to make it:
.slMenuItem_depth2 { /* Sub menu items */
margin-top:1px;
background-color: rgb(204, 204, 204);
margin-top: 1px;
padding-left: 15px;
color: #0065AA;
}
so you could have:
.slideMenuDiv2 > ul > li:first-child a {
margin-top: 0;
}
which I like much more
JSFiddle is here
Please check jsfiddle.
If i understood your requirement correctly. I have put border to second level first element border in red color.
You can apply required style to element
ul li > ul li:first-child{
border:1px solid red;
}

Correct a menu hover display

I have a website in which I have a menu that opens a sub-menu while you hover it. But it has a little problem: the submenu is a few pixels under the menu item that displays it.
Here is the website:
https://www.redlineaviation.com/
The problem is when you hover "What type of plane do you have?" and you try to select an item, if you move your mouse fast then there's no problem, but if you move it a little slow then you'll see the problem.
The menu is positioned a fixed number of pixels below the parent li.
Because there is a slight gap, the hover state is removed when you 'hover' over the gap.
Just change the top position from the fixed value to 100%
.menu li:hover ul, .menu li.sfHover ul {
left: 0;
top: 100%; /* always in place regardless of parent height */
z-index: 9;
}
Since you show submenu on :hover you should take care of the gap between menu and submenu, because obviously when mouse cursor gets in the gap menu is no longer in :hover state and submenu hides. It's very easy to fix. Decrease top position a little to get rid of the gap, but make a visial "new" gap with padding-top:
.menu li:hover ul, .menu li.sfHover ul {
left: 0;
top: 28px; /* make top smaller to remove the gap */
z-index: 9;
padding-top: 8px; /* and make gap again with padding-top */
}
UPD: As noted by #Paulie_D setting top position to 100% makes more sense, no magic numbers. However padding-top is needed to make a nice space between menu and submenu. So combination of two answers make it ideal :)

Make space between list line

So, I have a list of items which are displayed inline-block. What I'ld like is when you click on a cell, the lines under it go down. Problem is, simply adding a margin-bottom won't work, like showed with this fiddle.
See, the one which should be opened is left alone on her line. What I'd like is something like that:
Any idea?
The default alignment of inline-block elements is baseline, meaning tall and short items will align the bottom of the text line. If you give the <li> elements vertical-align: top, i believe you get what you want;
li {
list-style-type: none;
display: inline-block;
width: 20px;
height: 20px;
background-color: red;
margin-top: 4px;
vertical-align: top; /* added */
}
http://jsfiddle.net/j93H5/3/
you need to add vertical alignment for your margin-bottom and then a margin-top to vertically space your lis:
vertical-align: top;
margin-top: 4px;
http://jsfiddle.net/j93H5/1/
as #Bergi said, splitting into multiple lists is probably the least sloppy way to do this and most likely the more appropriate method, but we don't really know the context.
You can use pseudo-elements to push elements out of the way:
li.space:after {
content: ' ';
display: inline-block;
height: 20px;
}
View jsfiddle

jQuery SlideDown and Border - Strange jump

When I use jQuery's SlideDown feature on an element that has a border, I do have a problem with a strange jump.
Here's a fiddle to demonstrate what I mean: http://jsfiddle.net/Complexity/um9xj/
I've placed the duration on 700 just for testing purposes
$(element).slideDown({
duration: 700
}).parent().addClass("active");
When you click the new items button you see the behaviour that I mean.
I hope that there is a very simple solution to it.
Try this:
Demo
It looks like as this is being animated down, the margin-top is applied and it jumps down a pixel.
Edit - the left border issue looks to be because you're positioning the menucontents element left:-4px which puts it outside of the menu element. This isn't an issue until you do the slideDown() animation and it automatically sets menu to overflow:hidden a simple fix is to move the positioning to the parent element.
CSS:
.icon .menu {
box-shadow: 0 0 0 #888;
display: none;
left:0px;
top: 60px;
/* margin-top:-1px; */
}
.menucontents {
//other styles
/* left: -4px */
}
The jQuery slideUp and slideDown animations animate the height of the content box, the margin-top, margin-bottom, padding-top, and padding-bottom. Your margin-top: -1px was getting animated but can only be 1 or 0, which is why it was jumping halfway through. Getting rid of margin-top will fix this. If you would like to avoid changing your CSS, you can override the margin editing like this:
$(element).slideDown({
duration: 700,
progress: function(){$(element).css('marginTop', '-1px')}
}).parent().addClass("active");
The progress function is called each frame of the animation and will overwrite jQuery's changes to your margin
EDIT: I've tried experimenting with overwriting overflow, but for reasons I can't determine, it isn't rendering properly. I recommend a CSS edit for your second problem. Since you want to position the menu, just use the outer-most div to modify your positioning and let the inner divs only worry about content:
.icon .menu {
box-shadow: 0 0 0 #888;
display: none;
left: 0;
margin-top: -1px;
}
.menucontents {
padding: 1px;
padding-left: 2px;
z-index: 100;
background-color: white;
/* left: -4px; *
...

Categories