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.
Related
I have a bootstrap button and dropdown like this:
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
CHOOSE OPTION
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
</div>
I ensure the chosen option appears in the button text as follows:
$('.dropdown-menu a').on('click', function(){
$(this).parent().parent().prev().html($(this).html() + '<span class="caret"></span>');
})
But when I choose an option the width of the button changes. How can I keep the width of the button the same after I make a choice?
You can put a class in your css, which is loaded after the bootstrap css which sets the button width to a fixed width, such as:
.toggleClass .btn {
width: 300px;
min-width: 300px;
max-width: 300px;
}
But you should really ask yourself if that's really what you want to do. Because you'll have to set the width to be wide enough for the longest option in the dropdown and that might not be aesthetically pleasing for shorter options. Also, if you set the width of the button, then it won't be responsive for smaller screens and devices unless you create media queries in your css to handle for smaller screens and this will be hard to manage. You'd be creating more work for yourself, but if for some reason it's necessary, like the client demands it, then the above is one way to go about it.
#bdubay was the closest. What worked was:
.dropdown-toggle {
width: 160px !important;
min-width: 160px !important;
max-width: 160px !important;
}
I'm looking to make a very simple dropdown menu for a navbar, very similar to how Bootstrap's dropdown menu works - without being Bootstrap (with some regular links in my navbar and some dropdown links). Essentially what I want is to come up with some with some js and probably a little bit of CSS that will enable this to happen for the following HTML code:
<ul class="main-nav">
<li>HOME</li>
<li>CONTACT</li>
<li class="dropdown">
ACCOUNT <b class="caret"></b>
<ul class="dropdown-menu">
<li>CHANGE PASSWORD</li>
</ul>
</li>
</ul>
I just don't really know where to start on something like this. I spent a few hours trying to put together an all-CSS way of doing this but my CSS just started interfering with itself and I kind of gave up on that. I don't really know any js but it strikes me that there should be a really easy way to toggle a dropdown style on and off with js by clicking a link. I even tried for quite a while to implement js dropdown scripts other people have put out and other StackOverflow answers that essentially did that but their HTML was structured significantly different than mine and I didn't know enough js to restructure their code.
At this point, I'd be more than content with the simplest way possible - a dropdown link that when clicked, opens up a single-colored rectangle 'under it' with the links stacked within in it. I know that's a lot to ask for, but if anyone could point me in the right direction, it would be much appreciated. I apologize for not showing more code but after working on this all day, I really just don't have anything useful to show for.
The idea is that the dropdown-menu is hidden using display: none and when its parent dropdown has the class open then you show it using display: block, to toggle the classes we use js.
$(document).ready(function(){
$("[data-toggle='dropdown']").click(function(e) {
$(this).parents(".dropdown").toggleClass("open"); /*when you click on an element with attr data-toggle='dropdown' it toggle the class "open" on its parent with class "dropdown"*/
e.stopPropagation();
});
$("html").click(function() {
$(".open").removeClass("open"); /*when you click out of the dropdown-menu it remove the class "open"*/
});
});
.main-nav{
background: deepskyblue;
padding: 0;
}
.main-nav li{
list-style: none;
display: inline-block;
position: relative; /*with respect to this element dropdown-menu is positioned*/
}
.dropdown-menu{
display: none; /*hide the menu*/
/*this style are just to position the menu*/
position:absolute;
top: 100%;
left: 0;
}
.open .dropdown-menu{
display: block; /*show the menu when its parent has class "open"*/
}
a.nav-item{
display: inline-block;
padding: 10px;
text-decoration: none;
cursor: pointer;
}
.dropdown-menu{
background: skyblue;
padding: 10px;
border-radius: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="main-nav">
<li><a class="nav-item" href="index.html">HOME</a></li>
<li><a class="nav-item" href="contact.html">CONTACT</a></li>
<li class="dropdown">
<a class="nav-item dropdown-toggle" data-toggle="dropdown">ACCOUNT <b class="caret">></b></a>
<ul class="dropdown-menu">
<li>CHANGE PASSWORD</li>
</ul>
</li>
</ul>
The above is just a basic example to point you in the right direction, most of the CSS code is just to make viable the example, the important parts are commented.
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>
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