Alex Rivera | Logout

Disabled dropdown menu items using twitter bootstrap

Asked 2012-03-13T10:15:58.633
36

I use markup to display a dropdown menu using Twitter Bootstrap.

<ul class="nav pull-right">
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu <b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li><a href="#">Menu item 1...</a></li>
            <li class="divider"></li>
            <li><a href="#">Menu item 2...</a></li>
            <li><a href="#">Menu item 3</a></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?

css twitter-bootstrap
Edit
Report

1 Answer

7

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;
  }
}
answered 2012-05-30T22:47:31.720

Your Answer