javascript - Resonsive Menu Using Bootstrap -



javascript - Resonsive Menu Using Bootstrap -

can 1 help me menu creating using bootstrap css every tutorial of bootstrap menu not total fill requirement please can 1 tell me how create responsive menu

image contains 2 images 1 normal browser , image mobile

i have tried next code: illustration of twitter bootstrap 3 static navbar extended .bs-example{ margin: 20px; }

</script> </head> <body> <div class="bs-example"> <nav role="navigation" class="navbar navbar-default"> <!-- brand , toggle grouped improve mobile display --> <div class="navbar-header"> <button type="button" data-target="#navbarcollapse" data-toggle="collapse" class="navbar-toggle"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <!-- <a href="#" class="navbar-brand">brand</a> --> </div> <!-- collection of nav links, forms, , other content toggling --> <div id="navbarcollapse" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">home</a> </li> <li><a href="#">profile</a></li> <li><a href="#">login</a></li> </ul> <!-- <ul class="nav navbar-nav"> <li><a href="#">login</a></li> </ul> --> </div> </nav> </div> </body> </html>

have checked these examples?

bootstrap navbar bootstrap navbar-static-top/ bootstrap navbar-fixed-top/

do need

in addition, this utility allows create bootstrap navbar

update

jsfiddle

<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="test"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#link1" style="display:none;" id="link">item 1</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#link1">item 1</a></li> <li><a href="#link2">item 2</a></li> <li><a href="#link2">item 3</a></li> </ul> </div> </div> </div> $(document).ready(function() { //control creation if($(window).width() < 767){ $("#link").show(); } }); $(document).load($(window).bind("resize", do_menu)); function do_menu(){ if($(window).width() < 767){ $("#link").show(); }else{ $("#link").hide(); } }

javascript jquery html5 twitter-bootstrap responsive-design

Comments

Post a Comment

Popular posts from this blog

model view controller - MVC Rails Planning -

model view controller - MVC Rails Planning - i'm starting rails , i'm building app stores films info, user can watch film , give grade on web application. i have coded cinema model, controller , views. now, have 2 questions: should need create model , controller grading? in case, should create or should wait , create first users model , controller? yes, on model , controller grades. that'd feasible way maintain track of who's graded what. it's create first, i'd start users, since grades depend on both films , users. ruby-on-rails model-view-controller
Read more

ruby on rails - Devise Logout Error in RoR -

ruby on rails - Devise Logout Error in RoR - while using devise in ror, encountering unusual error when trying log out url different root url. displays me : actioncontroller::invalidauthenticitytoken in devise::sessionscontroller#destroy" for illustration if rooting path after log in '/structure', , seek log out '/general' error, while logging out '/structure' fine. any help highly appreciated. ruby-on-rails ruby devise
Read more

html - Submenu setup with jquery and effect 'fold' -

html - Submenu setup with jquery and effect 'fold' - i want open submenu jquery effect fold, problem if user "hover effect" fast menu remain open, how can avoid this, jquery code is: $('ul.mainmenu li').hover( function() { $(this).children('ul').show('fold', 570); }, function() { $(this).children('ul').hide('fold', 500); } ); my jsfiddle link is: http://jsfiddle.net/9wkbf/ updated fiddle the reason behind problem is, first event $(this).children('ul').show('fold', 570); queued , until completes, sec animation not start. the next snippet can workaround $('ul.mainmenu > li').hover( function() { $(this).children('ul').show('fold', 570); }, function() { $('ul:not(.mainmenu)').hide('fold', 500); } ); *important note : work current scenario. jquery html css
Read more