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.
Related
I'm pretty much losing my mind over this. I have a bootstrap navbar which i like to style colors and etc myself. so I changed the link colors of the dropdown menu navbar using this code
.navbar .navbar-nav .dropdown-menu li a {
color:white;
}
it works fine so if i have menu item such as
Menu Item
sub menu item
sub menu item turns to color white.
now the problem starts here.
If i make the screen smaller to collapse the navigation bar. dropdown-menu link colors stay as the default so i figured bootstrap is using a media query for that and no matter what i tried it didn't work. same technique won't work.
#media (max-width:767px){
.navbar .navbar-nav .dropdown-menu li a {
color:red;
}
}
any help is greatly appreciated. I can do this using jquery but i really want to use css for this.
Answer to the question was that you have to target your classes after their breakpoints, I understand bootstrap having different classes in their breakpoints but having a different color and background colors on li elements can be very annyoing. so use a #media query to target whatever class is desired at that breakpoint
I am making the navigation bar for a website, and I want to add nice effects to it. Now there is a dropdown menu with submenu's, and I want those submenu's to slide in. But for some reason it doesn't show the background when animating, and the text goes on top of the border next to it. Here is a link to what it looks like. There is something weird happening as well when hovering over multiple times.
for some reason I have to accompany links to jsfiddle.net with code, so here it is.
You missed setting the color for the the #parnavdrop ul li. JSFiddle
#parnavdrop ul li {
background-color: #41D4CF;
}
Actually the issue is you have mentioned background-color to inherit.
.nav ul #navdrop #subnavdrop{
background-color:inherit;
}
So it is inheriting background color from its parent which is causing the issue.
So the following code change can also resolve the issue.
.nav ul #navdrop #subnavdrop{
background-color:#41D4CF;
}
Sometimes just because of these stop() functions JS functionality is not working properly
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 have a page which has 6 block menu choices and when you click one (e.g. '4') it shows block 4 content in a DIV opposite and will show the block as selected with an arrow.
When you click another block (e.g. '1') it will unselect 4 and then select 1 displaying block 1's content in the DIV.
I'm looking for the best script to do this in JS or jQuery. I'm guessing I could build the blocks as a listed menu and when selected, the CSS will display an image with the arrow.
Thanks
Update: Here's a mockup of what it will look like:
Another option instead of building yourself or jQueryUI tabs, I would prefer jQuery Tools Tabs:
http://flowplayer.org/tools/tabs/
They can be easily customized to your situation with some CSS adjustments:
http://flowplayer.org/tools/demos/tabs/skins.html
(just use some floats and width changes here to get what you're asking for, where XXX+YYY == width of wrapper)
#panes { width:XXXpx; float:right; }
#nav { width:YYYpx; }
#nav ul { width:YYYpx; float:left; margin:0; padding:0; }
#nav ul li { width:YYYpx; display:block; margin:0; padding:0; } /* no float! */
This is really well implemented in jQuery UI, which has a "tabs" feature.
You could use jQuery UI Tabs and opt to put the selectable options either along the top or along the side and it would behave just like you say you need.
http://jqueryui.com/
Demo of tabs is here...
http://jqueryui.com/demos/tabs/
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;
}