was wondering if there was a better way to handle what I'm trying to do. I've made a basic drop-down navigation menu where the menu bars are li and class elements with a set height with the overflow property set to hidden, which then animate in height to reveal the 'drop down' portion of the animation when hovered over with the mouse. I found however that other web page elements (like main content) would then be pushed around and re-positioned when the menu elements collided with them. I stop-gap fixed this by making the affected elements absolute positioning, but I can't help but feel there's a better, more effective way of fixing this.
Is there any way to make it so the navigation elements for lack of better word get 'ignored' positioning-wise?
Here it is in practice - the first 'article' area has been made to be absolute positioned - http://gamearticlesite.bbdesigns.ca/index.html
the code:
Jquery
//When mouse rolls over
$("li.extend").mouseover(function(){
$(this).stop().animate({height:'250px'},{queue:false, duration:500})
});
//When mouse is removed
$("li.extend").mouseout(function(){
$(this).stop().animate({height:'35px'},{queue:false, duration:500})
});
CSS:
#headerNav ul{
list-style-type: none;
color:#efefef;
margin:0;
margin-left:75px;
padding:0;
}
#headerNav ul li{
width:125px;
height:35px;
float:left;
color:#efefef;
text-align:center;
margin-left:10px;
margin-right:10px;
overflow:hidden;
}
The correct answer was that yes, Absolute Positioning is the way to solve this, but to use it on the navigation menu. In the example posted, on the ul element, not the individual li elements that would animate as that could cause issues with positioning of the li elements within the ul element.
Setting the position to position:absolute for the ul and giving a z-index property to make sure it's 'on top' of the elements it clashes with made everything work out just fine.
Use
float:left
or
position:absolute
Related
I'm working on some CSS for a navigation bar, and I need to use a max-height and overflow-y: scroll for the dropdown in order to make sure it will fit on the page. However, whenever I set the overflow-y property to scroll, it seems to automatically enforce that overflow-x must also be set to scroll, and as a result, submenus become hidden.
See the jsfiddle below for a working example
https://jsfiddle.net/5eyveyfz/
EDIT: I should clarify the use of my fiddle. The issue arises when you hover over the menu item titled "SubMenu 1" which shows the submenu in question. The expected behavior is that this submenu is visible without a scrollbar, but instead its behaving as though overflow-x was set to scroll
Changing these values will show the dropdown directly below the submenu heading:
#menu > ul {
overflow-y:scroll;
overflow-x:hidden;
max-height:300px;
}
.submenu {
position:relative;
display: none;
left:0;
top:0;
}
If you want to keep the left position you will need to make the container wider or change it to display:inline-block; without a width set for it to adjust to the size of the content.
While it is not doing this in your fiddle - is it possible the data you are populating in your actual build is forcing the table to overflow its width?
If so, change the container to overflow-x:hidden; in order to prevent the horizontal scroll bar.
I have a set of li items in an ul that looks like this. When the browser is >1440px I want the list to be displayed as display: inline-block. When it's <1440px I want it to be the default (I'm not really sure what it's called, but stacking vertically).
Is there a method, either CSS or Javascript, that will allow the li elements to smoothly move from one the horizontal position to the vertical position rather than teleporting?
I've got an issue with one of my designs at the moment, i'm creating a hover button using the :hover CSS element and then ensuring that it stays the same using the :active element.
However, both the :hover and :active have padding specified in their respective CSS rules which creates an issue when you click on the button whilst still hovering over it - the padding stacks and the button is completely misplaced.
What can I do to avoid this?
Is this what you mean (click the div to see hover/active).
HTML:
<div class="a">Some content</div>
CSS:
.a{
display:block;
padding:5px;
}
.a:hover{
padding:5px;
background:red;
}
.a:active{
padding:5px;
background:blue;
}
Example: http://jsfiddle.net/justincook/JsWCF/
I have a pure css/html dropdown menu, the code for which I pretty much stole from csswizardry here. It works like a charm; the only problem is that, if that menu item is on the far right side of the page, the dropdown items are half-off the page.
I'm working on a javascript solution; is there a way to fix this problem using just CSS?
EDIT: I'm looking for the dropdown content to move to the left so that the dropdown items are fully visible.
Looking at the code you based it on, instead of
#nav li:hover ul { left:0; }
...you'd want:
#nav li:hover ul { left:auto; right:0; }
Looks like you may need to adjust the right margin of #nav li if you're using the same CSS as csswizardry.
Page - http://blu-eye.com/index.html - contains suckerfish menu which is displaying correctly on the rest of the site, except for this page. The menu items are hidden behind the content below.
The content below it contains a javascript slider with image and text. I've tried changing the z-indexes on majority of elements, but still having no luck.
It only occurs in IE (6 and 7).
Please help!
The drama you have is the use of relative positioned elements, which reset the z-order context on < IE8.
Specifically on div#header, remove the position relative. then on div#cat_528463_divs > ul > li set a z-index (of 1000 for eg). This will fix the nav issue from tucking in under the JS slider – however it will screw up the look of the rest of the top section, because they are absolutely positioning the logo and some other images. So that is going to need to be rebuilt.
IE has a slightly different stacking order of elements so just setting something with a different z-index will not necessarily move it above.
Taking your starting point as your wrapper, add position:relative to it and then work down into your HTML. If you imagine that at your start point, then you need to get your menu div and your slider div to at least the same 'depth'.
You might find adding position:relative to #content as well might help.
You can then change the z-indexes.
Add z-index:100 to the submenu's li's
#nav_528463 li ul li {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent none repeat scroll 0 0;
float:none;
margin:0;
padding:0;
z-index:100
}
I found this bit of jQuery very handy for your problem:
http://www.vancelucas.com/blog/fixing-ie7-z-index-issues-with-jquery/