"Nav-Pills with Drop-up"
Bootstrap 3.3.0 Snippet by cdenby

<div class="container"> <div class="row"> <h2>Looking for a Footer of Nav-Pills with a Drop-up for "More"</h2> I've moved the Footer up a bit in this example to reduce the scrolling<br/> I want the More button to perform like a drop-up, but I'm unclear where to put the Drop-up class in this context </div> <footer class="footer"> <div class="container"> <p class="text-muted credit"> <ul class="nav nav-pills"> <li style="width:15% ;" class="active" onClick="ToggleActivePills(this);"><a href="#"><i class="glyphicon glyphicon-star"></i> Favourites</a></li> <li style="width:15% ;" ><a href="#" onClick="ToggleActivePills(this);"><i class="glyphicon glyphicon-picture"></i> Option 1</a></li> <li style="width:15% ;" ><a href="#" onClick="ToggleActivePills(this);"><i class="glyphicon glyphicon-plane"></i> Option 2</a></li> <li style="width:15% ;"><a href="#" onClick="ToggleActivePills(this);"><i class="glyphicon glyphicon-shopping-cart"></i> Option 3</a></li> <li style="width:15% ;" class="btn-group"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> More<i class="glyphicon glyphicon-arrow-up"></i> </a> <ul class="dropdown-menu drop-up" role="menu"> <li><a href="#" data-toggle-"dropdown">Do Something</a></li> <li><a href="#" data-toggle-"dropdown">Do Something Else</a></li> <li><a href="#" data-toggle-"dropdown">Do Something Again</a></li> </ul> </li> </ul> </p> </div> </footer> </div>
body, html , .container {height: 100%} .footer {bottom: 30px; box-sizing: border-box; display: block; position: fixed; float: none; z-index:2000; background-color: Black; width: 100%; height: 40px; text-align: center; margin: 0px 0px 0px 0px!important; padding: 0px 0px 0px 0px; font-size: x-small; }
function ToggleActivePills(li){ $(li).parent().find(".active").removeClass("active"); $(li).addClass("active"); console.log("did the switch!"); }

Questions / Comments:

Related: See More