javascript - Bootstrap Navigation with more links.. Trying to find a solution with jquery -
i'm trying find solution site navigation consists more links. after add more links display in 2, 3 lines.please check attached picture.this after add more links
in above picture, added blue colored link , rest of default bootstrap navigation. want keep navigation in 1 line. if need see more links, need click blue colored link (for testing purpose set display none). when re sizing browser should keep in 1 line. wrote jquery code , works when browser decreasing size. when increasing size doesn't work adding 1 one again. there anyway this? can please me solve issue or giving idea. thanks
my codes,
$(document).ready(function(e) { $(document).load($(window).bind("load", resthis)); $(document).load($(window).bind("resize", resthis)); var tot=$('.nav').find('.chld').length; var pos_top=$('.btn').position().top; var marg=$('.container').width(); function resthis(){ for(var i=tot; i>=0; i--){ if(pos_top>0){ $( ".nav .chld:nth-child("+i+")" ).addclass('a'); } pos_top=$('.btn').position().top; } } });.not{padding:0px; background-color:#ffffff; border-radius:0%;} .a{display:none !important;}<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>untitled document</title> <!-- latest compiled , minified css --> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- jquery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <!-- latest compiled javascript --> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <style> //ul{list-style:none;} //ul li{float:left; padding:10px 30px; background-color:#c0b9b9; margin:10px; border-radius:10%;} .not{padding:0px; background-color:#ffffff; border-radius:0%;} .a{display:none !important;} </style> </head> <body> <div class="container"> <nav class="navbar navbar-default"> <div class="container-fluid"> <!-- brand , toggle grouped better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <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="#">brand</a> </div> <!-- collect nav links, forms, , other content toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active chld"><a href="#">link <span class="sr-only">(current)</span></a></li> <li class="chld"><a href="#">link</a></li> <li class="chld"><a href="#">link</a></li> <li class="chld"><a href="#">link</a></li> <li class="chld"><a href="#">link</a></li> <li class="chld"><a href="#">link</a></li> <li class="chld"><a href="#">link</a></li> <li class="chld"><a href="#">link</a></li> <li class="chld"><a href="#">link</a></li> <li class="chld"><a href="#">link</a></li> <li class="chld"><a href="#">link</a></li> <li class="chld"><a href="#">link</a></li> <li class="chld"><a href="#">link</a></li> <li class="chld"><a href="#">link</a></li> <li class="chld"><a href="#">link</a></li> <li class="chld"><a href="#">link</a></li> <li class="chld"><a href="#">link</a></li> <li class="chld"><a href="#">link</a></li> <li class="chld"><a href="#">link</a></li> <li class="chld"><a href="#">link</a></li> <li class="chld"><a href="#">link</a></li> <li class="chld dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">action</a></li> <li><a href="#">another action</a></li> <li><a href="#">something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">separated link</a></li> <li role="separator" class="divider"></li> <li><a href="#">one more separated link</a></li> </ul> </li> </ul> <a href="#" class="btn btn-info btn-lg" style="float:right;"> <span class="glyphicon glyphicon-align-justify"></span> </a> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> </div> </body> </html>
it works intended me in full-screen , resizing kinds of width... cant replicate error describing , showing.
Comments
Post a Comment