javascript - How to make "navbar-fixed-bottom" slide up when button is clicked in responsive mode? (bootstrap) -
javascript - How to make "navbar-fixed-bottom" slide up when button is clicked in responsive mode? (bootstrap) -
currently twitter bootstrap's navbar @ bottom (used footer) slides "down" when button pushed on phone screen or narrow window.
i want menu slide "up" instead of default "down".. ideas on how can twitter bootstrap?
the code used in view layer of navbar footer follows:
<footer id="footer" class="navbar navbar-fixed-bottom"> <div class="navbar-inner"> <div class="container"> <button type="button" class="btn btn-navbar dropup" data-toggle="collapse" data-target=".show-footer"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="nav-collapse collapse show-footer"> <nav> <ul class="nav pull-right"> <%= g_about_link(yield(:title)) %> <%= g_contact_link(yield(:title)) %> <%= g_faq_link(yield(:title)) %> <%= g_careers_link(yield(:title)) %> <%= g_privacy_link(yield(:title)) %> <%= g_quotes_link(yield(:title)) %> <%= g_terms_link(yield(:title)) %> <li><a href="http://news.railstutorial.org/" target="_blank">news</a></li> </ul> </nav> </div><!--/.nav-collapse --> </div> </div> </footer>
scroll bottom of page using show() event callback:
http://jsfiddle.net/apx5n/2/
$(function() { $('.collapse.show-footer').on('show', function () { $("html, body").animate({ scrolltop: $(document).height() }, "slow"); }); }); <div class="container"> ... <div class="nav-collapse show-footer collapse"> ... </div> </div>
javascript html css twitter-bootstrap
Comments
Post a Comment