Develop Reference

NavBar doesn't collapse in admin-Folder from ASP-Page

i have a Bootstrap-Navbar on a ASP-Page. The Navbar ist included in a MasterPage and working fine with all the sites in root-Directory.
Some Pages with Login-Functionality are in an admin-Folder. These Pages use the same MasterPage, but when beeing on such a page, the Navbar isn't collapsing when clicking on a MainMenu-Item. The only thing that happens, is in the adress-box in the browser is a "#" appearing at the end.
Can someone help me solving this Problem ?
Greetings
Gregor
<nav class="navbar navbar-fixed-top" role="navigation" style="background-color:#286090;width:100%;z-index:10;">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar" style="background-color:white;width:50px;height:5px;padding:4px;margin:5px;"></span>
<span class="icon-bar" style="background-color:white;width:50px;height:5px;padding:4px;margin:5px;"></span>
<span class="icon-bar" style="background-color:white;width:50px;height:5px;padding:4px;margin:5px;"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><i class="fa fa-home"></i></li>
<li>
Serien
<ul class="dropdown-menu multi-level">
<li>Serien-Diary</li>
<li>Nicht-Beendete</li>
<li>Warteliste</li>
<li>Serien-Sichtung anlegen</li>
<li>Serien-Logo hochladen</li>
<li>DB Chronologie</li>
<li>Sichtungs-Chrono</li>
<li>Serien-Daten</li>
<li>Empfehlungen</li>
</ul>
</li>
<li>
Filme
<ul class="dropdown-menu multi-level">
<li>Film-Diary</li>
<li>in DB anlegen</li>
<li>DB Chronologie</li>
<li>Film-Sichtung anlegen</li>
<li>Empfehlungen</li>
<li>Liste Filtern</li>
<li>DVD's</li>
<li>BluRay's</li>
<li>
FILTERN<b class="caret"></b>
<ul class="dropdown-menu">
<li>
FSK
<ul class="dropdown-menu">
<li>Beschlagnahmen</li>
<li>SPIO/JK</li>
<li>Liste A</li>
<li>Liste B</li>
</ul>
</li>
<li>
Genre
<ul class="dropdown-menu">
<li>Splatter</li>
<li>Horror</li>
<li>Action</li>
<li>Science-Fiction</li>
<li>Fantasy</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
Sonstiges
<ul class="dropdown-menu multi-level">
<li>Einstellungen</li>
<li>Protokoll</li>
<li>HOME</li>
</ul>
</li>
<li><i class="fa fa-hand-o-up"></i></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>

Extend and remove toolbar buttons

