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?
Related
I have a very simple page with the standard bootstrap nav which collapses when on small screen. Right below the nav I have a div which I do not want to show if the li has CSS class dropdown open. Is it possible to do this via CSS only or do I have to go down the jQuery/Javascript route?
.navbar-nav > li.dropdown.open {
/*How can I hide the div class="inner-details" here*/
}
If the dropdown element is not wrapped with another one, you could possibly use the adjecent sibling selector like this:
li.dropdown.open + .inner-details {
display: none;
}
Otherwise you could do tricks with negative margin and z-index, effectively sliding content from below the dropdown behind it, but really this will lead to messy layout.
There's no evil in using JavaScript. Bootstrap itself uses it for the navigation if I remember correctly.
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
How to achive that following menu act normaly like dropline, but last sublevel to be dropdown instead dropline?
Tnx
To make sure I understand the question, are you wanting the sub-drop-downs to display in a vertical list instead of horizontally? If so, try adding this to your CSS:
.droplinebar > ul > li > ul > li > ul > li
{
float: left;
clear: both;
}
ADDENDUM (to get the menus lined up properly):
I haven't tested this, but see if changing line 16 to the following does the trick:
$subul.css({left:$curobj.position().left, top:this._dimensions.h})
You may need to do something like the above on $targetul as well.
2nd ADDENDUM
It's a bit dirty, but you can always give the sub-ul's a unique id, and them use css to line then up manually.
http://jsfiddle.net/DxpMJ/11/
In that example, I gave a unique id to the JavaScript > Traveling 4 menu, and manually set the margin-left and overrode the width with the !important trick (which you should look up if you're not familiar with it - very useful when javascript plugins are setting CSS styles without your knowledge). If you don't mind manually adding css rules for all of the menus you need to be vertical, I think this would work.
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/
Can someone please provide insight into how I can replicate the functionality shown in this example.
Specifically, the navigation bar (first tab) > Watches. The user can hover over the link and a full screen width dropdown is displayed and hides after either when a user clicks on a link or mouses out. I am creating a similar menu type drop-down and need this to function across all platforms and browsers, including ie7.
Appreciate the insight.
Nothing terribly fancy there, or that would require modern browsers, just using typical :hover psuedo-class to show the the menus, which are initially hidden.
There is a wrapper #navigation that sets position: relative (this allows children to be absolutely positioned relative to it). Then there is a <nav> tag inside there used to center. Then inside of that is a ul.level-1 with li's that are display: inline which are the main menu items. Then within those are the menus you are fond of, which are absolutely positioned down a bit and are 100% width.
Then the bit that displays the menu:
// level two menu hidden by default
div.level-2 {
display: none;
}
// show level-2 when hovering parent menu item
ul.level-1 li:hover div.level-2 {
display: block;
}