I want to show a message dropdown using bootstrap. This is very similar to the messages dropdown that comes in facebook (not the full page view, but just the dropdown only). Can someone please share the sample markup to get this done.
If you are using bootstrap 3 you can see and working example here: http://infinite-woodland-5276.herokuapp.com/index.html
Working example: http://codepen.io/igcorreia/pen/htdxl
HTML
<div class="container">
<div class="row">
<p class="lead">Roll over the button on the left to see a dropdown</p>
Rollover dropdown:
<!-- Our Special dropdown has class show-on-hover -->
<div class="btn-group show-on-hover">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
Regular dropdown:
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>
CSS
body{
padding:10px;
}
.show-on-hover:hover > ul.dropdown-menu {
display: block;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With