I use markup to display a dropdown menu using Twitter Bootstrap.
<ul class="nav pull-right">
<li class="dropdown">
Menu <b class="caret"></b>
<ul class="dropdown-menu">
<li>Menu item 1...</li>
<li class="divider"></li>
<li>Menu item 2...</li>
<li>Menu item 3</li>
</ul>
</li>
</ul>
I want to be able to make menu items appear disabled, i.e. no hover effect and probably a different text decoration to make the disabled state visible to the user.
What is the best way to accomplish this? Is there an exisisting bootstrap css class I can add to the <li> or <a> element?
When outputing the code for a disabled drop down, why not simply use :
<li class='disabled'>
Menu
</li>
You can always add the caret back if you still want it to appear.
Update:
Adding W3Schools Link
You can attach a custom disabled class to your menu link a tag that you want to disable and simply remove the default action by using preventDefault and targetting that class, like so:
$(".disabled-link").click(function(event) {
event.preventDefault();
});
Then you can style all events from the .disabled-link with a grey backdrop or any style you like;
CSS
a.disabled-link,
a.disabled-link:visited ,
a.disabled-link:active,
a.disabled-link:hover {
background-color:#d9d9d9 !important;
color:#aaa !important;
}
Demo
I prefer this (LESS):
/* Disable link */
a.disabled,
a.disabled:visited ,
a.disabled:active,
a.disabled:hover {
color: #999 ;
cursor: default;
}
.dropdown-menu {
a.disabled,
a.disabled:visited ,
a.disabled:active,
a.disabled:hover {
color: #999 ;
cursor: default;
background-color: white;
}
}
To disable the the dropdown use:
$('.dropdown-toggle').addClass('disabled');
To enable it back:
$('.dropdown-toggle').removeClass('disabled');
YES, Bootstrap has a predefined class with all necessary styling you need. You can simply add disabled class to whichever <li> you want
Just to add to Andres answer (don't have enough reputation to add comments :( ). You need to return false from the event handler or it might continue executing other handlers.
$(".disabled-link").click(function(event) {
event.preventDefault();
return false;
});
Similar to above you can use:
li.disabled > a {
color:#aaa !important;
}
This way you are keeping the same bootstrap default class for disabled links and implement the preventDefault() Javascript to disabled the link.
$(".disabled").click(function(event) {
event.preventDefault();
return false;
});
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Regular link</a>
**<a class="dropdown-item disabled" href="#">Disabled link</a>**
<a class="dropdown-item" href="#">Another link</a>
</div>
Add .disabled to items in the dropdown to style them as disabled.
Source: www.getbootstrap.com
Related
I'm having trouble figuring out how to solve this CSS problem.
The code is create by a WordPress plugin so have limited possibilities when it comes to naming the classes and so on.
This is the code:
<li class="page_item page-item-365 page_item_has_children current_page_item has_children”>
<a href="http://www.xxx.dk/side1/side2/“>Side 2</a>
<ul class="children">
<li class="page_item page-item-556”>
<a href="http://www.xxx.dk/“>punkt 1</a>
</li>
<li class="page_item page-item-556”>
<a href="http://www.xxx.dk/“>punkt 1</a>
</li>
<li class="page_item page-item-556”>
<a href="http://www.xxx.dk/“>punkt 1</a>
</li>
</ul>
</li>
The problem is that all of my links become bold when I'm styling them. I only want it to happen on the current page (selected page). I have tried with the following CSS code, but without luck:
li.current_page_item a:first-child {
font-weight: bold;
}
I believe I found a solution - dont know if I understand it but it works ;)
.current_page_item > a {
font-weight: bold;
}
In your case, every a is the first child of a li.
What you are searching for is:
li.current_page_item a {
Furthermore all of your menu entries link to the same id. So I guess every of it get the "current" class, if one is selected. Add some other links to the menu and you will see, that it will work!
You were close to the solution ;-)
Have a look here, is this what you looking for?
li.current_page_item > a:first-child {
font-weight: bold;
}
Example on Codepen:
http://codepen.io/funkysoul/pen/XNVdbE
please recheck your code. refer the screenshot.
I would like to disable the nav-pill hover effect on just one item, the link that changes the language of the page, in my navbar. What is the best way to achieve this using either a bootstrap class or CSS?
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav nav-pills navbar-right">
<li class="language language-active disabled">NL</li>
<li class="language language-nonactive language-right">EN</li>
<li class="approach-li">Diensten</li>
<li class="about-li">Over ons</li>
<li class="qa-li">Vragen</li>
<li class="about-li">Contact</li>
<li class="navbarpadding">
<form action="afspraak.html">
<button class="btn navbar-btn btn-primary2">Afspraak maken</button>
</form>
</li>
</ul>
</div>
Looking at your html using the class: ".language-nonactive"
You can these styles to go along with it, this will remove the hover of the grey background:
.nav>li.language-nonactive>a:hover, .nav>li.language-nonactive>a:focus {
background-color: transparent;
}
Here is a jsfiddle to show what I've done:
http://jsfiddle.net/ho1sgm1e/
Additionally you could you something like this with jquery:
$(document).ready(function() {
/*disable non active tabs*/
$('.nav li').not('.active').addClass('disabled');
/*to actually disable clicking the bootstrap tab, as noticed in comments by user3067524*/
$('.nav li').not('.active').find('a').removeAttr("data-toggle");
});
source: Bootstrap tabs pills disabling and with jQuery
Furthermore, utilising the disbaled class will effectively disable the button.
Using CSS:
.nav .language-nonactive a:hover {
background:rgba(0,0,0,0);
}
Demo
First, I'm aware of this posts:
Activating bootstrap dropdown menu on hover
Bootstrap Dropdown with Hover
How to make twitter bootstrap menu dropdown on hover rather than click
And others, but still not found the correct solution yet, here's what I did so far.
first I used the is-open attribute from the angular-bootstrap dropdown directive like this:
<span class="dropdown" dropdown is-open="status.isopen">
<a
href
class="dropdown-toggle"
ng-mouseenter="status.isopen = true"
ng-mouseleave="status.isopen = false"
>
hover me for a dropdown with angular-bootstrap
</a>
<ul
class="dropdown-menu"
>
<li ng-repeat="choice in items">
<a href>{{choice}}</a>
</li>
</ul>
</span>
that seemed to work but 2 bugs appeared:
the first is when dropdown-toggle element is clicked the dropdown menu is gone clicking again wont bring it back you have to mouseleave then mouse enter the dropdown-tooggle to get the dropdown-menu back.
the second is a css/html problem.
Usually the regular css solution for a dropdown is like this:
<a class="css-dropdown">
hover here with css.
<div class="css-dropdown-menu">
<p>item 1</p>
<p>item 2</p>
<p>item 3</p>
</div>
</a>
Notice the dropdown-menu now is inside the dropdown-toggle element which mean when moving with the mouse from the dropdown-toggle to the dropdown-menu it's moving from parent to child, so basically we still hovering over the dropdown-toggle since we are in it's child, which mean the dropdown-menu will still be visible, on other hand, the bootstrap dropdown works with the click event so having the dropdown-menu as a child of the dropdown-toggle is not needed, but now when someone wants to change the behavior to mouseenter/hover once the mouse leaves the dropdown-toggle the dropdown-menu disappear so we no longer have access to the dropdown-menu elements this is visible in this plunker
To fix the first bug, I just removed the dropdown directive then replaced the is-open with ng-class directive like this.
Change this:
<span class="dropdown" dropdown is-open="status.isopen">
to this:
<span class="dropdown" ng-class="{'open': status.isopen}">
The rest stays the same plunker that fixed the first bug.
The second bug is tricky, since the dropdown-menu is no longer a child of the dropdown-toggle the hover effect wont last while moving from the toggle to the menu, so I did this.
Changed this:
<ul class="dropdown-menu">
to this:
<ul
class="dropdown-menu"
ng-mouseenter="status.isopen = true"
ng-mouseleave="status.isopen = false"
>
That did it but another bug appeared when clicking the dropdown-menu item it stays open, so I kept hacking by doing this.
changed this:
<li ng-repeat="choice in items">
to this:
<li ng-repeat="choice in items" ng-click="status.isopen = false">
That give me the required behavior plunker.
That said, this is not a good solution since a lot of directives are involved here for a simple visual effect, the last plunker I provided contains a css solution with no Bootstrap or AngularJS involved, though it is the required behavior it is not the required html structure or visual result, what I need is to have a space between the dropdown-toggle and the dropdown-menu not a padding of the toggle element just an empty space, which make the css solution not valid in this situation.
So, my question is there a better way of doing this without adding a new plugin/library more clean and easily reusable solution for the hover drop down menu?
First, have the toggling on the top-most parent element (in this case, the <span>)
<span class="btn-group" dropdown is-open="status.isopen" ng-mouseenter="status.isopen = true" ng-mouseleave="status.isopen = false">
<a class="btn btn-primary dropdown-toggle" dropdown-toggle>
Button dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</span>
This will allow the behavior you wanted - while still allowing clicking to show/hide the menu ;-)
However there's an annoyance: if you move the mouse cursor slower and pass the small gap between the toggle and menu, it will hide the menu.
So secondly, add a small CSS to remove the gap
.dropdown-menu {
margin-top: 0;
}
See the action in this plunker.
I know you want a solution without adding a new plugin/library, but you (or others seeking for this behavior) might want to try using No Close from Dropdown Enhancements lib to keep the dropdown open even after clicking in one of its options:
Do not close the menu on click on radio add class .noclose.
<div class="btn-group">
<button data-toggle="dropdown" class="btn btn-default dropdown-toggle">
Checked option <span class="caret"></span>
</button>
<ul class="dropdown-menu noclose">
<li>
<input type="radio" id="gr1_1" name="gr1" value="1">
<label for="gr1_1">Option 1</label>
</li>
<li>
<input type="radio" id="gr1_2" name="gr1" value="2">
<label for="gr1_2">Option 2</label>
</li>
<li>
<input type="radio" id="gr1_3" name="gr1" value="3">
<label for="gr1_3">Option 3</label>
</li>
</ul>
</div>
Also add a CSS solution for the hovering problem:
.btn-group:hover .dropdown-menu.noclose {
display: block;
}
.dropdown-menu.noclose {
margin-top: 0px;
}
And, of course, don't forget to import the libs:
<script src="./js/dropdowns-enhancement.min.js"></script>
<link href="./css/dropdowns-enhancement.css" rel="stylesheet"\>
In your case I suggest you to study the Dropdown Enhancements's source code to see how it works and maybe find a more suitable solution.
Try adding this line to your css:
.btn-group:hover>.dropdown-menu { display: block; margin-top: 0; }
You'll have to remove your is-open, ng-mouseenter and ng-mouseleave directives.
Below is the solution I came up with, while working on the same issue.
I used a simple custom directive that:
binds the mouseenter and mouseleave events to the dropdown in order correctly to show/hide the menu.
dynamically adds a custom CSS class to the dropdown menu in order to prevent the menu from disappearing when moving the cursor from the button to the menu. Note that this solution has the advantage of not removing the visual gap between the button and menu.
prevents the menu from disappearing when the button is clicked.
The CSS rule uses a before pseudo-element to fill the gap between the button and the menu. I added the border property which can be uncommented to easily get a visual feedback.
.dropdown-hover-menu::before {
content: '';
position: absolute;
left: 0;
width: 100%;
top: -3px;
height: 3px;
/*border: 1px solid black;*/
}
The HTML structure of the snippet is based on the available examples in the dropdown section of the angular-ui bootstrap documentation
angular.module('app', ['ui.bootstrap'])
.directive('dropdownHover', function() {
return {
require: 'uibDropdown',
link: function(scope, element, attrs, dropdownCtrl) {
var menu = angular.element(element[0].querySelector('.dropdown-menu')),
button = angular.element(element[0].querySelector('.dropdown-toggle'));
menu.addClass('dropdown-hover-menu');
element.bind('mouseenter', onMouseenter);
element.bind('mouseleave', onMouseleave);
button.bind('click', onClick);
function openDropdown(open) {
scope.$apply(function() {
dropdownCtrl.toggle(open);
});
}
function onMouseenter(event) {
if (!element.hasClass('disabled') && !attrs.disabled) {
openDropdown(true);
}
};
function onMouseleave(event) {
openDropdown(false);
};
function onClick(event) {
event.stopPropagation();
}
scope.$on('$destroy', function() {
element.unbind('mouseenter', onMouseenter);
element.unbind('mouseleave', onMouseleave);
button.unbind('click', onClick);
});
}
};
});
.dropdown-hover-menu::before {
content: '';
position: absolute;
left: 0;
width: 100%;
top: -3px;
height: 3px;
/*border: 1px solid black;*/
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.3/ui-bootstrap-tpls.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div ng-app="app">
<div class="btn-group" uib-dropdown dropdown-hover>
<button type="button" class="btn btn-primary dropdown-toggle">
Button dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" uib-dropdown-menu role="menu">
<li role="menuitem">Action
</li>
<li role="menuitem">Another action
</li>
<li role="menuitem">Something else here
</li>
<li class="divider"></li>
<li role="menuitem">Separated link
</li>
</ul>
</div>
</div>
Situation, such a menu:
<ul class="top_right_menu">
<li class="top_right_submenu"><i class="fa fa-globe"></i> LANGUAGES</li>
<li>HELP</li>
<li>LOGIN</li>
</ul>
When I hover "LANGUAGES" I need to show up the other :
<ul class="hover_top_right_menu">
<li>ENGLISH</li>
<li>SPANISH</li>
<li>RUSSIAN</li>
<li>GERMAN</li>
</ul>
Necessary to make it work on CSS, JQuery or without JavaScript. Here's a version does not work:
.hover_top_right_menu {
display: none;
}
It's a wrong line
.top_right_submenu: hover, hover_top_right_menu {
display: visible;
}
You have some typos in your css
by default the element .hover_top_right_menu should have display: none. When you hover the submenu then you change its display (with display: block).
.hover_top_right_menu {
display: none;
}
.top_right_submenu:hover .hover_top_right_menu {
display: block;
}
Anyway this css is based on the assumption that the language list is nested into .hover_top_right_menu element, e.g.:
<ul class="top_right_menu">
<li class="top_right_submenu"><i class="fa fa-globe"></i> LANGUAGES
<ul class="hover_top_right_menu">
<li>ENGLISH</li>
<li>SPANISH</li>
<li>RUSSIAN</li>
<li>GERMAN</li>
</ul>
</li>
<li>HELP</li>
<li>LOGIN</li>
</ul>
As a side notes:
Unless you need to have an action on click event, the link around "LANGUAGES" is not necessary for the example
you're using empty markup, probably for styling purpose only. If you need to have an icon just place it as a background of that list-item (or as content property of its :before pseudoelement)
On 3 buttons at the end of each of my post page, I would like to put a hover color when people are clicking on one of them. Here is an example of the 3 buttons:
In my PHP file, these 3 buttons are located here: Post Page
<ul class="tabnav-widget ui-tabs-nav">
<li class="ui-tabs-selected">
<a class="" href="#tab1-widget">written by</a>
</li>
<li>
<a class="" href="#tab3-widget">Related Posts</a>
</li>
<li class="">
<a class="" href="#tab4-widget">In this Category</a>
</li>
</ul>
But I don't know what CSS class I have to modify and which CSS code to add in order to maintain a hovering color when clicking on one of the three buttons.
I thank you in advance, any help is appreciated.
Change this in the CSS
.tabnav li:hover, .tabnav-widget li:hover {
background: #color;
}
Additionally, if you would like to change the color when the button is pressed down, use :active.
Add something like this:
.tabnav li:active, .tabnav-widget li:active {
background: #color;
}