See an example of what I'm working on at a CodePen or BootPly.
The issue that I am coming across is when "Publisher" is clicked, then clicked again, the hover effect stays on when the mouse is moved off to select another item.
My question is: what causes this, and how can I go about just having the hover effect only active when hovering, and not staying active after a toggle on & off then hover on another item?
Please kindly redirect me to another Q/A if this has been solved before.
<div class="dropdown">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display:block;position:static;margin-bottom:5px;">
<li class="dropdown">
<a class="dropdown-toggle" id="dPublisher" data-toggle="dropdown"
role="button" data-target="#" href="publisher.php">PUBLISHER<b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledbyid="dPublisher">
<li>E-Editions</li>
<li>Digital Archive</li>
</ul>
</li>
<li>BLOG</li>
</ul>
</div>
The style is set both on :focus and :hover in Bootstrap. You can change it your self by either editing the Bootstrap source, or overriding it with a more specific selector.
#dPublisher:focus:not(:hover) {
background: white;
color: black;
}
demo
This reads as "when #dPublisher is focused but not hovered, change the background and text color".
Browser compatibility is Chrome, Firefox, IE9, Opera 9.5, and Safari 3.2. On unsupported browsers, it'll remain how it is currently.
If you want it to only disable the focus style when the dropdown is closed, we can make it a little more specific.
.dropdown:not(.open) > #dPublisher:focus:not(:hover) {
background: white;
color: black;
}
demo
Related
I have a dropdown menu that currently displays the dropdown unordered list on hover, which are lists of links. Hover is problematic for users and I want to change the to 'click' or 'toggle'. Here is the code currently in the site:
$("#main_nav .dropdown").hover(function() {
$('.dropdown-menu', this).fadeIn("fast");
$('.nav_main .mega-menu-column ul').attr("style", "display:flex; display: -ms-flexbox;");
$(this).addClass('active');
},
function()
{ $('.dropdown-menu', this).fadeOut("fast"); $(this).removeClass('active');
});
if I switch the .hover to .toggle the drop down menus work as I would expect them to. The problem is it now breaks my links. When I click on them they do nothing and go nowhere. Here is the HTML:
<ul class="nav_main">
<li class="active">Home</li>
<li class="dropdown">
Decisions <b class="caret"></b>
<ul class="dropdown-menu mega-menu" id="decisions">
<li class="mega-menu-column">
<ul>
<span>
<li>Our Decision on CanLII</li>
<li>SCC Decisions</li>
<li>Canada Supreme Court Reports (PDF)</li>
<li>vLex Canada Open</li>
<li>Sask Cases Judicially Considered</li>
</span>
<span>
<li>Federal Court</li>
<li>Quebec (translated decisions)</li>
<li>Tax Court of Canada</li>
</span>
<span>
<li class="list-heading">Tribunals</li>
<li>Automobile Injury Appeal Commission</li>
<li>Law Society of Saskatchewan</li>
<li>Labour Arbitration Awards – Sask</li>
<li>Sask LRB (CanLII)</li>
<li>Sask LRB</li>
</span>
</ul>
</li>
</ul>
Is there any easily explainable reason as to my this simple switch in code is causing the links to stop working completely?
Thanks in advance!
I was unable to precisely reproduce the issue with the code you provided, but I did observe issues clicking some of the links.
Removing the invalid span elements from the ul seems to have corrected the observed issue.
Try removing those span tags from the ul.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul
Allowed child elements of ul
My guess would be that your .toggle is hijacking the click event for the whole container. So when you click a link it's toggling the menu rather than firing the default click for a link. You may try stopping propagation on the links, so it doesn't fire the click event on the parent menu:
https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation
This is straight from the bootstrap site's page. In this certain code i would like to know how to change the color of the text from blue to black. It is by default blue at the moment.
Site for reference and a live example: http://getbootstrap.com/components/
Code: The section the code is under is called "Using Drop downs" Tabs with drop downs.
<ul class="nav nav-tabs" role="tablist">
...
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
...
</ul>
</li>
...
</ul>
Regards
Bootstrap dropdown buttons are like other bootstrap buttons. A default bootstrap button has the btn class.
You can change their themes by adding classes such as btn-primary, btn-info, btn-danger, etc.
For more examples of this check out http://getbootstrap.com/components/#btn-dropdowns.
use id on li and apply style in this way: example
<li id ="abc"</li>
Custom Style
#abc .dropdown-toggle {
color: black;
}
so it will take only for those drop-down-toggle class which has id "abc" and remove the !important from style
you can apply custom style on class "dropdown-toggle" in your css file
.dropdown-toggle {
color: black !important;
}
I'd like the functionality of the Bootstrap tabbable nav but I want to style each tab with a background image and text underneath. In fact, what I'd really like is to just put my photoshop images right in each tab and set the active state to my selected image.
I'm having a very difficult time doing this. Is it going to take a lot of custom work to get this working with this component?
I thought I could just try with some CSS but it's not giving me the correct formatting I want:
ul.nav.nav-tabs li {
display:inline-block;
background:url(../images/skypeIcon.png) no-repeat left center;
background-size:20px auto;
font-size:15px;
padding:2px 0 2px 28px
}
By the way, I'm using Bootstrap 2.3 so I can't use Bootstrap 3 Navbar Generator.
I can use a div tag inside my a tag and put whatever content I want in there.
<ul class="nav nav-tabs">
<li class="active">
<a href="#tab1" data-toggle="tab">
<div>
<img src="<%=context%>/images/defaultAvatar.png"/>
<br/>
Computer
</div>
</a>
</li></ul>
This is a tricky question to phrase but I'll try my best:
If you go to http://msukkar.tumblr.com and resize your window (if you're using a desktop/laptop) until the hamburger menu icon appears then click on it to get the drop-down menu, click on it again to hide it. You'll find that when you resize your window back up full-width the original navigation is gone.
I'm curious as to how I can prevent this exactly. I'm adept at HTML & CSS but very new to Javascript.
The Javascript that I used is:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function ($) {
/* prepend menu icon */
$('#menu_wrapper').prepend('<img id="mobile_menu" src="http://msukkar.com/wp-content/themes/pptitan/images/mobile_menu.png" alt="">');
/* toggle nav */
$("#mobile_menu").on("click", function () {
$("#menu_border_wrapper").slideToggle();
$(this).toggleClass("active");
});
});
});
</script>
The HTML for the menu is
<div id="menu_wrapper">
<!-- Begin logo -->
<a id="custom_logo" class="logo_wrapper" href="http://msukkar.com" style="font-family: 'Oswald', sans-serif; letter-spacing: 1px; font-size: 14px; margin-top: 16px; ">
MATT SUKKAR
</a>
<!-- End logo -->
<!-- Begin main nav -->
<div id="nav_wrapper">
<div class="nav_wrapper_inner">
<div id="menu_border_wrapper">
<div class="menu-home-container">
<ul id="main_menu" class="nav">
<li id="menu-item-1235" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1235">
<a href="http://msukkar.tumblr.com" style="color: #ff0000">
Blog
</a>
</li>
<li id="menu-item-1485" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1235">
<a href="http://msukkar.com/contact/">
Contact
</a>
</li>
</ul>
</div>
<select>
<option selected="selected" value="">
- Main Menu -
</option>
<option selected="selected" value="http://msukkar.tumblr.com">
Blog
</option>
<option value="http://msukkar.com/contact/">
Contact
</option>
</select>
</div>
</div>
</div>
I hope I explained that well enough for you all. Thanks in advance for your help and if need be I'll try to clarify further.
Here's your problem:
$("#menu_border_wrapper").slideToggle();
Which shows and hides your menu when you click the hamburger.
The problem is that when you are in desktop view, your entire menu is contained within #menu_border_wrapper and is displayed as it should. Then you resize down to mobile and click the hamburger. On your first click, #menu_border_wrapper slides down and your menu becomes visible. On your second click, #menu_border_wrapper slides up and your menu becomes invisible. This is fine on mobile since the hamburger icon itself isnt contained within #menu_border_wrapper, but when you resize the window back to desktop, the menu is gone! Remeber how on the second click the menu was sliding up and was set to display: none. Well now since your desktop size menu is contained within #menu_border_wrapper, it's not there anymore.
There are probably a lot of ways you can solve this. Move the actual menu buttons outside #menu_border_wrapper on desktop aswell, make two completely unique menues for mobile and desktop or set #menu_border_wrapper to display: block !important on desktop.
Hope it helps!
Using twitter bootstrap. on the site i have a top nav bar consisting of links where some have dd-menus, and some are just static links.
i'm constructing the links using img's instead of text anchors.
i would like to get a hover effect applied to each of the links in the nav bar. this to be done by swapping out the image or loading a different background location in the sprite.
i'm using the regular way of specifying the nav bar,
<ul class="nav nav-pills">
<li class="dropdown" id="hifiMenu">
<a class="dropdown-toggle" data-toggle="dropdown" href="#hifiMenu"><img src="$PRE/images/newhifi.png"></a>
<ul class="dropdown-menu">
<li class="mainitem">BY BRAND</li>
is it possible to put a hover on the A link for #hifiMenu, and when the dropdown is activated, have the image swapped out?
not quite sure what the best practice would be using TB's nav bar control. has anyone tried something like this?
thanks in advance.
as mentioned in my question, i have the following nav bar items:
<ul class="nav nav-pills">
<li class="dropdown" id="hifiMenu">
<a class="dropdown-toggle" data-toggle="dropdown" href="#hifiMenu"><img src="newhifi.png"></a>
<ul class="dropdown-menu">
<li class="mainitem">BY BRAND</li>
....
in order to get the hover to work, i first created a large sprite image that contained every normal/highlighted image.
then i set up a new style for each of my links:
#hifiMenuLink {
width:71px;
height: 11px;
background-image: url(path_to_sprite);
background-repeat: no-repeat;
background-position: 0px -6px;
}
then for the hover:
#hifiMenuLink:hover {
width:71px;
height: 11px;
background-image: url(path_to_sprite);
background-repeat: no-repeat;
background-position: 0px -37px;
}
then i assigned the ID, hifiMenuLink, to the anchor itself...
<a id="hifiMenuLink" ...
that was my quick and dirty solution.
hope this can help out someone else in the future.