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;
}
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.
I'm working on a navigation bar with a drop-down menu (will add another one later). When the drop-menu is pressed, it shifts all nav links to the right. Desired behavior is all nav links are static. I tried using fixed on the div with an absolute css on the li tags but I.E. would render the li tags outside of the parent div.
My current implementation is using float:left but this isn't producing expected results either. The drop-down menu is the one labeled "Solace". Any help or suggestions are appreciated. I have created a demo which illustrates my problem. http://jsfiddle.net/xbB4M/1/.
Also, a side-question. If this warrants a new post, just let me know, and I will open a new question. Whenever a user clicks the drop-down menu, how can I listen for the next mouse click to close the drop-down menu?
If you give your .menu class an absolute position it should stop the other menu items from sliding over to the right. As for your second question if you check the working example I added another click event handler for the menu items and if they are clicked it will close the menu.
Give this a try:
.menu {
margin-top:10px;
background-color:#17406B;
position: absolute;
}
Working Example: http://jsfiddle.net/fewds/xbB4M/5/
I have an odd problem with links on the following site in iOS:
http://www.bllink.net/aircraftindex.asp
Under the "Galleries" menu, tapping the links under the sub-menus (e.g. "Benny") does nothing. It looks as if Safari is going to navigate to the new page, but then it doesn't.
If you tap and hold, you have the option to open the link in a new tab, as expected, however.
Naturally, the site works fine on desktops.
The DIVs holding the links are NOT set to position:fixed, but to absolute.
Any ideas?
Get rid of javascript and use CSS to accomplish a dropdown menu.
This will keep your code much neater and easier to read and your website will be compatible with browsers that have javascript turned off.
You can do this by using the :hover selector in css.
1) So make a list with your menu items or a div containing divs.
2) Hide the submenu's in css by adding: display: none;
3) Use the hover selector to show them on hover. for example:
.menu .menubutton .submenubutton{
/* selects the div or li within the class menubutton within the class menu */
display: none; } .menu .menubutton:hover .submenubutton{
/* uses the hover selector on the menubutton, then shows the submenu it contains */
display: block; }
for an indepth explaination see this article on csswizardry or google for "css dropdown menu":
http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/
I am using the following solution to scroll very long menus in my dropdowns:
http://css-tricks.com/long-dropdowns-solution/
Is there any way to stop the menu's from scrolling and becoming any shorter once the last menu item has appeared? At the moment, they keep shrinking even when the menu has fully loaded. I would like to avoid that if possible.
I think your trying to say your actual menu list items are shrinking? I'm not exactly sure if your saying the whole menu itself shrinks or just the items itself.
Try giving the (Li)'s a height and see if that keeps them consistent. Example.
nav li:hover li {height:3em;}
or
nav li:hover ul a {height:3em;}
Let me know if that helps!
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/