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/
Related
I want to create mobile menu. This same menu I want to use in desktop amd mobile screen but style is a little bit diffrent. In mobile screen menu is hide but hamburger menu is display. When user click the cross in menu, this's going to close. It's very simple. On desktop screen menu is display all the time. Code look like this:
$('.hamburgermenu').on('click', function(){
$('.menu').fadeIn();
});
$('.close').on('click', function(){
$('.menu').fadeOut();
});
It works correctly but css manage to visibility too. I use #media to hide and display menu
#media(min-width: 1200px){
.menu{
position: relative;
display: block;
}
}
And this is my problem. If user close the menu (click on .close, menu doesn't display after change size of browser. For example - I'm testing my website in small window and I close the menu. After I open fullsize window, the menu won't to display.
The problem is when you use fadeOut() on an element, the display of that element remains hide(look at your console and check the inline style of this element).
use $(window).resize(function() {}) to remove inline styles affected by fadeOut() in sizes that you consider as media breakpoint.
One way would be to detect when the user changes the window size, e.g.:
$(window).resize(function(d){
if (window.innerWidth > 1200) {
$('.menu').fadeIn();
}
})
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 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'm working with a CMS that only allows links in the navigation. There is one instance where I have a submenu but there is no page attached. See below.
menu1
submenu
item1
item2
menu2
menu3
All three top level items (menu 1,2,3) must be clickable + hover. "Submenu" can't be clickable but the user needs to hover in order to view item1 and item2.
This of course wouldn't be an issue if not for the restrictions in the CMS. If I add the following CSS then I can't click OR hover.
.subMenu {
pointer-events: none;
cursor: default;
}
Try My unclickable but hoverable link. Indicating only the "#" as a link should do the trick if your CMS doesn't allow you to specify onclick attributes.
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;
}