We have developed a toolbar (bootstrap-navbar) that contains a number of buttons/controls.
This toolbar is working as expected, but now there is a new requirement to provide a mechanism to extend this toolbar with new buttons from the outside (maybe via json configuration...), or to remove the default buttons.
e.g, imagine that we provided this toolbar as a service and there are options to be able to add/remove buttons by configuration or something, currently not sure how...
My main questions are:
What pattern (design pattern) should I use to extend this toolbar(if possible of course :) ). Please keep in mind that someone that wants to extend the toolbar should provide the buttons with the
logic.
How to structure the project
I want to divide the button's functionality into different javascript files
and load them together in the index.html. What's the recommended way to do it?
Note: I cannot use ES6(should support IE11 also :( ) and I don't use node js to have WebPack/Gulp/Grunt
Project structure
myProj
>index.html
>css
>> style.css
>js
>>script.js
Now I want to divide this big script into smaller files (like question 3),
which technique should I use? Maybe require.js (since I don't have the option to compile...
Any example will be very helpful
This is for example of the HTML code and all the handlers logic inside the jsFile
<div class="toggle-button">
<div class="wrapper">
<div class="menu-bar menu-bar-top"></div>
<div class="menu-bar menu-bar-middle"></div>
<div class="menu-bar menu-bar-bottom"></div>
</div>
</div>
<nav id="navi" class="navbar navbar-inverse menuBar">
<div class="container-fluid back">
<div class="navbar-header">
<a class="navbar-brand glyphicon glyphicon-dashboard" href="#"></a>
</div>
<ul class="nav navbar-nav">
<li id="dropdown1" class="dropdown open keep-open">
<a id="qlabel" class="dropdown-toggle glyphicon glyphicon-phone" data-toggle="dropdown" href="#">
<span class="caret"></span></a>
<ul class="dropdown-menu">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading" data-toggle="collapse" data-parent="#accordion" href="#collapse1">
<a>
Collapsible Group 1</a>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
<ul class="nav navbar-nav">
<li ><a id="s_e_1" onclick="dropDown1_1(this)">SubEntry 1.1.1</a></li>
<li ><a id="s_e_2" onclick="dropDown1_2(this)">SubEntry 1.1.1</a></li>
<li ><a id="s_e_3" onclick="dropDown1_3(this)">SubEntry 1.1.1</a></li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
Collapsible Group 2</a>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<ul class="nav navbar-nav">
<li ><a id="s_e2_1" onclick="dropDown1_1(this)">SubEntry 1.1.1</a></li>
<li ><a id="s_e2_2" onclick="dropDown1_2(this)">SubEntry 1.1.1</a></li>
<li ><a id="s_e1_3" onclick="dropDown1_3(this)">SubEntry 1.1.1</a></li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
Collapsible Group 3</a>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">
</div>
</div>
</div>
</div>
</ul>
</li>
<li></li>
</ul>
<ul class="nav navbar-nav" style="margin-left:25%;">
<form class="navbar-form navbar-left">
<div class="input-group">
<span style="float:left; margin-top:3%; margin-right:3%; color:white;" class="box glyphicon glyphicon-search"></span>
<input type="search" class="form-control" style="height:30px; width:70%;" placeholder="Search" oninput="search(this)">
</div>
</form>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle glyphicon glyphicon-bell" data-toggle="dropdown" href="#" >
<span class="badge badge-danger">2</span><span class="caret"></span>
</a>
<ul class="dropdown-menu notif" style="padding:20%;">
<li>Hello</li>
<hr>
<li>Notif 2</li>
<hr>
<li>Notif 3</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle glyphicon glyphicon-globe" data-toggle="dropdown" href="#">
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>English</li>
<li>Hebrew</li>
<li>Finnish</li>
</ul>
</li>
<li><span class="glyphicon glyphicon-log-in"></span></li>
</ul>
</div>
</nav>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

A great example of a preexisting, widely-used, and well-supported library that does the exact things you are requesting is TinyMCE 4. I highly recommend you look at their source code.
Specifically their Editor class, which contains a good example of configuration options including toolbars and buttons. Also check out AddOnManager, which uses ScriptManager to load the necessary pieces as well as plugins, languages, etc.
It may make you dizzy digging through it all but if you need help there is a big community behind it that could point you in the right direction.

issues with navbar links not collapsing

firstly apologies opening a question on which should be seen as a fairly simple issue....and it should be, but I cant get it working to save my life.
Maybe someone can just give this code a quick scan and tell me what I am doing wrong, as I am not to familiar with bootstap (which im using here) and HTML5
My Problem
Navbar working perfectly on home page but when copy and pasting navbar to other pages the services and menu links simply do not expand / collapse
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Finger Food Catering</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Hot Platters</li>
<li>Cold Platters</li>
<li>Gourmet Platters</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Services<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Wedding Catering</li>
<li>Birthday Catering</li>
<li>Corporate Catering</li>
<li>Event Catering</li>
<li>Funeral Cateringg</li>
</ul>
</li>
<li>About</li>
<li>Testimonials</li>
<li>Inquire</li>
<li>Blog</li>
<li class="active">Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span style="font-size:2.0em"><span style="color:#8AB8E6">Contact Us:</span> <body onload="_googWcmGet('number', '1300 785 701')">
<span class="number">1300 785 701</span>
</body> </a></li>
</ul>
</div>
</div>
</nav>

Are you using Materialize?
If you are, scroll down to the bottom of index.php where the scripts are and change <script src="../../bin/materialize.js"></script> to <script src="js/materialize.js"></script>

Bootstrap 3 Mobile Menu with icons

UPDATE:
Thanks to brbcoding in the comments. Updated JS Fiddle
http://jsfiddle.net/Bootstrap714/RfsS9/14/
He mentioned something about transitions. How would I go about doing that or what is the best route.
Here is where I am at:
I am using Bootstrap 3 to build a menu. Bootstrap comes with a nice collapse feature for the menu when viewed on mobile. It takes the whole menu and puts it in a button to collapse. IE: if you have "link dropdown-link dropdown-link" there will be one button and it will toggle a dropdown with those links.
My question is:
Can those 3 links become each their own toggle buttons and control their own dropdowns. If you create multiple collapse toggle buttons. the toggle button opens the drop down to show the link. Then you must click on that link to open the sub-dropdown.
<div class="navbar navbar-default navbar-fixed-top " role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#settings">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#inbox">
<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 hidden-xs" href="#">Brand</a>
<a class="navbar-brand visible-xs" href="#">AL</a>
</div>
<ul class="nav navbar-nav hidden-xs">
<li class="dropdown">
Popular Tags <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left hidden-xs" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="mobile-menu">
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-camera-retro fa-2x"></i> Upload</li>
</ul>
</div><!-- /.navbar-collapse -->
<div class="collapse navbar-collapse" id="inbox">
<ul class="nav navbar-nav navbar-right">
<li id="inbox" class="dropdown">
<i class="fa fa-envelope fa-2x"></i> Inbox<span class="badge">42</span> <b class="caret"></b>
<ul class="dropdown-menu">
<li>message 1</li>
<li>message 1</li>
<li>message 1</li>
<li>message 1</li>
<li>message 1</li>
<li>message 1</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
<div class="collapse navbar-collapse" id="settings">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<i class="fa fa-cog fa-2x"></i> Settings <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</div>
So basically, when in mobile, you can see the two toggle buttons. Is there a way for that toggle button to open to the sub menu instead of clicking the link and then having it open.
how it is now: toggle button, click link, then it opens
what i would like: toggle button, opens right to the drop down.

Twitter bootstrap dropdown menu not displaying

My drop down menu nested inside of my main drop down menu won't display all of my information. I played around with it inside JSFiddle and still can't get it to work. If I click the user glyphicon to expand the options, it will get cut off at the bottom of the main menu size.
http://jsfiddle.net/2hGuv/
Here's the HTML
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#ns-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>
</div>
<div class="collapse navbar-collapse" id="ns-navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="hidden-sm">Events</li>
<li class="hidden-sm">Contest</li>
<li>Magazine</li>
<li>Contact</li>
<li class="dropdown">
Follow <b class="caret"></b>
<ul class="dropdown-menu">
<li>
<a href="http://visitor.r20.constantcontact.com/d.jsp?llr=zta6bgfab&p=oi&m=1105083662969" target="_blank">
Join Our Mailing List
</a>
</li>
<li class="navbar-follow">
<div class="addthis_toolbox addthis_32x32_style addthis_default_style">
<a class="addthis_button_facebook_follow" addthis:userid="nextstopmag"></a>
<a class="addthis_button_twitter_follow" addthis:userid="nextstopmag"></a>
<a class="addthis_button_linkedin_follow" addthis:userid="searles-media-inc." addthis:usertype="company"></a>
<a class="addthis_button_google_follow" addthis:userid="+Nextstopmagazine"></a>
</div>
</li>
</ul>
</li>
<li class="dropdown visible-sm">
More <b class="caret"></b>
<ul class="dropdown-menu">
<li>Events</li>
<li>Contest</li>
<li>Search</li>
</ul>
</li>
<li class="dropdown">
<span class="glyphicon glyphicon-user"></span> <b class="caret"></b>
<ul class="dropdown-menu">
<li>My Dashboard</li>
<li><a class="dropdown-toggle" href="~/account/manage">Manage Account</a></li>
<li>Log off </li>
</ul>
</li>
<li class="hidden-sm"><span class="glyphicon glyphicon-search"></span></li>
</ul>
</div>
</div>
</nav>

Sounds like you have overflow: hidden; on your navbar.
The fiddle seems to be working.